HTML Best Practices Checklist

A quick pass before shipping a page. Each line links back to the page that explains the “why.”

Document structure

  • Page starts with <!DOCTYPE html>
  • <html> has a lang attribute
  • <head> includes charset, viewport, and a unique <title>
  • Only one <main> per page

See Basics and Meta Tags .

Headings

  • Exactly one <h1> per page
  • Heading levels go in order, no skipped levels
  • Headings describe content structure, not chosen for font size

See Headings and Document Outline .

Semantic structure

  • <header>, <nav>, <main>, <aside>, <footer> used instead of generic <div>s where they fit
  • <article> used for standalone content, <section> for themed groupings
  • Multiple <nav> elements have distinct aria-labels

See Semantic HTML and Page Landmarks .

  • Links navigate, buttons perform actions, neither is used for the other’s job
  • Link text makes sense out of context, no bare “click here”
  • target="_blank" is paired with rel="noopener noreferrer"
  • No href="#" placeholder links

See Links .

Images

  • Every <img> has an alt attribute
  • Decorative images use alt=""
  • width and height are set to prevent layout shift
  • Large or responsive images use srcset/sizes or <picture>

See Images and Responsive Images .

Forms

  • Every input has a <label> connected with for/id
  • Placeholder text is never the only label
  • Related checkboxes/radio buttons are wrapped in <fieldset> with a <legend>
  • Buttons inside a form have an explicit type

See Forms and Form Validation .

Tables

  • Tables are used for tabular data only, never for page layout
  • Data tables have a <caption>
  • Header cells use <th scope="col"> or <th scope="row">

See Tables .

Accessibility

  • Semantic HTML is used before reaching for ARIA
  • Interactive elements are keyboard-reachable and show a visible focus state
  • aria-label, aria-expanded, and similar attributes are only added where they add real information

See ARIA Basics .

Media and embeds

  • <video> and <audio> have controls, or a custom player replaces them
  • Videos with spoken dialogue have captions
  • <iframe> has a title attribute

See Media and Iframe .