Cheat Sheet

HTML5 Semantic Tags

A quick reference for semantic HTML elements — what they mean, when to use them, and how to keep your document outline clean, accessible, and search-engine friendly.

Document outline

Sectioning elements plus your heading levels form the document outline. A well-formed page nests <main> inside <body>, keeps a single <h1>, and groups related content with <section> and <article>.

<body>Every page

<header>Site header — logo, title, tagline

<nav>Primary navigation links

<main>Unique page content (exactly one per page)

<article>Self-contained piece — blog post, card, comment

<section>Intro / overview

<section>Details / body

<aside>Related links, sidebar, pull quote

<footer>Site footer — copyright, contact, legal

Document Structure

Elements that define the skeleton of a page. They tell assistive tech and search engines how the layout is organized.

header

Introductory content for the page or a section: logo, site title, tagline, or a group of navigational links.

<header>
  <h1>My Blog</h1>
  <nav>…</nav>
</header>

nav

A block of major navigation links. Use it for primary or secondary nav, not for every list of links on the page.

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

main

The dominant, unique content of the document. Exactly one per page, and it must not be nested inside another sectioning element.

<main>
  <article>…</article>
</main>

article

A self-contained composition that could stand alone and be redistributed — a blog post, news item, product card, or comment.

<article>
  <h2>Post title</h2>
  <p>The content…</p>
</article>

section

A thematic grouping of content, typically with its own heading. Use it when no more specific element applies.

<section>
  <h2>Features</h2>
  <ul>…</ul>
</section>

aside

Content that is tangentially related to the surrounding content — a sidebar, related links, or a pull quote.

<aside>
  <h3>Related</h3>
  <a href="/similar">See also</a>
</aside>

footer

Closing information for its nearest sectioning root: author, copyright, related links, or legal notices.

<footer>
  <p>© 2026 DevDesignKit</p>
</footer>

Content Semantics

Elements that give text meaning — quotations, code, dates, abbreviations, and emphasis — so content is machine-readable, not just styled.

h1 – h6

Six heading levels that build the document outline. Never skip levels, and use headings for structure, not for font sizing.

<h1>Page title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

p

A paragraph of prose. Block-level by default; use it for running text rather than line breaks.

<p>This is a paragraph of text.</p>

blockquote

A longer quotation from another source. Use the cite attribute to reference the source URL.

<blockquote cite="https://example.com">
  <p>Words worth quoting.</p>
</blockquote>

code

An inline fragment of computer code. Pair with pre for multi-line blocks.

<p>Call <code>Array.map()</code> to transform.</p>

pre

Preformatted text that preserves whitespace and line breaks — the go-to wrapper for code blocks and ASCII art.

<pre><code>const x = 42;</code></pre>

figure

Self-contained content (an image, diagram, chart, or code listing) that is referenced from the main flow and can be moved without breaking meaning.

<figure>
  <img src="chart.png" alt="Trend chart">
</figure>

figcaption

A caption for the content inside a figure. Must be a child of figure, first or last.

<figure>
  <img src="chart.png" alt="Trend">
  <figcaption>Fig. 1 — Growth</figcaption>
</figure>

time

A machine-readable date or time via the datetime attribute, so tools can parse it regardless of the human display format.

<time datetime="2026-09-10">Sep 10, 2026</time>

mark

Text highlighted for its relevance in the current context (e.g. a search match) — not a generic highlighter.

<p>…the <mark>query</mark> matched…</p>

abbr

An abbreviation or acronym. The title attribute provides the full expansion shown on hover.

<abbr title="HyperText Markup Language">HTML</abbr>

address

Contact information for the author or owner of the nearest article or body — not a generic postal address.

<address>
  <a href="mailto:hi@example.com">hi@example.com</a>
</address>

Interactive & Media

Elements for native disclosure, dialogs, and rich media embedding — no JavaScript plugins required.

details

A disclosure widget users can open and close to reveal additional information, without writing any JS.

<details>
  <summary>More info</summary>
  <p>Hidden until opened.</p>
</details>

summary

The visible heading or trigger for a details element. It must be the first child of details.

<details>
  <summary>How does it work?</summary>
  …
</details>

dialog

A modal or non-modal dialog box. Open it as a modal with showModal(); the open attribute makes it non-modal.

<dialog id="confirm">
  <p>Are you sure?</p>
</dialog>

video

Embeds a video with native controls. Add source children for multiple formats, plus a text fallback.

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
</video>

audio

Embeds an audio clip with native playback controls.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

canvas

A scriptable drawing surface for 2D graphics or WebGL. Content inside it is fallback for unsupported browsers.

<canvas width="400" height="300">
  Fallback text
</canvas>

picture

A responsive image container: browser picks the best matching source (art direction, format, or resolution) before falling back to img.

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>