HTML #
Semantic, accessible markup. Tags are shown escaped so they display literally.
Document skeleton #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
</head>
<body> ... </body>
</html>
Text & semantics #
<h1> ... <h6> headings (one h1 per page)
<p> paragraph
<strong> <em> importance / emphasis (they carry meaning)
<ul><li> <ol><li> unordered / ordered list
<blockquote> <cite> quotation + its source
<code> <pre> <kbd> code / preformatted / keystrokes
Links & media #
<a href="/path" target="_blank" rel="noopener">text</a>
<img src="t.png" alt="describe it" width="200" loading="lazy">
<picture>
<source srcset="t.webp" type="image/webp">
<img src="t.png" alt="...">
</picture>
<video controls><source src="v.mp4"></video>
Semantic layout #
<header> <nav> <main> <footer>
<section> a thematic group (usually with a heading)
<article> self-contained, reusable content
<aside> tangential content / sidebar
<figure> <figcaption> media with a caption
Forms & inputs #
<form action="/save" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<input type="number" min="0" max="9" step="1">
<textarea rows="4"></textarea>
<select><option value="a">A</option></select>
<button type="submit">Save</button>
</form>
types: email, url, number, date, color, range, search, tel, file
Tables #
<table>
<caption>Scores</caption>
<thead><tr><th scope="col">Name</th><th scope="col">Pts</th></tr></thead>
<tbody><tr><td>Turtle</td><td>9</td></tr></tbody>
</table>
scope="col"/scope="row"ties a header to its cells for screen readers.
Interactive & data #
<details>
<summary>Show more</summary> native collapse, no JS
Hidden until the summary is clicked.
</details>
<dialog id="m">...</dialog> open with m.showModal() in JS
<div data-id="42" data-state="on"> read in JS as el.dataset.id
Metadata & SEO #
<meta name="description" content="...">
<meta property="og:title" content="..."> Open Graph (social cards)
<meta property="og:image" content="...">
<link rel="canonical" href="https://...">
Accessibility #
alt="..." on images; <label> every form control
<button> for actions, <a> for navigation
aria-label="Close" names an icon-only control
role + aria-* only when no native element fits
keep a visible :focus outline and logical tab order