Programmer’s Reference

HTML

Give pages meaningful structure, navigation, and accessible forms.

HTML goes in .html files or templates. Escape dynamic values through your template system.

8 entries · Essentials first · Reviewed October 5, 2026

Glossary: commands, keywords & terms

Select a term for its definition, syntax, example, and common mistakes.

Essentials

Start an HTML document

Declare the language, character encoding, mobile viewport, and page title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo status</title>
</head>
<body><h1>Demo status</h1></body>
</html>

Practical useCreate a standalone demo status page.

Common mistakesDo not disable user zoom. A meaningful title helps tabs, search results, and assistive technology.

Source: html.spec.whatwg.org documentation

Headings and landmarks

Identify navigation and primary content using native semantic elements.

<header><a href="/">Demo company</a></header>
<nav aria-label="Main"><a href="/reference/">Reference</a></nav>
<main><h1>Site inventory</h1><section><h2>Enabled sites</h2></section></main>
<footer>Demo company</footer>

Practical useKeep application-like navigation understandable to keyboard and screen reader users.

Common mistakesChoose heading levels by structure, not visual size. Use one main landmark for primary content.

Source: html.spec.whatwg.org documentation

Links and buttons

Use links to navigate and buttons to perform actions.

<a href="/reference/">Open reference</a>
<button type="button">Refresh demo</button>

Practical useSeparate page navigation from a demo refresh action.

Common mistakesA button inside a form defaults to submit unless its type is set. Avoid clickable divs.

Source: html.spec.whatwg.org documentation

Forms and accessibility

Labels and required inputs

Connect a visible label to an input and use browser validation.

<form action="/demo-search" method="get">
  <label for="site">Site name</label>
  <input id="site" name="site" required maxlength="120">
  <button type="submit">Search</button>
</form>

Practical useDesign a site-search form for a staging prototype.

Common mistakesThe /demo-search handler is illustrative. Client validation does not replace server validation or authorization. A placeholder is not a label.

Source: html.spec.whatwg.org documentation

Content and media

Tables for structured data

Use a caption and column headers to describe tabular records.

<table>
  <caption>Demo service status</caption>
  <thead><tr><th scope="col">Service</th><th scope="col">State</th></tr></thead>
  <tbody><tr><td>Demo worker</td><td>Running</td></tr></tbody>
</table>

Practical useDisplay a sanitized status inventory.

Common mistakesUse CSS for page layout. Provide a horizontal scroll wrapper for wide tables on narrow screens.

Source: html.spec.whatwg.org documentation

Image alternative text

Provide meaningful alternative text for informative images and reserve layout space.

<img src="demo-diagram.png" alt="Browser connects to the demo web service" width="640" height="360">

Practical useDescribe a public architecture illustration without private host details.

Common mistakesUse alt="" for decorative images. File names are rarely useful alternative text.

Source: html.spec.whatwg.org documentation

Disclosure with details and summary

Make an expandable explanation using native keyboard-accessible disclosure controls.

<details>
  <summary>Common mistakes</summary>
  <p>Check the current directory before changing files.</p>
</details>

Practical useOffer optional explanation next to a demo command.

Common mistakesKeep the summary clear. Critical warnings should remain visible instead of being hidden in a closed disclosure.

Source: html.spec.whatwg.org documentation

Project structure

Load CSS and JavaScript

Load a stylesheet and a deferred script from the same site.

<link rel="stylesheet" href="/demo.css">
<script src="/demo.js" defer></script>

Practical useAttach a staging UI stylesheet and script.

Common mistakesdefer applies to external classic scripts. Confirm paths and content types; never ship server credentials in JavaScript.

Source: html.spec.whatwg.org documentation

Search results

HTML

Glossary: commands, keywords & terms

Essentials

Start an HTML document

Headings and landmarks

Links and buttons

Forms and accessibility

Labels and required inputs

Content and media

Tables for structured data

Image alternative text

Disclosure with details and summary

Project structure

Load CSS and JavaScript