HTML

HTML#

HTML (HyperText Markup Language) is the document format of the web. The current revision (“HTML5”) is a living standard maintained by WHATWG; the version number is mostly ceremonial in 2026.

Document Skeleton#

The minimum well-formed document. <!doctype html>, <meta charset>, <meta viewport>, and <html lang> are non-negotiable; skipping any of them produces real quirks in browser, accessibility, and search-engine behavior.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Element Flow#

Elements are tags with optional content; some are void (no closing tag). The categories below are a high-level taxonomy by default flow; CSS display overrides any of them.

Block-level: <div>, <p>, <section>, <article>, start a new line, flow vertically.
Inline: <span>, <a>, <strong>, <em>, flow within text.
Replaced: <img>, <video>, <iframe>, the browser fills in the content.
Void: <br>, <hr>, <input>, <meta>, <link>, <img>.

The sections below break elements down by their spec category.

Document Metadata#

Tags that live inside <head>. They tell the browser, search engines, and operating systems how to render, identify, and link the document.

Element	Purpose
`<head>`	Container for metadata. Not rendered.
`<title>`	Browser-tab title and the default search-result heading.
`<base>`	Default `href` and `target` for relative URLs in the document. One per page.
`<link>`	Resource relationships: stylesheets, icons, manifests, prefetch hints, alternate languages.
`<meta>`	Free-form key-value metadata: charset, viewport, description, OpenGraph, theme color, robots directives.
`<style>`	Inline CSS. Useful for above-the-fold critical CSS; not for application styles.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Operator handbook">
  <meta name="theme-color" content="#0b3d91">
  <title>CYBINT Operator Handbook</title>
  <base href="/handbook/">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="/styles.css">
  <link rel="manifest" href="/site.webmanifest">
</head>

Sectioning#

Landmark elements that carve a page into navigable regions. Screen readers announce them by name; search engines weight them; default styles know how to render them.

Element	Purpose
`<body>`	The document’s sectioning root.
`<header>`	Introductory content for the page or a section: site title, primary nav.
`<nav>`	Major navigation block. Not every link list; reserve for primary navigation.
`<main>`	The document’s primary content. One per page.
`<aside>`	Tangentially related content: sidebars, pull quotes, call-outs.
`<footer>`	Footer for the page or a section: copyright, links, author.
`<section>`	A generic thematic grouping with a heading.
`<article>`	A self-contained composition: blog post, news article, comment.
`<search>`	A region containing a search interface. New in HTML Living Standard.
`<h1>` to `<h6>`	Section headings. Use levels in order; do not skip.
`<hgroup>`	A heading plus subtitles. Limited use.
`<address>`	Contact information for the nearest `<article>` or document.

<body>
  <header><h1>Site Title</h1><nav>...</nav></header>
  <main>
    <article>
      <h2>Post title</h2>
      <p>...</p>
      <footer>Posted by ...</footer>
    </article>
    <aside>Related posts...</aside>
  </main>
  <footer><address>contact@example.com</address></footer>
</body>

Text Content#

Block-level elements for organizing prose, lists, and quoted material.

Element	Purpose
`<p>`	A paragraph.
`<div>`	Generic block container with no semantics. Use only when no other element fits.
`<pre>`	Preformatted text; whitespace is preserved. Wrap `<code>` inside for code samples.
`<blockquote>`	A long quotation. `cite` attribute references the source URL.
`<hr>`	Thematic break. Renders as a horizontal rule.
`<ul>`	Unordered list.
`<ol>`	Ordered list. `start`, `reversed`, `type` modify numbering.
`<li>`	List item, inside `<ul>`, `<ol>`, or `<menu>`.
`<menu>`	Toolbar-style action list. Treated like `<ul>` by most renderers.
`<dl>`	Description list.
`<dt>`	Term in a description list.
`<dd>`	Definition or description for a `<dt>`.
`<figure>`	Self-contained content (image, code, diagram) with a caption.
`<figcaption>`	Caption inside a `<figure>`.

<figure>
  <img src="/diagram.svg" alt="Cluster topology">
  <figcaption>Production cluster, west region.</figcaption>
</figure>

<dl>
  <dt>Operator</dt>
  <dd>The person on the keyboard at the moment of the action.</dd>
  <dt>Target</dt>
  <dd>The system the operator is authorized to act against.</dd>
</dl>

Inline Text Semantics#

Inline elements that mark up phrases inside flowing text. Most have a default style, but their real value is semantic, accessible technology and search engines treat them as more than typography.

Element	Purpose
`<a>`	Hyperlink. `href`, `target`, `rel` (always `noopener` on `target="_blank"`).
`<span>`	Generic inline container with no semantics.
`<strong>`	Strong importance. Bold by default.
`<em>`	Emphasis. Italic by default.
`<b>`	Stylistic offset without elevated importance.
`<i>`	Stylistic offset without elevated emphasis (alternate voice, technical term).
`<u>`	Non-textual annotation (proper name in Chinese, misspelling).
`<s>`	No longer accurate or relevant. Strike-through.
`<mark>`	Highlighted for reference in the current context.
`<small>`	Side comments, fine print.
`<code>`	Inline code fragment.
`<kbd>`	Keyboard input.
`<samp>`	Sample output from a program.
`<var>`	Variable in a mathematical expression or programming context.
`<abbr>`	Abbreviation. `title` carries the expansion.
`<cite>`	Title of a cited work.
`<q>`	Short inline quotation.
`<dfn>`	The defining instance of a term.
`<time>`	A date or time. `datetime` carries machine-readable form.
`<data>`	A machine-readable value tied to text content.
`<sub>`	Subscript.
`<sup>`	Superscript.
`<br>`	Line break.
`<wbr>`	Optional word-break opportunity.
`<bdi>`	Bidirectional text isolation.
`<bdo>`	Bidirectional text override.
`<ruby>`	East Asian typography ruby annotation container.
`<rt>`	Ruby text inside a `<ruby>` element.
`<rp>`	Ruby parenthesis fallback for browsers that lack ruby support.

<p>Published <time datetime="2026-05-12">12 May 2026</time>.
Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to abort.
The <abbr title="CYBINT Operator Handbook">COH</abbr> covers
the standard tradecraft. See <cite>The C Programming Language</cite>
for the underlying idiom.</p>

Images and Multimedia#

Image, audio, and video markup. Responsive images (srcset / sizes) and format negotiation (<picture>) cover most modern image needs; <video> and <audio> are the native players.

Element	Purpose
`<img>`	Embedded image. Always set `alt` (empty if decorative) and explicit `width` / `height`.
`<picture>`	Container for `<source>` candidates plus a fallback `<img>`.
`<source>`	Alternative media resource inside `<picture>`, `<audio>`, or `<video>`.
`<audio>`	Native audio player. `controls`, `preload`, `loop`, `muted`.
`<video>`	Native video player. `poster`, `controls`, `playsinline`.
`<track>`	Captions, subtitles, descriptions for a media element.
`<map>`	Client-side image map container. Rare in modern UIs.
`<area>`	Clickable region inside a `<map>`.

<img src="hero.avif" alt="Cluster topology" width="1600" height="900"
     srcset="hero-800.avif 800w, hero-1600.avif 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     loading="lazy" decoding="async">

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

<video controls preload="metadata" poster="thumb.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4"  type="video/mp4">
  <track kind="captions" src="clip.en.vtt" srclang="en" label="English" default>
</video>

Embedded Content#

Elements that pull external documents or interactive content into the page.

Element	Purpose
`<iframe>`	Embedded browsing context. Use `sandbox`, `allow`, `referrerpolicy` to constrain it.
`<embed>`	Generic external content (plugins, PDFs). Largely legacy.
`<object>`	External resource with a fallback inside the tag.
`<svg>`	Inline SVG. Treated as part of the DOM; CSS and JS reach inside.
`<math>`	MathML expression. Native rendering in modern browsers.

<iframe src="https://example.com/embed" loading="lazy"
        sandbox="allow-scripts allow-same-origin"
        referrerpolicy="no-referrer" title="External preview"></iframe>

Tables#

Tables for tabular data. Semantic structure (<thead>, <tbody>, <tfoot>, <caption>, <th scope=>) is what makes them accessible to screen readers and predictable for CSS. Never use tables for layout.

Element	Purpose
`<table>`	Tabular data container.
`<caption>`	Table title; first child of `<table>`.
`<colgroup>`	Column group; carries shared styling for one or more columns.
`<col>`	Single column within a `<colgroup>`.
`<thead>`	Header rows.
`<tbody>`	Body rows. Allowed multiple times to group sub-sections.
`<tfoot>`	Footer rows: totals, summaries.
`<tr>`	Row.
`<th>`	Header cell. `scope="col"` or `scope="row"` for assistive tech.
`<td>`	Data cell.

<table>
  <caption>Quarterly results</caption>
  <thead>
    <tr><th scope="col">Quarter</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>$1.2M</td></tr>
    <tr><th scope="row">Q2</th><td>$1.6M</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>$2.8M</td></tr>
  </tfoot>
</table>

Forms#

The platform’s input layer. Built-in validation, the right keyboard on mobile, accessible labeling, and submit semantics all come from using the form elements correctly. Modern HTML5 input types eliminate most of what JS form libraries were built to provide.

Element	Purpose
`<form>`	Form container. `action`, `method`, `enctype`, `novalidate`.
`<input>`	Single-line control. `type` selects the variant (text, email, password, number, date, file, checkbox, radio, range, color, search, tel, url, hidden, submit, …).
`<textarea>`	Multi-line text input.
`<select>`	Drop-down or list box.
`<optgroup>`	Option group inside `<select>`.
`<option>`	Single choice inside `<select>` or `<datalist>`.
`<datalist>`	Suggestion list bound to an `<input>` via `list`.
`<button>`	Push button. `type="submit" / "reset" / "button"`.
`<label>`	Caption bound to a control by `for` or by wrapping.
`<fieldset>`	Group of related controls.
`<legend>`	Caption for a `<fieldset>`.
`<output>`	Result of a calculation; can target a form’s controls.
`<progress>`	Progress indicator. `value` and `max`.
`<meter>`	Scalar measurement within a known range.

<form method="post" action="/contact" novalidate>
  <label>
    Name
    <input name="name" required autocomplete="name">
  </label>
  <label>
    Email
    <input type="email" name="email" required autocomplete="email">
  </label>
  <fieldset>
    <legend>Contact preference</legend>
    <label><input type="radio" name="prefer" value="email" checked> email</label>
    <label><input type="radio" name="prefer" value="phone"> phone</label>
  </fieldset>
  <label>
    Message
    <textarea name="message" rows="4" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Useful input types: email, url, number, tel, date, time, datetime-local, month, week, color, range, search, file. They give validation and, on mobile, the right keyboard.

Interactive#

Built-in interactive widgets. Less code than JS reimplementations, keyboard-accessible by default, and styleable with CSS.

Element	Purpose
`<details>`	Disclosure widget; expands when `<summary>` is clicked or `open` is set.
`<summary>`	The visible label for a `<details>`.
`<dialog>`	Native modal or non-modal dialog. `show()` and `showModal()` in JS.

<details>
  <summary>Show advanced options</summary>
  <p>These options apply to the current session only.</p>
</details>

<dialog id="confirm">
  <form method="dialog">
    <p>Delete this campaign?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>
<script>document.getElementById('confirm').showModal();</script>

Scripting#

How JavaScript and dynamic graphics load into a page.

Element	Purpose
`<script>`	Loads or runs JavaScript. `defer` (default for ESM), `async`, `type="module"`, `nomodule`, `crossorigin`, `integrity`.
`<noscript>`	Fallback content when JS is disabled.
`<canvas>`	2D / WebGL drawing surface. Pixel data is exposed to scripts.
`<template>`	Inert parsed HTML fragment. Cloned into the DOM at runtime.
`<slot>`	Insertion point inside a custom element’s shadow DOM.

<script src="/app.js" defer></script>
<script type="module" src="/main.js"></script>
<script type="module">
  import { mount } from "/lib.js";
  mount(document.getElementById("app"));
</script>

<template id="card">
  <article class="card">
    <h3></h3>
    <p></p>
  </article>
</template>

defer, run after parsing, in document order. Use this by default.
async, run as soon as ready, out of order. Analytics, isolated.
type="module", ES modules, with import / export; deferred by default.

Demarcating Edits#

For documents that show revisions, change history, or collaborative edits.

Element	Purpose
`<ins>`	Inserted content. `cite` and `datetime` attributes track provenance.
`<del>`	Deleted content. Same provenance attributes.

<p>Status: <del datetime="2026-05-10">draft</del>
           <ins datetime="2026-05-12">approved</ins>.</p>

Attributes#

Per-element configuration. Standard attributes are type-checked by the spec; boolean attributes are present-or- absent (disabled not disabled="true"); custom attributes use the data- prefix and surface in JavaScript through element.dataset:

<a href="/about" target="_blank" rel="noopener">about</a>
<input type="email" name="email" required minlength="5">
<img src="/logo.svg" alt="Acme Co." loading="lazy" decoding="async">
<button type="submit" disabled aria-busy="true">Send</button>

Boolean attributes are present-or-absent (disabled, not disabled="true"). Custom attributes use the data- prefix (data-user-id="42") and are accessible from JavaScript via element.dataset.

Accessibility#

The accessibility checklist that catches the bulk of WCAG failures. Semantic HTML carries most of the weight; ARIA fills the gaps; keyboard reachability and visible focus are the boundaries below which the site stops working for users who can’t use a mouse.

Use semantic elements first; ARIA second.
Label every form control.
Use heading levels in order (<h1> once, then <h2>, <h3>); don’t skip.
Make focus visible (:focus-visible).
Ensure keyboard reachability for everything that takes a click.
aria-* attributes for state and context that semantics can’t express: aria-expanded, aria-controls, aria-live, aria-current.

Run real assistive-tech tests: VoiceOver, NVDA, Narrator, TalkBack. Linters and Lighthouse cover the basics; users find the rest.

Validation#

The tools that catch HTML and accessibility issues before real users do. Each one covers a different layer, from spec compliance (W3C validator), runtime issues (DevTools), performance and best practices (Lighthouse), accessibility (axe DevTools).

Browser DevTools’ Issues panel.
validator.w3.org.
Lighthouse for accessibility / performance / best practices.
axe DevTools for accessibility.

What Belongs in HTML vs. CSS vs. JS#

A useful heuristic for “where should this go?” When something can be done in HTML or CSS, do it there. Native <details>, <dialog>, form validation, and CSS animations are more accessible and more performant than JS reimplementations.

HTML, structure, semantics, content, links, forms.
CSS, presentation, layout, animation, theming.
JavaScript, behavior the platform doesn’t already provide.

When something can be done in HTML or CSS, do it there. Native <details>, <dialog>, form validation, and CSS animations are more accessible and more performant than JS reimplementations.