Landmarks, sections, figures, data tables, and machine-readable values.
Page regions
Give each major area a clear purpose and reading position.
- HTML landmarks: give navigation, main content, and page edges clear owners
- HTML article and section: mark standalone content and named subdivisions
- HTML figure and figcaption: keep an asset with its explanation
- HTML search element: mark a search interface by purpose
- HTML address: identify contact details for the right owner
Text, language, and revision
Represent quotations, machine values, changes, and mixed-language text honestly.
- HTML time and data: pair readable copy with machine-readable values
- HTML quotations: keep quoted text and attribution distinct
- HTML ruby: attach short pronunciation notes to text
- HTML bdi: isolate an unknown text direction
- HTML data element: pair visible labels with machine values
- HTML ins and del: show an edit without falsifying current text
- HTML wbr: suggest a break inside an unbroken identifier
- HTML translate attribute: protect identifiers while localizing the surrounding text
- HTML mark: identify relevant text without calling it a warning
- HTML br and hr: separate a line from a change of subject
- HTML kbd, samp, and var: separate input, output, and variables
Tables and diagrams
Make data associations explicit and keep vector meaning available.
- HTML data tables: name row and column relationships explicitly
- HTML complex tables: connect each value to all applicable headers
- HTML table spans: merge cells only when the data relationship requires it
- HTML colgroup: assign column structure without replacing headers
- HTML inline SVG: give a meaningful vector a name
Common Mistakes
A lesson's illustrative route, component, or asset is not a deployed application feature.