# Patterns — Semantic HTML Structure ## Contents - Full page skeleton - Complete head block (SEO + social) - Article with sections - Data table - Figure, time, address, definition list - Breadcrumbs - Gotchas ## Full page skeleton ```html …see head block below…

Acme

Page topic — the only h1

First theme

…

``` ## Complete head block (SEO + social) ```html Pricing — Acme ``` ## Article with sections ```html

How we cut LCP to 1.8s

Jane Doe

· August 5, 2026

The problem

…

What we changed

Images

…

``` ## Data table ```html

Revenue by region, Q2 2026
Region	Revenue
EMEA	$4.2M
APAC	$3.1M

``` ## Figure, time, address, definition list ```html

Revenue grew 40% quarter over quarter in Q2 2026 — Fig 1. Quarterly revenue

Aug 5, 2:30 PM

Plan: Pro
Seats: 25

``` ## Breadcrumbs ```html ``` ## Gotchas - **`

` without a heading is meaningless** — if it has no heading, it should be a `

`. - **`

` vs `

`:** ask "would this make sense in an RSS feed alone?" Yes → article. - **Multiple `

` landmarks need distinguishing `aria-label`s** ("Main", "Breadcrumb", "Footer") — otherwise they announce identically. - **`` requires machine-readable `datetime`** when the text isn't already ISO format. - **`og:image` must be an absolute URL**; relative paths silently break social previews. - **`` and `og:title` can differ** — title is for tabs/SERP (include brand), og:title for the share card. - **Skipping `<thead>`/`<th scope>`** makes header cells unassociable; screen readers and copy-paste both degrade. - **`<b>`/`<i>` vs `<strong>`/`<em>`:** the former are stylistic offsets, the latter carry emphasis semantics — pick by meaning.