The HTML cheat sheet
All 112 living elements, one line each. Print it — this page carries its own print stylesheet.
Document structure
<html>- The root element of every HTML document; all other elements descend from it.
<head>- The container for machine-readable metadata: title, charset, viewport, links, and structured data.
<title>- The document's name, shown in the browser tab, bookmarks, and search results.
<base>- Sets the base URL for every relative URL in the document.
<link>- Connects the document to external resources: canonical URLs, stylesheets, icons, feeds, hreflang alternates, and resource hints.
<meta>- Metadata that no other element expresses: charset, viewport, description, Open Graph, robots directives.
<style>- Embeds CSS directly in the document head.
<body>- The sectioning root holding all renderable content.
Sectioning & landmarks
<main>- The document's unique dominant content region — the main landmark screen readers jump to.
<header>- Introductory content for the page or for any article/section — headings, bylines, intro nav.
<footer>- Closing content for the page or any article/section: authorship, related links, legal fine print.
<nav>- A major navigation block: primary menu, table of contents, breadcrumbs, pagination.
<article>- A self-contained composition that would make sense on its own: a post, product card, comment, widget.
<section>- A thematic grouping of content with a heading — a chapter of the current page.
<aside>- Content tangentially related to what surrounds it: pull quotes, related links, sidebars, callouts.
<address>- Contact information for the nearest article or for the document as a whole.
<search>- A landmark wrapping search or filtering functionality — the semantic replacement for role='search'.
<h1–h6>- Six levels of section headings that form the document outline screen readers and crawlers navigate by.
<hgroup>- Groups a heading with its subtitle, tagline, or eyebrow paragraphs as one unit.
Grouping content
<p>- A paragraph — the workhorse block of prose.
<hr>- A thematic break — a shift of scene or topic within a section.
<pre>- Preformatted text where whitespace and line breaks are content.
<blockquote>- An extended quotation from another source.
<ol>- An ordered list, where sequence carries meaning.
<ul>- An unordered list — a set whose sequence carries no meaning.
<menu>- A list of commands — semantically a ul whose items are interactive controls.
<li>- A single item of a ul, ol, or menu.
<dl>- A description list of name–value groups: glossaries, metadata, spec sheets, FAQs.
<dt>- The term (name) half of a description-list pair.
<dd>- The description (value) half of a description-list pair.
<figure>- Self-contained content referenced from the main flow: images, code listings, tables, quotes, diagrams.
<figcaption>- The caption of a figure.
<div>- The generic container with no meaning of its own — the deliberate last resort.
Inline text semantics
<a>- A hyperlink — the element the web is named after.
<em>- Stress emphasis that changes the meaning of the sentence.
<strong>- Strong importance, seriousness, or urgency.
<small>- Side comments and small print: copyright lines, disclaimers, legal caveats.
<s>- Content that is no longer accurate or relevant, struck through but kept visible.
<cite>- The title of a creative work: book, article, film, specification, song.
<q>- A short inline quotation with browser-supplied, locale-correct quotation marks.
<dfn>- The defining instance of a term — the one place where the term is explained.
<abbr>- An abbreviation or acronym, optionally with its expansion in title.
<ruby>- Annotates base text with small readings above it — furigana, pinyin, pronunciation guides.
<rt>- The ruby text — the small annotation rendered above (or beside) the base characters.
<rp>- Fallback parentheses shown only by browsers that can't render ruby layout.
<data>- Pairs human-readable content with a machine-readable value.
<time>- A date, time, or duration with a machine-readable datetime attribute.
<code>- A fragment of computer code: an element name, a function, a filename, a command.
<var>- A variable or placeholder the reader is expected to substitute.
<samp>- Sample output from a program or system.
<kbd>- User input — keystrokes, voice commands, menu selections.
<sub>- Subscript text with typographic meaning.
<sup>- Superscript text with typographic meaning.
<i>- Text in an alternate voice or mood: taxonomy, ship names, foreign phrases, technical terms.
<b>- Text drawn to the reader's attention without extra importance: keywords, product names, article leads.
<u>- A non-textual annotation — the rare legitimate underline: misspelling marks, Chinese proper-name marks.
<mark>- Text highlighted for contextual relevance — a search hit, a referenced passage.
<bdi>- Bidirectional isolation: renders text of unknown direction without disturbing its surroundings.
<bdo>- Bidirectional override: forces a run of text to render in an explicit direction.
<span>- The generic inline container with no meaning — the inline counterpart of div.
<br>- A line break that is part of the content itself.
<wbr>- A word-break opportunity inside an otherwise unbreakable token.
Edits
<ins>- Content added to the document after publication, kept visible as a tracked change.
<del>- Content removed from the document after publication, kept visible as a tracked change.
Media & embedded content
<img>- An image, with alternative text as a first-class requirement.
<picture>- Wraps source elements and an img for art direction and format negotiation.
<source>- A media resource candidate inside picture, audio, or video.
<audio>- An embedded sound player.
<video>- An embedded video player.
<track>- Timed text for media: captions, subtitles, descriptions, chapters.
<map>- Defines a client-side image map of clickable regions.
<area>- One clickable region inside an image map.
<iframe>- A nested browsing context — another document embedded in this one.
<embed>- A legacy integration point for external content and plugins.
<object>- An external resource treated as an image, nested context, or plugin resource — with real fallback content.
<svg>- Inline scalable vector graphics — resolution-independent drawings in the DOM.
<math>- MathML Core — native mathematical notation in the browser.
<canvas>- A scriptable bitmap surface for dynamic graphics, games, and visualizations.
<fencedframe>- An iframe variant with the communication channel cut — the embedder can load content but never learn what was shown.
Tables
<table>- Genuinely two-dimensional data — rows and columns that mean something together.
<caption>- The table's title, announced by screen readers before the data.
<colgroup>- Groups columns for shared attributes and lets rendering start before all rows parse.
<col>- One column (or span of columns) inside a colgroup.
<thead>- The block of rows holding the column headers.
<tbody>- The block of rows holding the table's data.
<tfoot>- The block of rows summarizing the table: totals, averages.
<tr>- One row of cells.
<th>- A header cell that other cells reference for meaning.
<td>- A data cell.
Forms
<form>- An interactive form that submits user input to a URL.
<label>- The caption of a form control, programmatically bound to it.
<input>- The shape-shifting form control: 22 types from text to color to file.
<button>- A button — focusable, keyboard-activatable, screen-reader-announced, for free.
<select>- A dropdown of options, natively keyboard- and screen-reader-friendly.
<selectedcontent>- Mirrors the chosen option's content into a customizable select's closed button.
<datalist>- Native autocomplete suggestions for an input — suggestions, not restrictions.
<optgroup>- Groups related options under a label inside a select.
<option>- One choice inside a select or datalist.
<textarea>- Multi-line free-text input.
<output>- The result of a calculation or user action, with built-in live-region behavior.
<fieldset>- Groups related controls, with legend as the group's caption.
<legend>- The caption of a fieldset, announced with every control inside the group.
<progress>- Task completion: how much of a known process is done.
<meter>- A scalar measurement within a known range: stock, disk usage, password strength, a score.
Interactive
<details>- A disclosure widget — expandable content with zero JavaScript.
<summary>- The always-visible, clickable caption of a details element.
<dialog>- A dialog box with focus management, top-layer rendering, and Esc-to-close built in.
<geolocation>- A browser-rendered control for sharing the user's location — the browser owns the permission UI.
Scripting
<script>- Executable code or embedded data blocks.
<noscript>- Fallback content rendered only when scripting is unavailable.
<template>- Inert HTML held for cloning by script — parsed but not rendered, fetched, or executed.
<slot>- A placeholder inside shadow DOM that light-DOM children fill.