Cheatsheet · Tutorials

HTML cheatsheet

Tags that earn their keep, semantics that matter, attributes I always forget.

Document scaffold

Modern baseline document

<!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>
    <!-- content -->
  </body>
</html>

Semantics — use the right element

<header>introductory content for the nearest section

<nav>a region of navigation links

<main>the page-unique content (one per document)

<article>self-contained piece that could syndicate

<section>thematic grouping with a heading

<aside>tangentially related to the surrounding content

<footer>footer for the nearest section / page

<figure>/<figcaption>a media block with its caption

Form inputs you forget

<input type="email">browser-validated email

<input type="tel">opens numeric keyboard on mobile

<input type="search">shows clear-X on iOS Safari

<input inputmode="decimal">numeric keypad without restricting input

autocomplete="one-time-code"autofill OTP from SMS on iOS

enterkeyhint="send"changes the on-screen return key label

Accessibility cheats

aria-label / aria-labelledbyname an element with no visible text

aria-current="page"mark the active nav item

role="status"live region; announces polite text changes

<button type="button">avoid accidental form submit (default is "submit")

Heading order is contract: don’t skip levels (h1 → h3) just for styling.