A field guide · MMXXIV edition
From <a> to <wbr>, a living specimen collection of the HTML living standard — each tag dissected with a live demo, a short note, and the JavaScript that animates it.
The invisible machinery that makes a page a page.
<head>metadataContainer for document metadata. Everything here is invisible in the body but shapes how the page is parsed, linked, and shared.
This page's <head> includes <meta charset>, <meta name="viewport">, <meta name="description">, <base href>, <title>, three <link> relations, a <style> block, and a deferred <script src>. View source to inspect.
<title>metadataThe document's title. Shown in the browser tab, used for bookmarks, and fed to search engines.
<meta>metadataKey/value pairs describing the document: charset, viewport, description, Open Graph, theme-color.
Look for <meta name="description">, <meta property="og:title">, and <meta name="theme-color"> in this document's head.
<link>metadataRelations to external resources: stylesheets, icons, preconnects, manifests.
Used here for style.css, Google Fonts (preconnect + stylesheet), an SVG favicon as a data URI, and a manifest.
<base>metadataSets the default URL and target for all relative links and forms on the page.
This page sets <base href="./">.
<style>metadataInline CSS. This page uses one for critical pre-paint variables and a no-flash theme fallback.
html[data-theme="light"]{
--bg:#f5f0e8; --fg:#1a1612;
--accent:#c2410c; --accent-2:#0d7d6a;
}The load-bearing walls of the document.
<header>sectioningIntroductory content or navigational aids for its nearest section.
<nav>sectioningA major navigation block. The sidebar <nav> lists all chapters.
<main>sectioningThe dominant content of the document. There can be only one.
<section>sectioningA thematic grouping with a heading. Each chapter on this page is a <section>.
<article>sectioningA self-contained composition — reusable in syndication. Each specimen card is an article.
<aside>sectioningTangentially related content. This sidebar is an <aside>.
<footer>sectioningClosing content: copyright, links, author info. See the bottom of this page.
<hgroup>headingGroups a heading with secondary content (subtitles, taglines).
<h1>–<h6>headingSix levels of section headings.
<address>sectioningContact information for the document or an article.
<search>sectioningA search filter region. New in the living standard. (See the top bar for a live example).
Block-level vessels for prose, code, and quoted matter.
<p>textA paragraph. The atomic unit of prose.
This is a paragraph. Inline elements live inside it.
<blockquote>textA block-level quotation.
The HTML standard is not a fixed document — it is a living one, revised in the open.
<hr>textA thematic break between paragraph-level elements.
Before
After
<pre>textPreformatted text — whitespace is preserved.
function hello() {
return "world";
}<figure> / <figcaption>textContent with an optional caption — diagrams, photos, code listings.
"The web is the most platform-independent platform ever invented."
<div>textA generic container with no semantic meaning. Use only when nothing else fits.
<div>, styled.The flavour of words.
You can link to places, abbreviate terms, bring importance, emphasis, and bold/italic for purely visual reasons. Code looks like <element>, while keyboard input uses Ctrl+S. Sample output appears as saved ✓, and variables as x = 42.
You can highlight text, mark something as struck through or deleted / inserted, drop to fine print, raise superscripts and lower subscripts. Quotations become inline like this
. A line break
forces a new line, while
The Iliad is attributed to Homer. A definition term is used to define new words. The current time is . Bidirectional text uses سلام and overrides like deliberately reversed. Ruby annotations place 漢字 above characters. π carries a machine value.
<span>inlineA generic inline phrasing container.
A coloured span mid-sentence.
<u>inlineUnarticulated annotation — typically rendered underlined.
<rp>inlineFallback parenthesis shown when ruby annotations are unsupported.
The thing that makes it a web.
<a>inlineAn anchor — to another document, a fragment, an email, a phone number, or a download.
Ordered, unordered, described, and menued.
<ul>list<ol>list<dl>listA description list — pairs of terms and descriptions.
<menu>listA list of commands — semantic sibling of <ul> for interactive items.
Pictures, sounds, and moving images.
<img>mediaAn image. Always include alt.
<picture> / <source>mediaMultiple sources for responsive/art-directed images.
<figure> + <map> + <area>mediaAn image map — clickable regions on a single image.
<audio>mediaAn audio player. Synthesised here with the Web Audio API — no file needed.
<video> / <track>mediaA video player with optional captions via <track>.
Foreign documents inside the document.
<iframe>embeddedNested browsing context.
<embed>embeddedA generic external content embed.
<object> / <param>embeddedFallback-friendly external resource with parameters.
<portal>embeddedExperimental — preview another page that can be seamlessly navigated into.
Not rendered here due to limited browser support; included for completeness.
Drawing inside the document.
<svg>vectorInline scalable vector graphics — shapes, paths, gradients, all in XML.
<canvas>scriptingA bitmap canvas drawn into via JavaScript. Click to add particles.
Click anywhere on the canvas.
<math>mathMathML — for mathematical notation.
Two-dimensional data, semantically.
<table> and friendstabularStructured tabular data: <caption>, <colgroup>/<col>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>.
| Engine | Browser | Year | Status |
|---|---|---|---|
| Gecko | Firefox | 2004 | Active |
| WebKit | Safari | 2003 | Active |
| Blink | Chrome | 2008 | Active |
| Total active engines | 3 | ||
Every input type, every control.
Native disclosure & modals.
<details> / <summary>interactiveA disclosure widget — no JavaScript required.
A continuously updated specification maintained by WHATWG, with no versioned releases — only a single, evolving document.
So browsers can ship features as they mature, rather than waiting years for a numbered release.
<dialog>interactiveA modal or non-modal dialog. Use the showModal() method.
Tracking additions and removals.
<ins> / <del>editsInserted and deleted text, optionally with timestamps.
The meeting is scheduled for Tuesday at 10 Wednesday at 2pm.
Where the document meets the program.
<script>scriptingEmbeds or references executable code. This page loads script.js via <script src defer>.
Open the console — you'll see a styled greeting from script.js.
<noscript>scriptingFallback content when scripting is disabled.
<template> / <slot>componentInert markup used to clone content later, or to declare slots in a shadow DOM.
Select an element, write CSS properties, see it live instantly.