The Grammar of HTML

Not a programming language. Something rarer — a vocabulary for meaning. HTML names things so browsers, search engines, and screen readers all understand.

scroll

01 — Semantics

Elements that mean something

A <div> is a box. An <article> is a piece of content that makes sense on its own. The difference is invisible on screen — but the browser, the search engine, and the screen reader understand it completely. HTML's real job is naming things correctly.

"There are only two hard things in Computer Science: cache invalidation and naming things."

— Phil Karlton · HTML has been naming things since 1991

semantics.html

<!-- Non-semantic — a box of boxes -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Semantic — the document describes itself -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>On the Art of Naming</h1>
    <time datetime="2024-03-01">March 1, 2024</time>
    <p>The element tells you what it is, not how it looks.</p>
  </article>
  <aside>Related reading...</aside>
</main>

<footer>© 2024</footer>

<time datetime="2024-03-01"> shows both humans and machines the same date — one as text, one as a standard format. That's the semantic bargain.

02 — The Hyperlink

The element that changed everything

One tag, one attribute, and the entire web becomes possible. <a href> is arguably the most consequential piece of syntax ever written. It took information that was locked on individual computers and made it navigable from anywhere.

links.html

<!-- The anchor — deceptively simple -->
<a href="https://example.com">Visit Example</a>

<!-- Link to a section on the same page -->
<a href="#introduction">Jump to intro</a>

<!-- Open a mail client -->
<a href="mailto:[email protected]">Email us</a>

<!-- Trigger a download -->
<a href="/report.pdf" download="annual-report.pdf">
  Download Report
</a>

<!-- A link with meaning — rel explains the relationship -->
<a
  href="https://news-source.com/article"
  rel="external noopener"
  target="_blank"
>
  Read the original source
</a>

rel="external noopener" tells browsers and search engines how pages relate to each other — semantics reaching across the network itself.

03 — Forms

Interactivity without a single line of JavaScript

Forms were the web's first interactive surface. Before React, before AJAX, before SPAs — a <form> collected information and sent it somewhere. Modern HTML forms have built-in validation, type enforcement, and accessibility that most custom solutions still don't match.

form.html

<form action="/signup" method="post">

  <!-- label + input paired by for/id — screen readers connect them -->
  <label for="email">Email address</label>
  <input
    type="email"
    id="email"
    name="email"
    required
    autocomplete="email"
    placeholder="[email protected]"
  />

  <!-- Browser validates range, step — no JS needed -->
  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="18" max="120" />

  <!-- datalist — autocomplete from a defined list -->
  <input list="languages" name="language" placeholder="Favourite language" />
  <datalist id="languages">
    <option value="Ruby" />
    <option value="Python" />
    <option value="Go" />
  </datalist>

  <button type="submit">Create account</button>
</form>

type="email" with required — the browser validates format and presence before the form ever submits. Zero JavaScript, full accessibility.

04 — Images & Media

The right image for every context

The <picture> element is one of HTML's most underused powers — serve a different image for every screen size, every resolution, every format. The browser picks the best one. Your CSS never had to do this.

media.html

<!-- picture: serve AVIF → WebP → JPEG, based on support -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="A mountain at sunrise" width="1200" height="630" />
</picture>

<!-- srcset + sizes: serve the right resolution for the device -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="The valley in autumn"
  loading="lazy"
/>

<!-- figure + figcaption: image with semantic caption -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram" />
  <figcaption>Fig. 1 — The request lifecycle</figcaption>
</figure>

loading="lazy" defers off-screen images until the user scrolls near them — a one-attribute performance improvement requiring no JavaScript.

05 — The Whole Picture

What HTML quietly provides

♿

Accessibility Built In

Use the right elements and you get keyboard navigation, screen reader support, and focus management for free — no ARIA required.

🔍

SEO Is Semantics

Search engines read your HTML. A well-structured document with proper headings, <main>, and <article> ranks better than a nest of divs.

🔗

rel & microdata

HTML can describe relationships between pages, embed structured data for rich search results, and link to alternate versions of itself.

📱

The Viewport Meta

<meta name="viewport"> — a single tag that unlocked mobile web. The entire responsive design era traces back to this one line.

🎮

Canvas & WebGL

<canvas> gave HTML a drawing surface. Games, data visualisations, and 3D rendering all run inside a single element.

🕰️

30 Years Old & Growing

HTML5 is still adding elements. <dialog>, <details>, <search> — the spec evolves to match what developers keep building with JavaScript.