Use for any action that does not navigate to another location — submitting forms, opening dialogs, toggling state. Keyboard accessible by default. Never replace with a styled <div> or <span>.

The default form submission trigger inside a <form>. Functionally identical to <button type="submit"> but the label is the value attribute, not inner content.

Use whenever the result of an interaction is navigating to a URL, a page anchor, or an external resource. The rule: if it takes you somewhere, use <a>. If it does something, use <button>.

Allow independent on/off selection for each option. Each checkbox is a separate binary choice. Always pair with a <label> and group related checkboxes inside a <fieldset>.

Enforce a single selection from a mutually exclusive set. All radios sharing the same name attribute form a group — selecting one deselects the others. Always group with <fieldset>.

Best when relative position matters more than a precise number — volume, brightness, budget sliders. Pair with a visible readout so the current value is always clear.

The primary heading of the page. One per page only. Describes the main topic and forms the root of the document outline. Screen readers and search engines give it the highest weight.

The primary section heading. Use to divide the main page content into named regions. Multiple <h2>s on a page is correct and expected.

A sub-section heading inside an <h2> section. Use to break a long section into scannable named subsections.

Rarely needed outside of deeply structured documents. If you reach h4 regularly, consider whether your content hierarchy is too deep.

Typically only found in deeply nested document structures like technical specs or legal documents. Prefer flatter structures in most UIs.

The smallest semantic heading. In practice, reaching h6 usually indicates the content should be restructured or split. Can work well styled as an uppercase label.

The default block container for prose. Every standalone sentence or paragraph of body copy belongs in a <p>. Never simulate paragraphs with <br> pairs or naked <div>s.

A section of content quoted from another source. Should contain the quoted text (often in a <p>) and ideally a <cite> for attribution. Not valid for general callouts with no source.

An inline container with no semantic meaning. Use it when you need to target a substring for styling or scripting and no other semantic element applies. Avoid overusing it — prefer meaningful tags.

Marks content as having strong importance, urgency, or seriousness — content the user must not miss. Renders bold by default. Choose based on meaning, not appearance; use CSS font-weight if you just want visual bold.

Stress emphasis that changes the meaning of the sentence — the word you would stress if speaking aloud. Renders italic. If you want italic for stylistic reasons only, use CSS font-style.

Highlights text relevant to the user's current context — a search term match, an annotation, or a passage of active interest. Not for general emphasis; that's <strong> or <em>.

Encodes a date, time, or duration in machine-readable form via the datetime attribute. The visible content can be any human-friendly format. Allows browsers, search engines, and assistive tech to interpret temporal data precisely.

Inline computer code, file paths, command-line input, or technical identifiers. Always use for any monospace technical content within prose. For multi-line code blocks, wrap in <pre><code>.

Marks the title of a cited creative or intellectual work — a book, article, film, website. Not used for the author's name. Renders italic by default.

Typographic subscript — positioned below the baseline at a smaller size. Use for chemical formulas (H₂O), mathematical notation, and footnote markers.

Typographic superscript — positioned above the baseline at a smaller size. Use for exponents (x²), footnote references, and ordinals (1ˢᵗ, 2ⁿᵈ).

A semantic thematic break — signals a shift in topic or scene within a section, not a decorative line. If the divider carries no structural meaning, use a CSS border. <hr> communicates to assistive tech that topics change.

A single line break within a block of text. Use only where the break is part of the content itself — addresses, verse, code samples. Never use <br> pairs to create spacing between elements; that's what margin is for.

The baseline single-line text input. Always prefer a more specific type (email, tel, number) when the format is known — specific types give native keyboard optimisation and built-in validation.

Validates the presence of an @ sign on submit and triggers the email keyboard on mobile. Use whenever collecting an email address.

Masks characters as the user types. Browsers may offer a built-in password manager prompt automatically. Support autocomplete="current-password" or autocomplete="new-password" to help password managers.

A numeric input with increment/decrement stepper controls. Best for short integers like quantities or ages. For credit card numbers, postal codes, or phone numbers, use type="text" with inputmode="numeric" to preserve formatting.

Does not validate phone format (formats vary globally), but activates the telephone keypad on mobile. Use autocomplete="tel" for autofill support. Display a pattern hint via placeholder.

Renders the browser's native date picker. The datetime value is standardised to YYYY-MM-DD regardless of locale. Browser implementations vary significantly in appearance — consider a custom component for cross-platform consistency.

Use whenever a user might need more than one sentence — messages, descriptions, feedback. Resizable by default; control with CSS resize property. Set rows to hint at expected length.

A native dropdown of predefined choices. Best for 5–15 options. Fewer choices suit radio buttons; larger sets benefit from a searchable combobox pattern. Avoid when options are unknown until runtime.

A single selectable item inside a <select> or <datalist>. The value attribute is what gets submitted with the form; the inner text is what the user sees. Can be grouped with <optgroup>.

Associates visible text with a form control via for/id pairing, or by wrapping the control directly. Clicking the label activates the input. Never omit — it is a hard accessibility requirement.

Represents task completion. A value attribute between 0 and max renders a filled bar. Omitting value creates an indeterminate state — an animated loading indicator. Use for uploads, multi-step flows, or loading.

A scalar measurement within a known range — disk usage, battery level, a score. Unlike <progress>, it represents a current state, not a task. The low, high, and optimum attributes drive colour changes in supporting browsers.

Groups related form controls under a shared context. Required when grouping radio buttons or checkboxes — screen readers announce the legend before each control inside the group, providing essential context.

The visible caption for a <fieldset>. Must be its first child. Screen readers announce the legend before each individual control inside the group, making it a critical accessibility anchor.

Embeds a raster image. The alt attribute is required — describe the image content for screen readers, or use alt="" for purely decorative images. Use width and height to prevent layout shift during load.

Inline scalable vector graphics. Resolution-independent and CSS-styleable. Add aria-label or an inner <title> for accessibility. Preferred over <img> for icons, logos, and illustrations that need theming or animation.

Embeds a video player. Use multiple <source> children for format fallbacks (mp4, webm). Add controls for native UI. Include a <track kind="captions"> for accessibility. Set muted autoplay loop for ambient/background video.

Embeds an audio player. The controls attribute reveals the browser's native playback UI. Use <source> for multiple format fallbacks. Without controls and autoplay it is completely invisible.

A pixel-based scriptable drawing surface. Draws nothing without JavaScript. Use for dynamic charts, game rendering, image manipulation, and real-time data visualisation. Not accessible by default — add a text fallback inside the opening/closing tags.

Embeds a completely separate HTML document in a frame. Used for maps, payment forms, and third-party widgets. Always set a restrictive sandbox attribute to reduce XSS risk. Consider content security policy headers alongside.

A self-contained content block — an image, chart, code snippet, or table — referenced from the surrounding text. Semantically separates the asset from the flow without breaking meaning. Can be moved in the doc without breaking context.

The visible caption for a <figure>. Must be either the first or last child. Supplements, does not duplicate, the alt text of any image inside — alt is for screen readers, figcaption is for all users.

Must be a direct child of <ul> (unordered), <ol> (ordered), or <menu>. The parent element determines the visual marker and semantic meaning — bullets vs. numbers vs. interactive commands.

A standard data cell in a table row. Can span multiple columns or rows via colspan and rowspan. Pair with <th> headers so screen readers can announce the column and row context for each cell.

A header cell for a column or row. The scope attribute (col, row, colgroup, rowgroup) tells assistive technology which data cells this header labels. Required for accessible data tables — screen readers announce the header before each cell.