|$ curl https://forge-ai.dev/api/markdown?path=docs/html/tags
$cat docs/complete-html-tag-reference.md
updated Today·60 min read·published
Complete HTML Tag Reference
Introduction
A complete HTML tag encyclopedia matters because the language is the contract between authors, browsers, assistive technology, search engines, and AI agents. Every tag encodes meaning: content models constrain nesting, attributes configure behavior, and accessibility mappings decide how screen readers announce the page. Guessing tags from muscle memory leaves gaps; a systematic reference closes them.
For humans, this page is a field guide: pick the right element for the job, avoid deprecated markup, and wire forms, media, and landmarks correctly. For AI agents crawling ForgeLearn via ?format=md or Accept: text/markdown, it is a structured inventory of every HTML5 element with purpose, model, key attributes, and a11y notes — so generated markup stays semantic rather than div-soup.
HTML5 is a living standard (WHATWG). This encyclopedia covers the current element set: document metadata, sectioning, text, embedded media, tabular data, forms, interactive widgets, web-component primitives, edit markers, and tags you must never ship. Pair it with the deeper topic pages linked throughout and the Master HTML path when you are ready to practice end-to-end.
ℹ
info
Prefer the most specific native element before reaching for ARIA roles on generic containers. Correct tags give you keyboard behavior, semantics, and SEO for free.
How to Read Each Entry
Category tables use five columns. Learn the vocabulary once, then scan any row quickly when you need a decision.
| Column | Meaning |
|---|---|
| Tag | Element name. Void elements are noted in Purpose when relevant. |
| Model | Primary content model or category (metadata, flow, phrasing, sectioning, heading, embedded, interactive, none/void). |
| Purpose | What the element represents and when it is the right choice. |
| Key attributes | The attributes you will use most often beyond globals. |
| Accessibility | Default role / a11y expectations and common pitfalls. |
📝
note
Content models are not CSS display values. A phrasing element can be styled as a block; validity is about nesting rules in the HTML parser and the outline of meaning — not how it looks.
Document Root & Metadata
Every page starts with a doctype and a root html element containing head (metadata) and body (visible content). Metadata elements configure charset, viewport, titles, stylesheets, scripts, and machine-readable description. Get this layer wrong and SEO, performance, and encoding fail before the first heading renders.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| html | Root | Document root; wraps head + body | lang, dir | Always set lang for screen readers & hyphenation |
| head | Metadata | Container for metadata children | — | Not exposed in a11y tree as content |
| body | Flow | Visible page content root | onload (prefer JS listeners) | Landmark document; avoid redundant roles |
| title | Metadata / text | Document title (tab, SERP, bookmarks) | — | First thing SRs announce; keep unique & clear |
| base | Metadata / void | Base URL for relative links | href, target | Rare; can surprise link resolution |
| meta | Metadata / void | Charset, viewport, description, OG, CSP | charset, name, content, property, http-equiv | Indirect a11y via viewport & language |
| link | Metadata / void | Stylesheets, icons, preconnect, preload | rel, href, as, media, crossorigin | Prefers-color-scheme sheets help users |
| style | Metadata | Embedded CSS | media, nonce, blocking | Do not hide focus outlines permanently |
| script | Metadata / phrasing | JS modules or classic scripts | src, type, defer, async, nomodule | Keep progressive enhancement; test without JS |
| noscript | Metadata / flow | Fallback when scripting is off | — | Provide usable alternative content |
document-shell.html
HTML
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | <title>ForgeLearn — HTML Tag Encyclopedia</title> |
| 7 | <meta name="description" content="Complete HTML5 tag reference." /> |
| 8 | <link rel="stylesheet" href="/styles.css" /> |
| 9 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 10 | <script type="module" src="/app.js" defer></script> |
| 11 | </head> |
| 12 | <body> |
| 13 | <!-- Page content --> |
| 14 | </body> |
| 15 | </html> |
✓
best practice
Put charset within the first 1024 bytes. Always include a viewport meta for mobile. Prefer type="module" with defer semantics over blocking classic scripts in head.
Document Sections & Headings
Sectioning and heading elements define the page outline: landmarks for assistive tech, topical boundaries for readers, and SEO signals for crawlers. One main, clear nav, and a logical heading hierarchy beat decorative wrappers every time.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| header | Flow / sectioning-ish | Introductory content for page or section | — | banner landmark when child of body |
| nav | Sectioning | Major navigation links | aria-label when multiple navs | navigation landmark; label duplicates |
| main | Flow | Dominant unique content of the page | — | Exactly one visible main; main landmark |
| article | Sectioning | Self-contained composition (post, card) | — | article role; nest carefully |
| section | Sectioning | Thematic grouping with a heading | — | region if labeled; else generic |
| aside | Sectioning | Tangentially related content (sidebar) | — | complementary landmark |
| footer | Flow | Footer for page or section | — | contentinfo when child of body |
| search | Flow | Site or page search landmark | — | search landmark (prefer over role="search") |
| address | Flow | Contact info for nearest article/body | — | Not for postal-only addresses without contact |
| h1–h6 | Heading | Section headings by rank | — | heading roles; do not skip ranks for style |
| hgroup | Heading | Groups heading + related h* subtitles | — | Only the highest-rank heading is exposed as heading |
Semantic page shell — the landmark pattern you should memorize:
semantic-shell.html
HTML
| 1 | <header> |
| 2 | <a href="/">ForgeLearn</a> |
| 3 | <nav aria-label="Primary"> |
| 4 | <a href="/docs">Docs</a> |
| 5 | <a href="/docs/html">HTML</a> |
| 6 | </nav> |
| 7 | <search> |
| 8 | <form role="search" action="/search"> |
| 9 | <label for="q">Search</label> |
| 10 | <input id="q" name="q" type="search" /> |
| 11 | </form> |
| 12 | </search> |
| 13 | </header> |
| 14 | <main> |
| 15 | <article> |
| 16 | <h1>Complete HTML Tag Reference</h1> |
| 17 | <section> |
| 18 | <h2>Document sections</h2> |
| 19 | <p>Landmarks and headings define the outline.</p> |
| 20 | </section> |
| 21 | </article> |
| 22 | <aside> |
| 23 | <h2>On this page</h2> |
| 24 | <nav aria-label="Page">…</nav> |
| 25 | </aside> |
| 26 | </main> |
| 27 | <footer> |
| 28 | <address>Contact: docs@forgelearn.dev</address> |
| 29 | </footer> |
⚠
warning
Do not wrap every div in section. A section should introduce a new thematic topic — usually with its own heading. Empty decorative sections pollute the outline.
Text Content
Flow-level text containers structure paragraphs, lists, quotes, figures, and generic grouping. Choose semantic list and quote elements before inventing CSS-only patterns — screen readers and copy/paste behavior depend on them.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| p | Flow | Paragraph of phrasing content | — | Default paragraph; avoid nested interactive blocks |
| hr | Flow / void | Thematic break between topics | — | separator role; not for pure decoration |
| pre | Flow | Preformatted text (whitespace preserved) | — | Pair with code for source samples |
| blockquote | Flow | Extended quotation from another source | cite | Not for indentation styling alone |
| ol | Flow | Ordered list | start, reversed, type | list / listitem mapping |
| ul | Flow | Unordered list | — | list / listitem mapping |
| menu | Flow | Toolbar / context menu of commands (semantic ul-like) | — | Often exposed like a list; prefer for action lists |
| li | — | List item inside ol/ul/menu | value (ol only) | listitem |
| dl | Flow | Description / association list | — | term/definition groups |
| dt | — | Term in a dl | — | term role |
| dd | — | Description / value for a dt | — | definition role |
| figure | Flow | Self-contained media/code with optional caption | — | figure role; caption associates |
| figcaption | — | Caption for figure | — | Names the figure |
| div | Flow | Generic flow container — no semantics | — | Last resort; add ARIA only when needed |
🔥
pro tip
Use dl for name/value metadata (specs, glossaries, product details), not just dictionary words. Multiple dt/dd pairs in one list are valid.
Inline Text Semantics
Phrasing elements annotate meaning inside paragraphs and headings: emphasis, idiomatic voice, code, dates, bidirectional text, and hyperlinks. Prefer semantic tags over presentational spans so meaning survives themes and assistive technology.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| a | Phrasing / interactive | Hyperlink (or placeholder without href) | href, target, rel, download | link role; never nest interactive content |
| em | Phrasing | Stress emphasis | — | Often italic; conveys emphasis to SRs |
| strong | Phrasing | Strong importance | — | Not for visual bold alone — use CSS/b when needed |
| small | Phrasing | Side comments / fine print | — | Semantic small print, not just font-size |
| s | Phrasing | Contents no longer accurate | — | Prefer del for document edits |
| cite | Phrasing | Title of a cited creative work | — | Not for people names |
| q | Phrasing | Inline quotation (browser adds quotes) | cite | Use blockquote for long quotes |
| dfn | Phrasing | Defining instance of a term | title | First definition in context |
| abbr | Phrasing | Abbreviation / acronym | title (expansion) | Provide expansion in text or title |
| ruby / rt / rp | Phrasing | Ruby annotations (e.g. furigana) | — | rp for fallback parentheses |
| data | Phrasing | Machine-readable value alongside human text | value | Human text remains primary |
| time | Phrasing | Date / time with machine value | datetime | Use unambiguous datetime values |
| code | Phrasing | Fragment of computer code | — | Nest code inside pre for multi-line samples |
| var | Phrasing | Variable in math or programming | — | Semantic italic often |
| samp | Phrasing | Sample program output | — | Pair with kbd for CLI tutorials |
| kbd | Phrasing | User keyboard / voice input | — | Nest for key chords |
| sub / sup | Phrasing | Subscript / superscript | — | Use for meaning (formulas), not layout |
| i | Phrasing | Idiomatic / alternate voice (taxonomic names, terms) | — | Not for emphasis — use em |
| b | Phrasing | Attention offset without extra importance | — | Not strong importance — use strong |
| u | Phrasing | Unarticulated annotation (misspelling, proper names in Chinese) | — | Avoid underline that looks like links |
| mark | Phrasing | Highlighted / marked for reference | — | mark role; search-result highlights |
| bdi / bdo | Phrasing | Bidirectional isolate / override | dir | Critical for mixed LTR/RTL user content |
| span | Phrasing | Generic phrasing hook — no semantics | — | Styling/hooks only |
| br | Phrasing / void | Line break in poetry/addresses | — | Not for spacing between blocks — use CSS |
| wbr | Phrasing / void | Optional word-break opportunity | — | Helps long URLs wrap without hyphenation |
📝
note
i/b/u are not deprecated — they have semantic jobs distinct from em/strong. Use them when italic/bold/underline convey classification or attention without changing importance.
Images & Media
Embedded content brings pixels, vectors-as-raster, audio, video, maps, and nested browsing contexts into the document. Always provide text alternatives, dimensions for layout stability, and captions or tracks when media carries speech.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| img | Embedded / void | Image resource | src, alt, srcset, sizes, width, height, loading, decoding | Meaningful alt; empty alt for decorative |
| picture | Embedded | Art direction / format negotiation | Contains source + img | alt lives on the inner img |
| source | Void | Media/picture candidate | srcset, sizes, media, type, src | Not independently focusable |
| map | Flow | Image map definition | name | Prefer HTML links when possible |
| area | Phrasing / void | Hotspot in an image map | shape, coords, href, alt | alt required when href present |
| audio | Embedded | Sound playback | src, controls, autoplay, loop, muted, preload | Provide controls; avoid autoplay with sound |
| video | Embedded | Video playback | src, poster, controls, width, height, playsinline | Captions via track; keyboard controls |
| track | Void | Timed text (captions, chapters, descriptions) | kind, src, srclang, label, default | kind="captions" for deaf/hard-of-hearing |
| embed | Embedded / void | External plugin/plugin-like content | src, type, width, height | Prefer iframe/object; sandbox carefully |
| object | Embedded | External resource with fallback children | data, type, name | Fallback content inside object |
| iframe | Embedded | Nested browsing context | src, title, sandbox, allow, loading, referrerpolicy | title required; tighten sandbox |
Responsive picture with format fallbacks — see also /docs/html/picture:
picture-art-direction.html
HTML
| 1 | <figure> |
| 2 | <picture> |
| 3 | <source |
| 4 | type="image/avif" |
| 5 | srcset="/hero-800.avif 800w, /hero-1200.avif 1200w" |
| 6 | sizes="(max-width: 700px) 100vw, 700px" |
| 7 | /> |
| 8 | <source |
| 9 | type="image/webp" |
| 10 | srcset="/hero-800.webp 800w, /hero-1200.webp 1200w" |
| 11 | sizes="(max-width: 700px) 100vw, 700px" |
| 12 | /> |
| 13 | <img |
| 14 | src="/hero-800.jpg" |
| 15 | width="700" |
| 16 | height="394" |
| 17 | alt="Terminal-style documentation homepage" |
| 18 | loading="lazy" |
| 19 | decoding="async" |
| 20 | /> |
| 21 | </picture> |
| 22 | <figcaption>Art direction + modern formats with JPEG fallback.</figcaption> |
| 23 | </figure> |
⚠
warning
Never omit alt on content images. Missing alt causes screen readers to announce the filename. Decorative images use alt="" (empty), not a missing attribute.
Canvas, SVG & Math
Some embedded content is script-driven or XML-namespaced. Use these when HTML text and CSS cannot express the graphic — then add accessible fallbacks.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| canvas | Embedded | Bitmap drawing surface (2D / WebGL) | width, height | Provide fallback text; expose via ARIA / hit regions |
| svg | Embedded | Inline scalable vector graphics | viewBox, role, aria-label / title | Label decorative vs informative SVGs |
Deep dives: /docs/html/canvas for the 2D API and animation, /docs/html/svg for shapes, paths, and accessible SVG patterns.
📝
note
MathML may appear via math in supporting browsers, or through libraries that render accessible math. Prefer MathML or well-labeled SVG/Canvas over screenshots of equations. HTML itself does not replace a dedicated math guide — treat formulas as content that needs text equivalents.
canvas-svg-brief.html
HTML
| 1 | <!-- Canvas: pixels under script control --> |
| 2 | <canvas id="chart" width="320" height="180" role="img" aria-label="Bar chart of weekly visits"> |
| 3 | Weekly visits: Mon 40, Tue 55, Wed 48. |
| 4 | </canvas> |
| 5 | |
| 6 | <!-- SVG: resolution-independent, stylable DOM --> |
| 7 | <svg viewBox="0 0 100 100" width="64" height="64" role="img" aria-labelledby="logo-title"> |
| 8 | <title id="logo-title">ForgeLearn mark</title> |
| 9 | <circle cx="50" cy="50" r="45" fill="none" stroke="#00FF41" stroke-width="4" /> |
| 10 | <path d="M30 65 L50 25 L70 65 Z" fill="#00FF41" /> |
| 11 | </svg> |
Tabular Data
Tables express relationships between rows and columns — not page layout. Use captions, headers with scope, and proper sectioning elements so assistive tech can navigate by cell.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| table | Flow | Tabular data container | — | table role; never for layout |
| caption | — | Table title (first child) | — | Names the table |
| colgroup | — | Group of columns for styling | span | Presentational grouping |
| col | Void | Column within colgroup | span | — |
| thead | — | Header row group | — | rowgroup |
| tbody | — | Body row group(s) | — | rowgroup |
| tfoot | — | Footer row group (totals) | — | rowgroup |
| tr | — | Table row | — | row |
| th | — | Header cell | scope, colspan, rowspan, headers, abbr | columnheader / rowheader |
| td | — | Data cell | colspan, rowspan, headers | cell; associate via headers if complex |
✓
best practice
Always include scope="col" or scope="row" on th cells. Complex tables may need headers/id associations — see /docs/html/tables.
Forms & Controls
Forms collect user input with native validation, labels, and submission semantics. Every control needs an accessible name — usually via label with matching for/id.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| form | Flow | Interactive submission container | action, method, enctype, novalidate, autocomplete | form role; group related fields |
| label | Phrasing / flow | Caption for a control | for | Clickable name; never skip labels |
| input | Phrasing / void / interactive | Typed control (see type table) | type, name, value, required, pattern, … | Role depends on type |
| button | Phrasing / interactive | Clickable button | type (submit|button|reset), disabled, name | Default type is submit inside forms |
| select | Phrasing / interactive | Option picker | name, multiple, size, required | combobox / listbox mapping |
| datalist | Phrasing | Autocomplete suggestions for inputs | id (matched by list=) | Suggestions only — still label the input |
| optgroup | — | Group of options in a select | label, disabled | label required for the group |
| option | — | Choice in select/datalist | value, selected, disabled, label | option role |
| textarea | Phrasing / interactive | Multi-line text entry | name, rows, cols, maxlength, required | textbox multiline |
| output | Phrasing | Result of a calculation | for, name, form | status/output; update live carefully |
| progress | Phrasing | Task completion gauge | value, max | progressbar role |
| meter | Phrasing | Scalar measurement within a known range | value, min, max, low, high, optimum | Not for progress bars — use progress |
| fieldset | Flow | Group related controls | disabled, name, form | group; legend provides name |
| legend | — | Caption for fieldset | — | First child of fieldset |
input types — pick the right type for mobile keyboards, validation, and semantics:
| type | Use for | Notes |
|---|---|---|
| text | Single-line free text | Default; use autocomplete |
| search | Search fields | Often styled with clear control |
| email / url / tel | Contact identifiers | Built-in format hints + mobile keyboards |
| password | Secrets | Obscured; autocomplete=current/new-password |
| number / range | Numeric entry / slider | min, max, step |
| date / time / datetime-local / month / week | Temporal values | Native pickers vary by browser |
| color | Color picker | Value as #rrggbb |
| file | File upload | accept, multiple, capture |
| checkbox / radio | Boolean / exclusive choice | Same name for radio groups |
| hidden | Non-visible submitted data | Not for secrets in HTML source |
| submit / reset / button / image | Form actions | Prefer button element for rich content |
accessible-form.html
HTML
| 1 | <form action="/subscribe" method="post" novalidate> |
| 2 | <fieldset> |
| 3 | <legend>Newsletter</legend> |
| 4 | <label for="email">Email</label> |
| 5 | <input id="email" name="email" type="email" required autocomplete="email" /> |
| 6 | |
| 7 | <label for="freq">Frequency</label> |
| 8 | <select id="freq" name="frequency" required> |
| 9 | <optgroup label="Common"> |
| 10 | <option value="weekly">Weekly</option> |
| 11 | <option value="monthly">Monthly</option> |
| 12 | </optgroup> |
| 13 | <option value="daily">Daily</option> |
| 14 | </select> |
| 15 | |
| 16 | <label for="topics">Topics</label> |
| 17 | <input id="topics" name="topics" list="topic-list" /> |
| 18 | <datalist id="topic-list"> |
| 19 | <option value="HTML"></option> |
| 20 | <option value="CSS"></option> |
| 21 | <option value="JavaScript"></option> |
| 22 | </datalist> |
| 23 | |
| 24 | <label> |
| 25 | <input type="checkbox" name="tos" required /> |
| 26 | I agree to the terms |
| 27 | </label> |
| 28 | </fieldset> |
| 29 | |
| 30 | <button type="submit">Subscribe</button> |
| 31 | <progress id="upload" max="100" value="0" hidden>0%</progress> |
| 32 | </form> |
Interactive Widgets
Native disclosure and dialog patterns reduce custom JavaScript and come with keyboard support. Prefer them before reinventing accordions and modals.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| details | Flow / interactive | Disclosure widget | open, name (exclusive accordion) | group; summary is the button |
| summary | — | Visible label / toggle for details | — | Must be first summary child |
| dialog | Flow | Modal or non-modal dialog | open; showModal() / close() | Focus trap in modal; Escape closes |
🔥
pro tip
The global popover attribute (and popovertarget on buttons) creates top-layer UI without a full modal dialog — light dismiss, focus management, and no custom stacking hacks. See /docs/html/dialog-popover.
details-dialog.html
HTML
| 1 | <details name="faq"> |
| 2 | <summary>What is a content model?</summary> |
| 3 | <p>A content model defines what child elements are valid inside a parent.</p> |
| 4 | </details> |
| 5 | <details name="faq"> |
| 6 | <summary>When do I use dialog vs popover?</summary> |
| 7 | <p>Use dialog for focused tasks that need a backdrop; popover for menus and non-modal tips.</p> |
| 8 | </details> |
| 9 | |
| 10 | <button type="button" id="open">Open dialog</button> |
| 11 | <dialog id="confirm"> |
| 12 | <form method="dialog"> |
| 13 | <p>Reset your progress?</p> |
| 14 | <button value="cancel">Cancel</button> |
| 15 | <button value="ok">Confirm</button> |
| 16 | </form> |
| 17 | </dialog> |
| 18 | |
| 19 | <script> |
| 20 | const d = document.getElementById("confirm"); |
| 21 | document.getElementById("open").onclick = () => d.showModal(); |
| 22 | </script> |
Web Components Primitives
Custom elements extend HTML with author-defined tags. The platform primitives are template, slot, and the Custom Elements registry — covered in depth at /docs/html/web-components, /docs/html/template-slot, and /docs/html/custom-elements.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| template | Metadata / inert | Inert DOM fragment for cloning | shadowrootmode (declarative shadow DOM) | Not rendered until cloned/activated |
| slot | Phrasing / flow | Projection point in shadow trees | name | Light DOM children keep their semantics |
Custom element naming rules: names must include a hyphen (e.g. forge-card), must not be empty after the hyphen, and are case-insensitive ASCII. Autonomous elements extend HTMLElement; customized built-ins use is="…" where supported. Always define accessible names and keyboard behavior inside your component — the hyphenated tag alone does not grant a role.
template-slot.html
HTML
| 1 | <template id="card-tpl"> |
| 2 | <style> |
| 3 | :host { display: block; border: 1px solid #222; padding: 12px; } |
| 4 | </style> |
| 5 | <h2><slot name="title">Untitled</slot></h2> |
| 6 | <div><slot></slot></div> |
| 7 | </template> |
| 8 | |
| 9 | <!-- Valid custom element name: lowercase + hyphen --> |
| 10 | <forge-card> |
| 11 | <span slot="title">Semantics first</span> |
| 12 | <p>Light DOM content projects through slots.</p> |
| 13 | </forge-card> |
Scripting & Document Edits
Scripting elements appear again here because they also live in the body; edit elements mark insertions and deletions for changelogs and reviews.
| Tag | Model | Purpose | Key attributes | Accessibility |
|---|---|---|---|---|
| script | Metadata / phrasing | Execute or load script; also JSON-LD | src, type, defer, async, integrity | Ensure critical UX works without JS |
| noscript | Metadata / flow | Fallback when scripts disabled | — | Must still be usable content |
| template | Metadata | Client-side fragment store | shadowrootmode | Inert until used |
| del | Phrasing / flow | Removed content in a document edit | cite, datetime | deletion; announce as removed when supported |
| ins | Phrasing / flow | Inserted content in a document edit | cite, datetime | insertion |
edits.html
HTML
| 1 | <p> |
| 2 | The living standard is maintained by |
| 3 | <del cite="/changelog/2024" datetime="2024-01-01">the W3C HTML WG</del> |
| 4 | <ins cite="/changelog/2024" datetime="2024-01-01">WHATWG</ins>. |
| 5 | </p> |
Obsolete — Do Not Use
These tags are obsolete or non-conforming. Browsers may still parse some for compatibility, but authors must not use them in new documents. Replace them with semantic HTML and CSS.
| Obsolete tag | Use instead |
|---|---|
| acronym | abbr |
| applet | embed / object / modern JS — never Java applets |
| basefont | CSS font-family / font-size on root |
| big | CSS font-size / relative sizing |
| blink | CSS animation (respect prefers-reduced-motion) |
| center | CSS text-align / flexbox / grid |
| font | CSS color, font-family, font-size |
| frame / frameset / noframes | iframe + CSS layout; never framesets |
| isindex | form + input type="search" |
| keygen | Web Crypto / platform auth — not keygen |
| listing / plaintext / xmp | pre + code |
| marquee | CSS animation / carousel patterns with pause controls |
| nobr | CSS white-space: nowrap |
| noembed | Fallback inside object / picture patterns |
| spacer | CSS margin / gap / padding |
| strike | s (inaccurate) or del (edits) |
| tt | code, kbd, samp, or CSS font-family: monospace |
✕
danger
Framesets break accessibility, bookmarking, and responsive design. If you encounter frameset in legacy apps, plan a migration to a single document with CSS grid and optional iframe embeds.
Global Attributes — Quick Reference
Global attributes apply to nearly every HTML element. Master these before memorizing niche per-element APIs.
| Attribute | Purpose |
|---|---|
| accesskey | Keyboard shortcut hint (use sparingly; conflicts common) |
| autocapitalize | Virtual keyboard capitalization behavior |
| autofocus | Focus on page load (one per document; careful with a11y) |
| class | Space-separated CSS / JS hooks |
| contenteditable | Make element editable by the user |
| data-* | Custom data attributes (dataset API) |
| dir | Text direction: ltr, rtl, auto |
| draggable | HTML Drag and Drop participation |
| enterkeyhint | Virtual keyboard Enter key label |
| hidden | Hide from presentation (until removed / until-found) |
| id | Unique document identifier (labels, fragments) |
| inert | Make subtree non-interactive and a11y-inert |
| inputmode | Virtual keyboard type hint |
| is | Customized built-in element name |
| item* | Microdata: itemscope, itemtype, itemprop, itemid, itemref |
| lang | Language of the element's contents |
| nonce | CSP nonce for inline script/style |
| part / exportparts | Shadow DOM styling hooks |
| popover | Declare a popover element (auto | manual) |
| slot | Assign light DOM to a named slot |
| spellcheck | Hint for spell checking |
| style | Inline CSS (prefer classes for reuse) |
| tabindex | 0 = in tab order; -1 = programmatically focusable |
| title | Advisory tooltip text (not a label substitute) |
| translate | Whether translators should translate content |
| writingsuggestions | Browser writing-suggestions hint |
| aria-* | ARIA attributes for roles/states when native HTML is insufficient |
| role | ARIA role override — use only when no native element fits |
ℹ
info
Prefer native semantics over role + tabindex recreations. A real button already handles Enter/Space, focus, and form participation.
Content Models Cheatsheet
When the parser or validator complains about nesting, match the child's category to the parent's allowed content model.
| Model | What it means | Typical members |
|---|---|---|
| Metadata | Document-level info & resources | base, link, meta, noscript, script, style, template, title |
| Flow | Most body content | p, div, section, lists, tables, forms, … |
| Sectioning | Creates outline sections | article, aside, nav, section |
| Heading | Section titles | h1–h6, hgroup |
| Phrasing | Inline text-level markup | a, em, span, img, input, … |
| Embedded | Imports external resources | audio, video, img, iframe, canvas, svg, object, embed |
| Interactive | User-activatable controls | a[href], button, details, embed, iframe, label, select, textarea |
| Palpable | Visible / non-empty content expected | Most flow/phrasing with real content |
⚠
warning
Phrasing parents (like p, h1, span) cannot contain flow-only children such as div or ul. The parser will close the parent early — a common source of mysterious DOM trees.
Mastery Checklist
You have mastered HTML tags when you can do all of the following without looking them up every time:
◆Build a full page with header/nav/main/aside/footer landmarks and a single h1
◆Choose phrasing tags for meaning (em vs i, strong vs b, code vs pre) instead of CSS-only spans
◆Wire every form control to a label; group radios/checkboxes with fieldset/legend
◆Ship images with alt, width/height, and picture/srcset when responsive or multi-format
◆Add captions/subtitles via track on video; never autoplay with sound
◆Mark tabular data with th scope and caption — never use tables for layout
◆Use details/dialog/popover before custom accordion/modal libraries
◆Name custom elements with a hyphen and keep light-DOM semantics through slots
◆Reject obsolete tags (font, center, marquee, frameset, …) in code review
◆Explain content models well enough to fix invalid nesting from the parser’s point of view
✓
best practice
Treat the validator (W3C / browser DevTools) and an accessibility tree inspector as part of your edit loop. Valid, semantic HTML is the cheapest performance and a11y win available.
$Blueprint — Engineering Documentation·Section ID: HTML-TAGS·Revision: 1.0
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.