Skip to main content

HTML Concepts

HTML Tags#

  • HTML Tags (a, body, button, div, form, h1-h6, img, input, ul-li, p, span, section, link, select-option)

  • Non-Semantic and Semantic HTML Tags (section, header, footer, article, aside, address, main)

  • Block Level and Inline Level Elements

  • Custom Attributes and Global Attributes (async, checked, class, id, href, src, disabled, name, type, title, alt)

  • Data Attributes (data-my-information)

    • use element.dataset.myInformation
    • getAttribute - element.getAttribute("data-my-information")

  • CSS Media "print," Media "all"

    <link  rel="stylesheet"  href="print-styles.css"  media="print"  onload="this.media='all'"/>

  • Script (Async and Defer), <script type="module">

  • Preload, Prefetch, Preconnect

  • DOM (Document Object Model), CSSOM (CSS Object Model), Render Tree, Layout, Paint

  • reflow, repaint, composite

  • csr vs ssr; Hydration; streaming ssr

  • lazy loading (intersection observer)

  • critical render path

  • localstorage, sessionstorage, cookies, cache api, indexedDB

  • Html vs DOM

  • Form Tag (name, id, label, fieldset, legend, tabindex)

  • Document

  • Body and Head Tags

  • Web Workers (onmessage and postmessage)

  • Service Workers

    • PWA and manifest.json

Events#

  • Event Listeners (onchange, onclick, onfocus, onkeydown, onload)
  • Event Bubbling and Event Capturing
  • Event Delegation
parent.addEventListener("click", (e) => {  if (e.target.matches(".btn")) {  }})

  • HTML URL Encoding and ASCII Character Set

  • Window, Form, Mouse, and Keyboard Events

  • Accessibility (Headings, Alt Text, Semantic Elements, Descriptive Link Text, Keyboard Accessibility, Color Usage in Careful Manner, Form Accessibility, ARIA roles, accessibility tree)

  • HTML Entities (e.g., &lt; represents <, and &amp; represents &)

  • Viewport Meta Tag in HTML and Its Importance in Mobile Web Design

  • <picture> Element in HTML5

  • autocomplete Attribute in HTML Forms

  • Web Components and Custom Elements

    • <slot> Element
    • Shadow DOM (const shadowRoot = this.attachShadow({ mode: 'open' });) and Encapsulation

  • crossorigin Attribute in the <script> Tag

  • srcset Attribute in <img> Tag

  • Window (alert, settimeout, history, location)

  • Security (xss, csrf, CSP, CORS)

  • fetch API

  • html geolocation apis

  • history api (pushState, popState, replaceState)

Document#

  • document.getElementById()
  • document.getElementsByClassName() (returns a list)
  • document.querySelector() (returns the first matched element)
  • document.querySelectorAll() (returns a list)
  • document.addEventListener("click", myFunction)
  • document.removeEventListener("mousemove", myFunction)
  • document.cookie
  • document.createElement("p")

HTML Element#

  • element.addEventListener("click", myFunction)
  • element.addEventListener("click", myFunction, true)
  • element.removeEventListener(event, function, capture)
  • element.attributes.length
  • element.children
  • element.click()
  • element.innerHTML
  • element.getBoundingClientRect()
  • element.getElementsByClassName("child")