Design - HTML Standard

HTML Standard — Semantic Tags Cheatsheet

Semantic HTML uses elements that describe meaning, not just appearance. This improves navigation, accessibility, and maintainability.

Use this page as a quick reference for links, buttons, landmarks, headings, lists, and form elements.

Code editor showing structured HTML markup

Key takeaways

  • Choose elements by meaning and behavior, not by default visual style.
  • Use <a> for navigation and <button> for in-page actions.
  • Keep a single <h1> and a logical heading sequence for scanability.
  • Use landmarks such as <main> and <nav> to define page regions.
  • Use proper list and description-list tags for grouped content.
  • Connect form controls with labels and group related controls with <fieldset> and <legend>.

Core concepts

3.1 Semantics (what it is, why it matters)

Semantic HTML communicates intent. When tags match content role, screen readers, browsers, and search engines interpret structure more accurately.

3.2 Links vs Buttons (navigation vs action)

<a href="..."> moves users to a URL, section, or file. <button type="button"> triggers actions such as opening a menu, saving a form, or toggling a panel.

3.3 Headings and document outline (h1-h6 used correctly)

Headings create an outline users scan visually and through assistive shortcuts. Use one clear <h1>, then descend by subsection depth without skipping intermediate levels.

3.4 Lists and grouping (ul/ol/li, dl/dt/dd)

Use <ul> for unordered groups and <ol> when order matters. Use <dl> for term-definition or label-value pairs.

3.5 Landmarks (header/nav/main/footer/section/article/aside)

Landmarks define major document regions. Screen reader users can jump between them quickly. Use landmarks for meaningful sections, not styling wrappers.

3.6 Forms basics (form/label/input/button, fieldset/legend)

Each form control should have an associated <label>. Group related controls with <fieldset> and name the group using <legend>. Use semantic input types for better keyboards and autofill.

Cheatsheet tables

Table A: Page structure and landmarks
Tag Use it for Avoid it for Notes
<header> Intro content for page or section. Any top container that has no heading context. Can appear at page level and inside sections.
<nav> Major navigation links. Single unrelated links in body text. Use clear labels so landmarks are meaningful.
<main> Primary content unique to the page. Repeated sidebars, banners, or footers. Use one main region per document.
<section> Thematic grouping with a heading. Generic wrappers used only for styling. Prefer <div> when no section meaning exists.
<article> Standalone content unit (post, card, comment). Layout columns that are not independent content. Should still make sense if reused elsewhere.
<aside> Supplementary content related to nearby content. Primary task flow content. Common for side notes, related links, ads.
<footer> Closing metadata or links for page/section. Random content blocks mid-flow. Can be used at page and section level.
Table B: Text, headings, and inline semantics
Tag Use it for Avoid it for Notes
<h1> to <h6> Hierarchical section titles. Styling text to look bold or large only. Keep level order aligned to content depth.
<p> Paragraphs of prose text. Wrapping block elements or lists. Use separate paragraphs for distinct ideas.
<strong> Text with strong importance. Pure visual bolding with no emphasis meaning. Assistive tech often conveys stronger emphasis.
<em> Stress emphasis within a sentence. General italic styling in design-only cases. Meaning changes with sentence context.
<code> Inline code, commands, or tag names. Long code snippets that need block formatting. Use <pre><code> for blocks.
<blockquote> Quoted external passages. Indented text that is not a quotation. Include citation context when available.
Table C: Lists, media, and grouping
Tag Use it for Avoid it for Notes
<ul>, <ol>, <li> Collections of related items. Menu or card groups built with plain divs only. Choose ordered lists for sequences and steps.
<dl>, <dt>, <dd> Term-definition or label-value pairs. Simple bullet lists with no paired relationship. Useful in specs, glossary, and profile data.
<figure>, <figcaption> Media with a visible caption. Decorative images with no related caption. Captions help context and accessibility.
<img> Meaningful images with accurate alt. Missing alt text or redundant filename alt. Use empty alt="" for decorative images.
<div> Generic grouping when no semantic tag fits. Replacing landmarks, lists, or headings by default. Use sparingly after semantic options are checked.
Table D: Forms and inputs (high-level)
Tag Use it for Avoid it for Notes
<form> Grouping controls for submission workflow. Wrapping unrelated controls across separate tasks. Define clear submit behavior and destination.
<label> Programmatic name for each control. Placeholder-only naming. Use for and matching input id.
<input> Single-line data entry by type. Custom text entry widgets without reason. Choose type like email, tel, or number appropriately.
<textarea> Multi-line text input. One-word fields or fixed option selection. Keep label and hint text close.
<button> Trigger actions (submit, open, toggle, save). Navigation to other pages. Set explicit type to avoid defaults.
<fieldset>, <legend> Grouping related controls with a shared label. Using plain div wrappers for control groups. Important for radio/checkbox groups.
<select>, <option> Choosing one item from predefined options. Autocomplete search cases with very long lists. Provide a clear label and default state.

Good vs Bad examples

Both scenarios focus on semantic choice and observable interaction outcomes.

BAD EXAMPLES

Example 1: Navbar dropdown trigger uses span

A styled <span> opens a dropdown with click-only JavaScript. Keyboard users cannot activate it consistently, and assistive tools do not announce it as a control.

Navbar dropdown built with a non-semantic span trigger

Example 2: Entire card wrapped in button for navigation

A card that should open a detail page is implemented as a button and uses mixed heading levels. Users expect navigation but get action semantics.

GOOD EXAMPLES

Example 1: Navbar dropdown trigger uses button

The dropdown trigger is a <button type="button"> with visible focus styles and proper expanded state updates. Keyboard activation works with Enter and Space.

Navbar dropdown built with a semantic button trigger

Example 2: Card uses article with heading and link

The card is an <article> with a clear heading and a primary <a href> to the detail page. The click target is predictable and heading order remains valid.

Mini exercise

Task: Rewrite a small page section to use semantic landmarks and correct link/button usage.

  1. Choose a section that currently uses generic wrappers and replace them with <header>, <nav>, <main>, <section>, or <article> where appropriate.
  2. Change interactive elements so navigation uses <a href> and in-page actions use <button> with explicit type.
  3. Verify keyboard focus order, heading sequence, and label connections for any form controls in that section.

Checklist

  • One <h1> per page.
  • Headings are in order with no skipped levels.
  • Navigation groups are inside <nav>.
  • Main page content is inside <main>.
  • Links include href and perform navigation.
  • Buttons trigger actions and have explicit types.
  • Interactive elements are reachable and usable by keyboard.
  • Images have useful alt text, or empty alt="" when decorative.
  • Tables use <caption>, <thead>, and correct <th scope> values.