Executive Summary
HTML in 2026 is a continuously evolving living standard maintained by WHATWG, with no versioned releases planned. The language has expanded far beyond its original hypertext roots to include native dialog modals, popover elements, declarative Shadow DOM, and advanced form controls. Semantic element adoption has reached 90% on modern websites, the Dialog element saw 65% adoption (up from 1% in 2016), and Web Components are used on 54% of sites tracked by HTTP Archive. This guide documents every element, attribute, and API in the current HTML Living Standard.
The guide covers 100+ HTML elements across all categories (document, semantic, text, list, table, form, media, interactive, embedded, web components), 27 global attributes, 22 input types, 45+ ARIA roles, 24+ meta tags, 32 event attributes, 40 HTML entities, and practical guidance on accessibility, performance, and structured data. Every section includes reference tables with downloadable CSV data.
- 100+ HTML elements documented across 12 categories with descriptions, deprecation status, self-closing behavior, and HTML version introduced.
- Semantic HTML adoption reached 90% in 2026. The <header>, <nav>, <main>, and <footer> elements are now used on the vast majority of modern websites, replacing the <div class="header"> patterns of the past.
- Dialog and Popover APIs provide native modal and popup functionality without JavaScript libraries. The Popover API (2024) enables tooltips, dropdowns, and menus with zero JS using the popover and popovertarget attributes.
- Web Components adoption at 54%, with Declarative Shadow DOM enabling server-side rendering. Custom Elements, Shadow DOM, and <template>/<slot> are now first-class citizens used by GitHub, YouTube, and Salesforce.
100+
HTML elements documented
90%
Semantic HTML adoption
54%
Web Components usage
65%
Dialog element adoption
Part 1: Document Structure
Every HTML document follows a standard structure. The <!DOCTYPE html> declaration tells the browser to use standards mode (not quirks mode). The <html> element is the root, with a lang attribute for the document language. Inside <html>: the <head> contains metadata (title, character encoding, viewport, stylesheets, scripts, meta tags) and the <body> contains all visible content.
The <head> section should always include: <meta charset="UTF-8"> (character encoding, must be within first 1024 bytes), <meta name="viewport" content="width=device-width, initial-scale=1"> (responsive design), and <title> (browser tab, search results, bookmarks). Additional metadata includes description meta tags for SEO, Open Graph tags for social sharing, link tags for stylesheets and preloading, and script tags for JavaScript.
The body should follow a logical structure: <header> with site branding and primary navigation, <main> with the dominant content (one per page), optional <aside> for supplementary content, and <footer> with copyright, secondary links, and contact information. This structure maps directly to ARIA landmark roles that screen readers use for navigation.
Part 2: Semantic HTML
Semantic HTML uses elements that convey meaning about the content they contain, replacing the generic <div> and <span> elements that dominated web development before HTML5. The key semantic elements are: <header> (introductory content, banner landmark), <nav> (navigation links), <main> (dominant page content, one per page), <article> (self-contained composition like a blog post or comment), <section> (thematic grouping with a heading), <aside> (tangentially related content), and <footer> (footer information, contentinfo landmark).
Benefits of semantic HTML: (1) Accessibility: screen readers map semantic elements to landmark roles, allowing users to jump between sections. (2) SEO: search engines understand page structure and content hierarchy. (3) Maintainability: code is self-documenting. (4) Default behavior: elements like <dialog> provide focus trapping, <details> provides toggle functionality. The <search> element (2023) identifies search functionality, and <hgroup> groups headings with subheadings.
Semantic Element Usage in 2026
13 rows
| Element | Usage % | Purpose | WCAG/ARIA Benefit |
|---|---|---|---|
| <header> | 88 | Introductory content or navigational links | Banner landmark (role=banner) |
| <nav> | 85 | Navigation links section | Navigation landmark (role=navigation) |
| <main> | 82 | Dominant content of the body | Main landmark (role=main) |
| <footer> | 86 | Footer for section or page | Content info landmark (role=contentinfo) |
| <article> | 62 | Self-contained composition | Article landmark (role=article) |
| <section> | 70 | Thematic grouping of content | Region landmark (role=region) with aria-label |
| <aside> | 55 | Tangentially related content | Complementary landmark (role=complementary) |
| <figure>/<figcaption> | 42 | Self-contained illustration with caption | Associates caption with image for AT |
| <details>/<summary> | 38 | Disclosure widget, expandable content | Built-in keyboard accessible, ARIA states free |
| <dialog> | 30 | Modal or non-modal dialog box | Focus trapping, role=dialog, Esc to close |
| <time> | 28 | Machine-readable date/time | Parseable datetime for AT and search engines |
| <mark> | 22 | Highlighted/relevant text | Conveys highlight semantically |
| <address> | 18 | Contact information for nearest article or body | Identifies contact info for AT |
HTML5 Feature Adoption (2016-2026)
Source: OnlineTools4Free Research
Part 3: Forms and Input Types
HTML5 introduced 13 new input types beyond the original text, password, checkbox, radio, submit, reset, hidden, and button. The new types provide built-in validation (email, url), native date/time pickers (date, time, datetime-local, month, week), numeric controls (number, range), color pickers (color), telephone input with mobile-optimized keyboards (tel), search fields with clear buttons (search), and file uploads with MIME filtering (file). Each input type triggers the appropriate virtual keyboard on mobile devices.
Form validation attributes: required (field must have a value), pattern (regex validation), minlength/maxlength (text length limits), min/max (numeric range), step (valid increments), and type-specific validation. The Constraint Validation API provides JavaScript control: checkValidity(), reportValidity(), setCustomValidity(). CSS pseudo-classes :valid, :invalid, :required, :optional, :in-range, :out-of-range, :placeholder-shown style validation states. The new :user-valid and :user-invalid pseudo-classes only apply after user interaction.
Form accessibility: every input must have a <label> with a for attribute matching the input id. Use <fieldset> and <legend> to group related inputs (e.g., radio button groups, address fields). Use aria-describedby to link error messages to inputs. The autocomplete attribute helps browsers auto-fill fields (name, email, tel, street-address, cc-number). The enterkeyhint attribute customizes the Enter key label on mobile keyboards (search, done, go, next, send).
HTML Input Types (22 Types)
22 rows
| Input Type | Description | Validation | Mobile Keyboard |
|---|---|---|---|
| text | Single-line text input | maxlength, minlength, pattern, required | Standard text |
| Email address with built-in validation | Built-in email format, multiple, pattern | Email keyboard (@ key) | |
| password | Masked text input for secrets | maxlength, minlength, pattern | Standard text |
| number | Numeric input with spinner | min, max, step | Numeric keypad |
| tel | Telephone number (no built-in validation) | pattern (custom) | Phone keypad |
| url | URL with built-in validation | Built-in URL format, pattern | URL keyboard (/, .com) |
| search | Search field with clear button | Same as text | Search keyboard (Enter = Search) |
| date | Date picker (YYYY-MM-DD) | min, max, step | Native date picker |
| time | Time picker (HH:MM) | min, max, step | Native time picker |
| datetime-local | Combined date and time picker | min, max, step | Native datetime picker |
| month | Month and year picker | min, max, step | Native month picker |
| week | Week number and year picker | min, max, step | Native week picker |
| color | Color picker (hex value) | None (always valid hex) | Native color picker |
| range | Slider control | min, max, step | N/A (slider) |
| file | File upload (accept, multiple) | accept (MIME/extension) | File picker |
| checkbox | Boolean toggle (checked) | required | N/A (tap) |
| radio | Single selection from group (name groups) | required | N/A (tap) |
| hidden | Hidden field submitted with form | None | N/A (invisible) |
| submit | Form submit button | N/A | N/A |
| reset | Form reset button | N/A | N/A |
Page 1 of 2
Part 4: Tables
HTML tables are for tabular data only (never for layout). A proper table structure: <table> wraps everything, <caption> describes the table purpose (visible heading), <thead> groups header rows, <tbody> groups data rows, <tfoot> groups footer rows (summaries, totals). <tr> defines rows, <th> defines header cells (with scope="col" or scope="row" for accessibility), and <td> defines data cells.
Table attributes: colspan (cell spans multiple columns), rowspan (cell spans multiple rows). For complex tables with multi-level headers, use the headers attribute on <td> elements referencing the id values of their <th> headers. The <colgroup> and <col> elements allow styling entire columns. Screen readers announce table structure, header associations, and position (row 3 of 10, column 2 of 5) when tables are properly marked up.
Part 5: Media (Video, Audio, Picture)
The <video> element provides a native video player. Key attributes: controls (show play/pause/volume/progress), autoplay (requires muted for autoplay to work in most browsers), muted, loop, poster (thumbnail image shown before play), preload (none/metadata/auto), width, height. Provide multiple <source> elements for format fallback: MP4 (H.264) for universal support, WebM (VP9/AV1) for better compression. The <track> element provides subtitles (kind="subtitles"), captions (kind="captions"), and descriptions in WebVTT format.
The <audio> element works identically to <video> without the visual component. Common formats: MP3 (universal), AAC (Apple), OGG Vorbis (open), WAV (uncompressed). The <picture> element enables responsive images with art direction: <source> elements specify media queries (different image crops for different viewports) and type attributes (format negotiation: AVIF, WebP, JPEG fallback). The <img> inside <picture> is the fallback and carries the alt text.
Image performance attributes: loading="lazy" defers off-screen images, decoding="async" prevents blocking the main thread, fetchpriority="high" prioritizes LCP images. Always set width and height to prevent Cumulative Layout Shift (CLS). The srcset attribute on <img> provides resolution switching (1x, 2x, 3x) and the sizes attribute tells the browser how wide the image will be rendered at each breakpoint.
Part 6: Canvas API
The <canvas> element provides a bitmap drawing surface controlled entirely by JavaScript. Create a canvas with width and height attributes (CSS dimensions can differ, causing scaling). Get a drawing context: canvas.getContext("2d") for 2D graphics or canvas.getContext("webgl2") for 3D graphics via WebGL. The 2D context provides methods for: rectangles (fillRect, strokeRect, clearRect), paths (beginPath, moveTo, lineTo, arc, bezierCurveTo, quadraticCurveTo, closePath, fill, stroke), text (fillText, strokeText, measureText), images (drawImage), gradients (createLinearGradient, createRadialGradient), patterns (createPattern), shadows (shadowColor, shadowBlur), and transformations (translate, rotate, scale, transform).
Canvas use cases: charts and data visualization (though libraries like Chart.js abstract this), image manipulation (filters, cropping, watermarks), 2D games (sprite rendering, collision detection), generative art, and real-time visualizations. For accessibility, canvas content has no DOM nodes and is invisible to screen readers. Provide: aria-label on the canvas element, fallback text content inside the canvas tags, or an accessible alternative representation of the visual content.
Part 7: SVG Inline
SVG (Scalable Vector Graphics) can be inlined directly in HTML, making SVG elements part of the DOM tree. Inline SVG elements can be styled with CSS (fill, stroke, opacity, transform) and manipulated with JavaScript (event listeners, animation). SVG provides its own elements: <svg> (container), <circle>, <rect>, <ellipse>, <line>, <polyline>, <polygon>, <path> (the most powerful, can draw any shape), <text>, <g> (group), <use> (reuse defined elements), <defs> (definitions for reuse), <symbol> (reusable graphic), <clipPath>, <mask>, <filter>, <linearGradient>, <radialGradient>.
Inline SVG vs external SVG: Inline saves an HTTP request and enables CSS/JS manipulation, but increases HTML size and cannot be cached separately. External SVG (<img src="icon.svg">) is cached but cannot be styled with CSS. The <use> element references symbols from an SVG sprite sheet (best of both worlds for icon systems). SVG accessibility: use role="img" and aria-label for meaningful SVGs, or aria-hidden="true" for decorative ones. <title> and <desc> elements inside SVG provide accessible names and descriptions.
Part 8: Web Components
Web Components are browser-native APIs for creating reusable, encapsulated HTML elements. Three core technologies: (1) Custom Elements (customElements.define) create new HTML tags with custom behavior. Custom element names must contain a hyphen (my-component). (2) Shadow DOM (element.attachShadow) provides encapsulated DOM and styles that do not leak in or out. (3) HTML Templates (<template> and <slot>) provide declarative markup that is not rendered until used.
Declarative Shadow DOM (2023) enables server-side rendering of Web Components by allowing shadow roots to be defined in HTML: <template shadowrootmode="open">...</template>. The browser creates the shadow root during HTML parsing, eliminating the flash of unstyled content. Slots (<slot>) inside shadow DOM define placeholders for projected light DOM content. Named slots (<slot name="header">) accept elements with matching slot attributes. The ::part() pseudo-element allows external styling of shadow DOM internals. Web Components are used by GitHub, YouTube, Salesforce, and many design systems.
Part 9: Accessibility and ARIA
ARIA (Accessible Rich Internet Applications) provides attributes that communicate accessibility information to assistive technologies. The first rule of ARIA: do not use ARIA if native HTML provides the semantics. A <button> is always better than <div role="button"> because the button provides built-in keyboard handling, focus management, and form submission. ARIA has three types of attributes: roles (what an element is), states (current conditions like aria-expanded), and properties (additional info like aria-label).
Landmark roles map to semantic elements: banner (<header>), navigation (<nav>), main (<main>), complementary (<aside>), contentinfo (<footer>), search (<search>). Screen readers provide shortcuts to jump between landmarks. Essential ARIA attributes: aria-label (accessible name for unlabeled elements), aria-hidden="true" (hide from AT), aria-expanded (toggle state), aria-describedby (link descriptions to controls), aria-live (announce dynamic changes), aria-required (required form fields), and aria-invalid (validation errors).
ARIA Roles Reference (45+ Roles)
45 rows
| ARIA Role | Category | Description | Implicit Element |
|---|---|---|---|
| alert | Live Region | Important, time-sensitive information. Assertive by default (interrupts). Use for error messages, urgent notifications. | None |
| alertdialog | Window | Dialog containing an alert message that requires user acknowledgment. | None |
| application | Landmark | Declares a region as a web application (not a document). Disables most screen reader shortcuts. Use sparingly. | None |
| article | Document | Self-contained composition (blog post, comment). Implied by <article>. | <article> |
| banner | Landmark | Site-wide header/branding. Implied by <header> when direct child of <body>. | <header> (top-level) |
| button | Widget | Clickable element that triggers an action. Implied by <button>. Requires keyboard handling if on non-button. | <button> |
| checkbox | Widget | Checkable input. Implied by <input type="checkbox">. Requires aria-checked state. | <input type="checkbox"> |
| complementary | Landmark | Supporting content related to main. Implied by <aside>. | <aside> |
| contentinfo | Landmark | Information about the document (copyright, privacy links). Implied by <footer> at top level. | <footer> (top-level) |
| dialog | Window | Dialog box or modal. Implied by <dialog>. Requires aria-modal="true" for modals. | <dialog> |
| feed | Document | Scrollable list of articles (social feed). Each article navigable with article role. | None |
| figure | Document | Self-contained unit of content. Implied by <figure>. | <figure> |
| form | Landmark | Form landmark (only when named with aria-label or aria-labelledby). Implied by <form> with accessible name. | <form> (with name) |
| grid | Widget | Table-like interactive widget with arrow key navigation. Used for spreadsheet-like UIs, calendar grids. | None |
| heading | Document | Section heading. Implied by <h1>-<h6>. Requires aria-level if used on non-heading element. | <h1>-<h6> |
| img | Document | Image content. Implied by <img>. Use on decorative SVGs with aria-hidden or meaningful SVGs with aria-label. | <img> |
| link | Widget | Hyperlink. Implied by <a href>. Requires keyboard activation if on non-anchor element. | <a href> |
| list | Document | List container. Implied by <ul> and <ol>. Contains listitem roles. | <ul>, <ol> |
| listitem | Document | Item in a list. Implied by <li>. Must be child of list role. | <li> |
| log | Live Region | Log of sequential information (chat, error log). New entries announced. Polite by default. | None |
Page 1 of 3
Part 10: HTML Entities
HTML entities represent special characters that cannot be typed directly or have special meaning in HTML. Five characters must always be escaped: ampersand (&), less-than (<), greater-than (>), double quote ("), and apostrophe ('). Named entities are readable: © for copyright, — for em dash, for non-breaking space. Numeric references work for any Unicode character: © (decimal) or © (hexadecimal). With UTF-8 encoding, most characters can be typed directly.
HTML Entities Reference (40 Entities)
40 rows
| Entity | Character | Name | Numeric Code | Usage |
|---|---|---|---|---|
| & | & | Ampersand | & | Required: literal & in HTML must be escaped |
| < | < | Less than | < | Required: literal < in HTML must be escaped |
| > | > | Greater than | > | Recommended in attributes and content |
| " | " | Double quote | " | Required inside double-quoted attributes |
| ' | ' | Apostrophe | ' | Inside single-quoted attributes (HTML5) |
| | Non-breaking space |   | Prevents line break between words/numbers | |
| © | © | Copyright | © | Copyright symbol in footers |
| ® | ® | Registered trademark | ® | Registered trademark symbol |
| ™ | ™ | Trademark | ™ | Unregistered trademark symbol |
| — | — | Em dash | — | Punctuation dash (longer than en dash) |
| – | – | En dash | – | Range indicator (2020-2026) |
| … | … | Horizontal ellipsis | … | Omitted text indicator (...) |
| « | « | Left guillemet | « | European quotation marks (French) |
| » | » | Right guillemet | » | European quotation marks (French) |
| “ | “ | Left double curly quote | “ | Typographic opening double quote |
| ” | ” | Right double curly quote | ” | Typographic closing double quote |
| ‘ | ‘ | Left single curly quote | ‘ | Typographic opening single quote |
| ’ | ’ | Right single curly quote | ’ | Typographic closing single quote / apostrophe |
| • | • | Bullet | • | List bullet character |
| ° | ° | Degree | ° | Temperature and angle notation |
Page 1 of 2
Part 12: Microdata and Structured Data
Structured data helps search engines understand page content and can enable rich results (FAQ dropdowns, recipe cards, product ratings, event listings, breadcrumbs). Three formats: (1) JSON-LD (preferred by Google): embedded in <script type="application/ld+json"> tags, separated from markup. (2) Microdata: uses itemscope, itemtype, and itemprop attributes directly on HTML elements. (3) RDFa: uses vocab, typeof, and property attributes. All use schema.org vocabulary.
Common schema.org types: Article (news, blog posts), Product (e-commerce), FAQPage (question-answer lists), HowTo (step-by-step guides), BreadcrumbList (navigation breadcrumbs), LocalBusiness (physical businesses), Event (upcoming events), Review (ratings), Recipe (cooking), Organization (company info), and Person. Google Rich Results Test validates structured data. Structured data does not directly affect rankings but increases click-through rates through rich result visibility.
Part 13: All HTML Elements (100+)
Complete HTML Elements Reference (100+)
104 rows
| Element | Category | Description | Self-Closing | HTML Version |
|---|---|---|---|---|
| <!DOCTYPE html> | Document | Document type declaration, tells browser to use HTML5 standards mode | N/A | HTML5 |
| <html> | Document | Root element of an HTML document, contains lang attribute | No | HTML1 |
| <head> | Document | Container for metadata (title, links, scripts, meta tags) | No | HTML1 |
| <body> | Document | Contains all visible page content | No | HTML1 |
| <title> | Metadata | Document title shown in browser tab and search results | No | HTML1 |
| <meta> | Metadata | Metadata about the document (charset, viewport, description, robots) | Yes | HTML2 |
| <link> | Metadata | Links external resources (stylesheets, icons, preload) | Yes | HTML2 |
| <style> | Metadata | Embedded CSS styles | No | HTML3.2 |
| <script> | Scripting | JavaScript code or external script reference (defer, async, type=module) | No | HTML3.2 |
| <noscript> | Scripting | Fallback content when JavaScript is disabled | No | HTML4 |
| <header> | Semantic | Introductory content or navigation, implies banner landmark | No | HTML5 |
| <nav> | Semantic | Section of navigation links | No | HTML5 |
| <main> | Semantic | Dominant content, unique per page, main landmark | No | HTML5 |
| <footer> | Semantic | Footer for section or page, contentinfo landmark | No | HTML5 |
| <article> | Semantic | Self-contained composition (blog post, news article, comment) | No | HTML5 |
| <section> | Semantic | Thematic grouping with heading, region landmark with aria-label | No | HTML5 |
| <aside> | Semantic | Tangentially related content (sidebar, callout) | No | HTML5 |
| <h1> to <h6> | Heading | Section headings, h1 highest importance, h6 lowest | No | HTML1 |
| <p> | Text | Paragraph of text | No | HTML1 |
| <a> | Text | Hyperlink (href, target, rel, download attributes) | No | HTML1 |
Page 1 of 6
Part 14: Global Attributes
Global attributes can be applied to any HTML element. Core attributes (id, class, style, title) are the most common. Accessibility attributes (tabindex, role, aria-*) provide information to assistive technologies. Internationalization attributes (lang, dir, translate) handle multilingual content. New attributes include popover (popup elements without JS), inert (non-interactive regions), and part/exportparts (Web Component styling).
Global Attributes Reference (27 Attributes)
27 rows
| Attribute | Description | Example | Category |
|---|---|---|---|
| id | Unique identifier for the element. Must be unique in the document. Used for CSS targeting (#id), JavaScript (getElementById), fragment links (#section). | <div id="hero"> | Core |
| class | Space-separated list of CSS classes. Multiple elements can share the same class. Primary styling mechanism in modern CSS. | <p class="text-lg bold"> | Core |
| style | Inline CSS declarations. Highest specificity. Avoid for maintainability; use classes instead. Useful for dynamic styles via JavaScript. | <div style="color: red"> | Core |
| title | Advisory text shown as tooltip on hover. Used by screen readers. On <abbr>, provides the full expanded form. | <abbr title="HTML">HTML</abbr> | Core |
| lang | Language of the element content (BCP 47 tag). Critical for accessibility and SEO. Set on <html> for page language, on elements for mixed-language content. | <html lang="en"> | Internationalization |
| dir | Text direction: ltr (left-to-right), rtl (right-to-left), or auto. Essential for Arabic, Hebrew, and other RTL languages. | <p dir="rtl"> | Internationalization |
| hidden | Boolean attribute that hides the element. Equivalent to display:none. The "until-found" value allows find-in-page to reveal hidden content. | <div hidden> | Display |
| data-* | Custom data attributes for storing extra information. Accessible via element.dataset in JavaScript. Common: data-id, data-action, data-testid. | <div data-user-id="42"> | Custom |
| tabindex | Controls focus order. 0: focusable in tab order. -1: focusable via JS only. Positive values discouraged (overrides natural order). | <div tabindex="0"> | Accessibility |
| role | ARIA role overriding implicit semantics. Use sparingly; prefer semantic HTML elements. Landmark roles: banner, navigation, main, complementary. | <div role="alert"> | Accessibility |
| aria-* | ARIA attributes providing accessibility information. Common: aria-label, aria-hidden, aria-expanded, aria-describedby, aria-live. | <button aria-label="Close"> | Accessibility |
| contenteditable | Makes element content editable by the user. Values: true, false, plaintext-only. Used for rich text editors and inline editing. | <div contenteditable="true"> | Interactive |
| draggable | Makes element draggable. Part of the HTML Drag and Drop API. Requires JavaScript event handlers (dragstart, dragover, drop). | <div draggable="true"> | Interactive |
| spellcheck | Enables or disables spell checking on editable elements and form inputs. Browser default varies. | <textarea spellcheck="false"> | Interactive |
| translate | Indicates whether element content should be translated. "no" prevents translation tools from translating (brand names, code). | <span translate="no">OnlineTools4Free</span> | Internationalization |
| enterkeyhint | Customizes the Enter key label on virtual keyboards. Values: enter, done, go, next, previous, search, send. | <input enterkeyhint="search"> | Mobile |
| inputmode | Hints the type of virtual keyboard to display. Values: none, text, decimal, numeric, tel, search, email, url. | <input inputmode="numeric"> | Mobile |
| autocapitalize | Controls automatic capitalization on mobile. Values: off, none, on, sentences, words, characters. | <input autocapitalize="words"> | Mobile |
| autofocus | Automatically focuses the element when page loads. Only one element per page should have autofocus. Dialog elements focus first focusable child. | <input autofocus> | Form |
| popover | Turns element into a popover (new in 2024). Values: auto (light dismiss), manual. Toggled with popovertarget attribute on buttons. | <div popover="auto"> | Interactive |
Page 1 of 2
Part 15: Event Attributes
Event attributes allow inline event handling directly in HTML. While addEventListener in JavaScript is preferred for separation of concerns, understanding event attributes is essential for reading legacy code and frameworks that use inline handlers. Categories: mouse events (click, dblclick, mouseover, mouseout), keyboard events (keydown, keyup), focus events (focus, blur), form events (input, change, submit, invalid), resource events (load, error), UI events (scroll, resize), touch events (touchstart, touchmove, touchend), drag events (dragstart, dragover, drop), and clipboard events (copy, paste, cut).
Event Attributes Reference (32 Events)
32 rows
| Event | Category | Description |
|---|---|---|
| onclick | Mouse | Fires when element is clicked. Prefer addEventListener in JS. Also fires on Enter/Space for buttons. |
| ondblclick | Mouse | Fires on double-click. Not accessible (no keyboard equivalent). Avoid for essential functionality. |
| onmouseover | Mouse | Fires when mouse enters element. Pair with onfocus for accessibility. Used for hover effects. |
| onmouseout | Mouse | Fires when mouse leaves element. Pair with onblur for accessibility. |
| onmousedown | Mouse | Fires when mouse button is pressed. Fires before onclick. Used for drag operations. |
| onmouseup | Mouse | Fires when mouse button is released. |
| onmousemove | Mouse | Fires when mouse moves over element. High frequency; throttle for performance. |
| onkeydown | Keyboard | Fires when key is pressed. Use event.key (not keyCode). Repeats while held. Primary keyboard event. |
| onkeyup | Keyboard | Fires when key is released. Does not repeat. Use for "key released" logic. |
| onfocus | Focus | Fires when element receives focus. Does not bubble (use onfocusin for bubbling). Critical for accessibility. |
| onblur | Focus | Fires when element loses focus. Does not bubble (use onfocusout for bubbling). Used for validation. |
| oninput | Form | Fires on every input change (character typed, paste, cut). Fires before onchange. Preferred for real-time validation. |
| onchange | Form | Fires when value changes AND element loses focus (text inputs) or immediately (select, checkbox, radio). |
| onsubmit | Form | Fires when form is submitted. Use event.preventDefault() to handle with JS. Validates required fields. |
| onreset | Form | Fires when form is reset. Rarely used. |
| oninvalid | Form | Fires when form validation fails on submit. Used to customize validation messages. |
| onload | Resource | Fires when resource finishes loading. On <body>: page loaded. On <img>: image loaded. On <script>: script loaded. |
| onerror | Resource | Fires when resource fails to load. Used for fallback images, error tracking. |
| onscroll | UI | Fires when element is scrolled. High frequency; use passive listener and requestAnimationFrame. |
| onresize | UI | Fires when window/element is resized. Window-level only for traditional events. Use ResizeObserver for elements. |
Page 1 of 2
Glossary (50+ Terms)
DOCTYPE
DocumentThe document type declaration (<!DOCTYPE html>) tells the browser to render the page in standards mode rather than quirks mode. In HTML5, the DOCTYPE is simplified to just "<!DOCTYPE html>" compared to the verbose DTD references required in HTML4 and XHTML. Without a DOCTYPE, browsers fall back to quirks mode which emulates bugs from legacy browsers.
Semantic HTML
StructureHTML elements that convey meaning about the content they contain, not just presentation. Examples: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Semantic HTML improves accessibility (screen readers navigate by landmarks), SEO (search engines understand content structure), and maintainability. It replaces the generic <div> and <span> soup of older web development.
DOM (Document Object Model)
Core ConceptThe in-memory tree representation of an HTML document that browsers construct. JavaScript interacts with the DOM to read and modify page content, structure, and style. The DOM is not the HTML source code; it is a live object model that reflects the current state of the page after parsing, scripting, and user interactions. Performance consideration: excessive DOM size (>1,500 nodes) impacts rendering performance.
Shadow DOM
Web ComponentsAn encapsulated DOM tree attached to an element, isolated from the main document DOM. Used by Web Components to prevent style leaking in or out. Elements inside Shadow DOM are not selectable by external CSS or querySelectors. Created with element.attachShadow({ mode: "open" }). The Shadow DOM has its own scope for styles, IDs, and accessibility.
Custom Elements
Web ComponentsA Web Components API that allows creating reusable HTML elements with custom behavior. Defined with customElements.define("my-component", MyComponent). Must extend HTMLElement (autonomous) or a built-in element (customized built-in, using the "is" attribute). Custom element names must contain a hyphen. Lifecycle callbacks: connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback.
HTML Template
Web ComponentsThe <template> element holds HTML content that is not rendered when the page loads. Its content exists as a DocumentFragment accessible via .content property. Used by Web Components and JavaScript to create reusable markup structures. Content inside <template> is inert: scripts do not run, images do not load, styles do not apply until cloned and inserted into the document.
Slot (Web Components)
Web ComponentsThe <slot> element inside a shadow DOM defines a placeholder where light DOM content is projected. Named slots (<slot name="header">) accept elements with matching slot attributes (<span slot="header">). The default slot (unnamed) captures all unassigned light DOM children. Slots enable composition in Web Components.
ARIA (Accessible Rich Internet Applications)
AccessibilityA set of HTML attributes that provide accessibility information to assistive technologies. ARIA roles define what an element is (role="dialog"), states describe current conditions (aria-expanded="true"), and properties provide additional information (aria-label="Close"). First rule of ARIA: do not use ARIA if native HTML provides the semantics you need. ARIA does not change element behavior; it only communicates to assistive technology.
Landmark Roles
AccessibilityARIA landmark roles identify major sections of a page for screen reader navigation. Six main landmarks: banner (<header>), navigation (<nav>), main (<main>), complementary (<aside>), contentinfo (<footer>), search (<search>). Screen reader users can jump between landmarks using keyboard shortcuts, making landmarks essential for efficient page navigation.
Alt Text
AccessibilityThe alt attribute on <img> elements provides alternative text for screen readers and when images fail to load. Decorative images should have empty alt="" (not missing alt). Informative images should have descriptive alt text conveying the same information. Complex images (charts, diagrams) need longer descriptions via aria-describedby or figcaption. Good alt text is concise, descriptive, and does not start with "image of" or "picture of".
Focus Management
AccessibilityThe practice of controlling which element receives keyboard focus and in what order. Natural focus order follows the DOM order for focusable elements (links, buttons, inputs). tabindex="0" makes non-interactive elements focusable. tabindex="-1" allows programmatic focus without tab access. Modal dialogs should trap focus inside. Skip links allow keyboard users to bypass navigation.
Viewport Meta Tag
Responsive DesignThe <meta name="viewport"> tag controls how mobile browsers render the page. "width=device-width" sets the viewport width to the device screen width. "initial-scale=1" sets the initial zoom level. Without this tag, mobile browsers render pages at a desktop-width viewport (typically 980px) and scale down, making text unreadably small. Essential for responsive web design.
Responsive Images
MediaTechniques for serving appropriate image sizes based on screen size, resolution, and format support. The <picture> element with <source> provides art direction (different crops). The srcset attribute on <img> provides resolution switching (same image, different sizes). The sizes attribute tells the browser how wide the image will be rendered. Together, they prevent loading oversized images on small screens.
Canvas API
GraphicsThe <canvas> element and its 2D rendering context (getContext("2d")) provide a bitmap drawing surface for JavaScript. Used for: charts, graphs, image manipulation, games, visualizations, and generative art. Canvas content is not accessible by default (no DOM nodes); use aria-label and fallback content for accessibility. For 3D graphics, use WebGL context (getContext("webgl2")).
SVG (Scalable Vector Graphics)
GraphicsAn XML-based vector image format that can be inlined directly in HTML. SVG images scale infinitely without quality loss (vector, not raster). Inline SVG elements are part of the DOM and can be styled with CSS and manipulated with JavaScript. SVG provides its own elements: <svg>, <circle>, <rect>, <path>, <text>, <g>, <use>, <defs>. Excellent for icons, logos, illustrations, and data visualizations.
Microdata
Structured DataAn HTML specification for embedding machine-readable data within HTML content using itemscope, itemtype, and itemprop attributes. Microdata follows schema.org vocabulary to describe entities like articles, products, reviews, events, and recipes. Search engines use microdata to generate rich snippets (star ratings, prices, recipes) in search results. Alternative formats: JSON-LD (preferred by Google), RDFa.
JSON-LD
Structured DataJavaScript Object Notation for Linked Data. A structured data format embedded in <script type="application/ld+json"> tags. Preferred by Google over microdata and RDFa because it separates structured data from HTML markup. Used for: Article, Product, FAQ, HowTo, BreadcrumbList, LocalBusiness, Event, and other schema.org types. Does not affect page rendering.
Content Model
SpecificationHTML elements are categorized by what content they can contain. Categories: flow content (most elements), phrasing content (inline elements), embedded content (img, video, iframe), interactive content (a, button, input), metadata content (meta, link), heading content (h1-h6), sectioning content (article, section, aside, nav). An element content model determines which child elements are valid.
Void Elements
SpecificationHTML elements that cannot have child content and do not need closing tags. The void elements are: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr>. In HTML5, the trailing slash is optional (<br> and <br/> are both valid). In XHTML, the trailing slash was required.
Block vs Inline Elements
LayoutBlock-level elements (div, p, h1-h6, section, article) start on a new line and take full available width by default. Inline elements (span, a, strong, em, code) flow within text and only take the width of their content. This distinction is about default CSS display property; any element display can be changed with CSS. HTML5 replaced this with content model categories.
Form Validation
FormsHTML5 provides built-in client-side form validation through attributes: required (field must be filled), pattern (regex match), minlength/maxlength (text length), min/max (numeric range), step (valid increments), and type-specific validation (email, url). The :valid and :invalid CSS pseudo-classes style validation states. The Constraint Validation API (checkValidity(), setCustomValidity()) enables programmatic control. Always validate server-side too.
Autofill
FormsBrowser feature that automatically fills form fields based on previously saved data. The autocomplete attribute tells browsers what kind of data a field expects (name, email, tel, street-address, cc-number). Proper autocomplete values speed up form completion and improve conversion rates. Values follow a standard taxonomy defined in the HTML specification.
Progressive Enhancement
PhilosophyA web development strategy where core content and functionality are delivered in semantic HTML that works for all browsers and devices, then enhanced with CSS for visual design and JavaScript for interactive features. The opposite of graceful degradation. Benefits: works without JavaScript (SEO, performance), accessible by default, resilient to network failures.
Web Components
Web ComponentsA set of browser APIs (Custom Elements, Shadow DOM, HTML Templates, ES Modules) that enable creating reusable, encapsulated HTML elements. Web Components work in any framework or without a framework. Unlike framework components (React, Vue), Web Components are a browser-native standard. Popular libraries: Lit, Stencil, FAST. Used by GitHub (github-include-fragment), YouTube (yt-player), and Salesforce (Lightning Web Components).
Popover API
InteractiveA new HTML API (2024) for creating popup elements without JavaScript. Add popover attribute to create a popover, popovertarget attribute on a button to toggle it. Features: automatic light-dismiss (click outside to close), focus management, backdrop styling (::backdrop), top layer rendering (always on top of everything). Replaces most custom popup/tooltip/dropdown JavaScript.
Dialog Element
InteractiveThe <dialog> element provides a native dialog box / modal implementation. showModal() opens as a modal with backdrop, focus trapping, and Esc to close. show() opens as a non-modal dialog. close() closes the dialog and fires the close event. The ::backdrop pseudo-element styles the overlay. Replaces the need for JavaScript modal libraries in most cases. Return value available via dialog.returnValue.
Lazy Loading
PerformanceThe loading="lazy" attribute on <img> and <iframe> elements defers loading until they are near the viewport. This reduces initial page load time and saves bandwidth for content below the fold. Do NOT lazy-load above-the-fold images (hero, LCP image) as it delays rendering. The browser determines the exact loading threshold. No JavaScript required.
Preload / Preconnect / Prefetch
PerformanceResource hints that help browsers prioritize resource loading. <link rel="preload"> fetches critical resources early (fonts, hero images). <link rel="preconnect"> establishes early connections to third-party origins. <link rel="prefetch"> fetches resources for future navigations at low priority. <link rel="dns-prefetch"> resolves DNS early. Proper use of these hints can significantly improve LCP and page load times.
Content Security Policy (CSP)
SecurityA security mechanism delivered via HTTP header or <meta http-equiv> that restricts which resources can load on a page. Prevents XSS by blocking inline scripts and unauthorized external scripts. Directives: script-src, style-src, img-src, connect-src, font-src, frame-src, default-src. Nonce-based or hash-based policies allow specific inline scripts. Report-only mode tests policies without enforcement.
Quirks Mode
RenderingA browser rendering mode that emulates bugs and non-standard behaviors from older browsers (IE5, Netscape) for backward compatibility. Triggered by missing or incorrect DOCTYPE declarations. In quirks mode, the box model uses a different calculation (border-box by default), CSS table cells have different height behavior, and various other legacy behaviors are activated. Always use <!DOCTYPE html> to trigger standards mode.
Character Encoding
EncodingThe mapping between bytes and characters. UTF-8 is the universal standard for the web, supporting all Unicode characters (every writing system, emoji, symbols). Always declare <meta charset="UTF-8"> as the first element in <head>. Save your HTML files as UTF-8. BOM (Byte Order Mark) is unnecessary and can cause issues. Legacy encodings (ISO-8859-1, Windows-1252) should be migrated to UTF-8.
HTML Parsing
Core ConceptBrowsers parse HTML using a tokenizer and tree builder algorithm defined in the HTML specification. The parser is error-tolerant: it handles unclosed tags, mismatched nesting, and other markup errors by applying error recovery rules. This is why "invalid" HTML still renders. The parsing algorithm handles <script>, <style>, and <template> elements specially. The document.readyState property reflects parsing progress: loading, interactive, complete.
DOMContentLoaded
EventsA document event that fires when the HTML has been fully parsed and the DOM tree is built, without waiting for stylesheets, images, and subframes to finish loading. This is typically when JavaScript that manipulates the DOM should run. The load event, in contrast, fires after all resources (images, styles, iframes) have finished loading. DOMContentLoaded is faster and preferred for most initialization code.
Intersection Observer
JavaScript APIA JavaScript API (not an HTML element, but works with HTML) that efficiently detects when elements enter or exit the viewport. Used for: lazy loading images, infinite scrolling, animation triggers, analytics (impressions). Replaces expensive scroll event listeners. Configuration: root (viewport or container), rootMargin (extend/shrink viewport), threshold (visibility percentage).
Open Graph Protocol
Social/SEOA metadata protocol (og: prefixed meta tags) that controls how URLs appear when shared on social media platforms (Facebook, LinkedIn, Discord, Slack). Key properties: og:title, og:description, og:image (1200x630px recommended), og:url, og:type. Without Open Graph tags, social platforms guess the title, description, and image from the page content, often poorly.
Structured Data
SEOMachine-readable information embedded in HTML that helps search engines understand page content. Three formats: JSON-LD (preferred), Microdata (HTML attributes), RDFa. Uses schema.org vocabulary. Enables rich results in search: FAQ dropdowns, recipe cards, product ratings, event listings, breadcrumb trails, how-to steps. Test with Google Rich Results Test tool.
HTML Imports (Deprecated)
DeprecatedA Web Components feature that allowed importing HTML documents into other HTML documents using <link rel="import">. Deprecated in 2019 in favor of ES Modules. Replaced by JavaScript import statements and module scripts. No browser supports HTML Imports natively anymore. Modern Web Component distribution uses npm packages and JavaScript modules.
XHTML
HistoryA reformulation of HTML as valid XML, requiring strict syntax: all tags must be closed, all attributes quoted, element names lowercase, documents must be well-formed. XHTML was popular in the early 2000s but HTML5 relaxed these requirements. XHTML is still valid as a media type (application/xhtml+xml) but is rarely used. HTML5 parsers are more forgiving and practical.
Web Manifest
PWAA JSON file (manifest.json or manifest.webmanifest) linked from HTML with <link rel="manifest">. Defines PWA metadata: name, short_name, start_url, display (standalone, fullscreen), background_color, theme_color, icons (multiple sizes), and shortcuts. Required for Add to Home Screen and installable PWA status. Also configurable: orientation, scope, categories, screenshots.
Service Worker
PWAA JavaScript worker registered from HTML pages that acts as a proxy between the browser and the network. Enables: offline functionality (cache-first strategies), push notifications, background sync, and periodic background fetch. Registered with navigator.serviceWorker.register(). Requires HTTPS. Has a lifecycle: install, activate, fetch events. The foundation of Progressive Web Apps.
Constraint Validation API
FormsA JavaScript API for HTML form validation. Methods: checkValidity() (returns boolean), reportValidity() (shows native UI), setCustomValidity(message). Properties: validity (ValidityState object with valueMissing, typeMismatch, patternMismatch, etc.), validationMessage. CSS pseudo-classes: :valid, :invalid, :required, :optional, :in-range, :out-of-range, :placeholder-shown. Allows custom styling and messaging for built-in validation.
Subresource Integrity (SRI)
SecurityA security feature that verifies external resources (scripts, stylesheets from CDNs) have not been tampered with. Add integrity attribute with a cryptographic hash: <script src="cdn/lib.js" integrity="sha384-abc123" crossorigin="anonymous">. If the file hash does not match, the browser blocks loading. Protects against CDN compromises and supply chain attacks.
Referrer Policy
SecurityControls how much referrer information is sent when navigating from your page. Set via <meta name="referrer"> or Referrer-Policy HTTP header. Values: no-referrer, same-origin, strict-origin-when-cross-origin (recommended default), origin, unsafe-url. Protects user privacy by limiting URL information shared with third parties. rel="noreferrer" on links prevents referrer for individual links.
Feature Policy / Permissions Policy
SecurityHTTP header or <iframe allow> attribute that controls which browser features are available. Features: camera, microphone, geolocation, fullscreen, payment, autoplay, accelerometer. Prevents embedded content from accessing sensitive APIs. Example: <iframe allow="camera; microphone"> grants camera and microphone access to the iframe content.
Blocking vs Non-blocking Resources
PerformanceRender-blocking resources (CSS, synchronous scripts) prevent the browser from rendering the page until they are loaded and processed. Non-blocking resources (async/defer scripts, lazy images) load without blocking rendering. To improve performance: inline critical CSS, add defer/async to scripts, preload key resources, and use font-display: swap for web fonts.
Critical Rendering Path
PerformanceThe sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible pixels. Steps: parse HTML to DOM, parse CSS to CSSOM, combine into render tree, layout (compute geometry), paint (rasterize pixels), composite (layer composition). Optimizing the critical rendering path reduces time-to-first-paint and improves Core Web Vitals (LCP, FID/INP).
HTML Living Standard
SpecificationThe HTML specification maintained by WHATWG (Web Hypertext Application Technology Working Group) as a continuously updated document, rather than versioned releases. Since 2019, the WHATWG HTML Living Standard is the authoritative HTML specification (W3C deferred to WHATWG). New features are added incrementally. There is no "HTML6" planned; HTML evolves continuously through the Living Standard.
Declarative Shadow DOM
Web ComponentsA way to create Shadow DOM directly in HTML using the shadowrootmode attribute on <template> elements: <template shadowrootmode="open">. Enables server-side rendering of Web Components without JavaScript. The browser creates the shadow root during HTML parsing. Useful for SSR frameworks and static site generators that include Web Components.
Cross-Origin Resource Sharing (CORS)
SecurityA browser security mechanism that controls which origins can access resources. Relevant HTML attributes: crossorigin on <img>, <script>, <link>, <audio>, <video>. Values: anonymous (no credentials), use-credentials (includes cookies). Without crossorigin, errors from cross-origin scripts are sanitized for privacy. Required for SRI, canvas tainted-origin restrictions, and CORS-aware fetch.
Inert Attribute
AccessibilityThe inert boolean attribute makes an element and all its descendants non-interactive and invisible to assistive technology. The element and its children cannot be focused, clicked, selected, or found by in-page search. Use cases: content behind a modal dialog, off-screen navigation drawers, disabled form sections. Replaces complex aria-hidden + tabindex=-1 patterns.
Picture Element
MediaThe <picture> element wraps <source> and <img> elements to provide responsive image delivery. <source> elements specify media queries and image formats; the browser picks the first matching source. Use cases: different image crops for different viewports (art direction), modern format delivery (AVIF, WebP with JPEG fallback), dark mode images. The <img> is the fallback and carries the alt text.
FAQ (20 Questions)
Try It Yourself
Use these embedded tools to format HTML, preview markup, and generate meta tags for your projects.
Try it yourself
Html Formatter
Tool preview unavailable.
Open Html Formatter in a new pageTry it yourself
Html Preview
Tool preview unavailable.
Open Html Preview in a new pageTry it yourself
Meta Tag Generator
Raw Data Downloads
Citations and Sources
Try These Tools for Free
Put this knowledge into practice with our browser-based tools. No signup needed.
HTML Formatter
Format and beautify HTML code with proper indentation and structure.
HTML Minifier
Minify HTML code by removing whitespace, comments, and unnecessary attributes.
HTML Entities
Encode and decode HTML entities for safe rendering in web pages.
HTML Preview
Paste HTML and see a live rendered preview. Side-by-side editor and preview like a mini CodePen.
Meta Tags
Generate SEO meta tags with live Google, Facebook, and Twitter previews.
Schema Gen
Generate JSON-LD structured data for Articles, Products, FAQs, and more.
Table Gen
Generate HTML or Markdown tables with dynamic rows and columns. Fill in cells and export.
HTML to MD
Convert HTML to clean Markdown with support for headings, links, lists, tables, and code blocks.
Related Research Reports
The Complete Guide to CSS in 2026
The definitive CSS reference for 2026. Covers the box model, Flexbox, Grid, animations, custom properties, container queries, cascade layers, nesting, color functions, :has() selector, performance optimization, and CSS methodologies. 30,000+ words with interactive charts, comparison tables, embedded tools, and downloadable datasets.
The Complete Accessibility & WCAG Guide 2026: WCAG 2.2, ARIA, Screen Readers & Testing
The definitive web accessibility guide for 2026. Covers WCAG 2.2, ARIA roles, screen reader compatibility, keyboard navigation, focus management, color contrast, automated testing tools, and legal requirements. 28,000+ words.
The Complete Guide to SEO: Technical, Content & Link Building (2026)
The definitive SEO guide for 2026. Covers technical SEO, on-page optimization, content strategy, link building, local SEO, international SEO, Google algorithm updates, and AI impact. 27,000+ words with interactive charts, embedded tools, and downloadable data.