Skip to main content

HTML Tags

  • HTML Tags (a, body, button, div, form, h1-h6, img, input, ul-li, p, span, section, link, select-option)
  • Semantic and Non-Semantic HTML Tags (section, header, footer, article, aside, address, main)
  • Block Level and Inline Level Elements
  • Custom Attributes
  • Global Attributes (async, checked, class, id, href, src, disabled, name, type, title, alt)
  • Attributes
  • DOM (Document Object Model), CSSOM (CSS Object Model), Render Tree, Layout, Paint
  • Preload, Prefetch, Preconnect
  • CSS Media "print," Media "all"
    <link rel="stylesheet" href="print-styles.css" media="print" onload="this.media='all'">
  • Document
  • Body and Head Tags
  • Script (Async and Defer)
  • Web Workers (onmessage and postmessage)
  • Service Workers
  • Event Listeners (onchange, onclick, onfocus, onkeydown, onload)
  • Event Bubbling and Event Capturing
  • Data Attributes (data-my-information) - element.dataset.myInformation and getAttribute
  • 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)
  • 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
  • <slot> Element in Web Components
  • Shadow DOM (const shadowRoot = this.attachShadow({ mode: 'open' });) and Encapsulation
  • Custom Elements and Web Components
  • crossorigin Attribute in the <script> Tag
  • srcset Attribute in <img> Tag

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.attributes.length
  • element.children
  • element.click()
  • element.innerHTML
  • element.getBoundingClientRect()
  • element.getElementsByClassName("child")
  • element.removeEventListener(event, function, capture)

Detailed#

  • HTML Tags (p, h1, input, span, a)
  • Semantic (section, header, footer) and Non-Semantic HTML Tags
  • Custom Attributes
  • Global Attributes
  • Attributes
  • Document
  • Event Listeners
  • Data Attributes (data-my-information)
  • getAttribute
  • Window, Form, Mouse, and Keyboard Events