Semantics & metadata
23 steps in 4 sets of HTML.
Marking up what things mean rather than how they look. Page landmarks, media and embeds, and the metadata that decides how your page appears in a search result or a shared link.
Twenty-three steps. The landmarks set is the one that matters most and is skipped most often: a correct nav and main are the difference between a page a screen reader can navigate and one it cannot.
Page landmarks
- Page landmarksThe skeleton of a page: banner, navigation, main content, footer.
- Articles and sectionsAn article stands alone; a section is a titled part of something larger.
- Asides and nested footersTangential content beside the main flow, and a footer scoped to its article.
- Breadcrumb navigationA breadcrumb trail is an ordered list inside a labeled nav.
- Headings are an outlineThe heading levels are the table of contents, whatever size they happen to render at.
- The search landmarkThere is an element for the search area now; it used to be a div with a role.
- Contact detailsThe address element is for contacting a person, not for postal addresses in general.
Media & embeds
- VideoA video element with controls, a poster frame and captions.
- Captions and subtitlesA video without a text track is a video some people cannot use.
- AudioAudio playback, with the attributes that keep autoplay tolerable.
- Audio with fallbacksTwo formats and a link, because no single codec plays everywhere.
- Responsive imagesServing the right image file for the screen that is asking.
- Inline SVGA small icon written straight into the markup, styleable with CSS.
- Reusable SVG iconsDefine the shape once, then reference it wherever the icon appears.
- CanvasA canvas is a blank pixel buffer, so everything about it is invisible to assistive tech.
- Embedded framesAn iframe with the attributes that keep an embed from misbehaving.
Metadata
- Document headThe metadata every page needs: charset, viewport, title, description.
- Social preview tagsOpen Graph and Twitter tags decide what a shared link looks like.
- Telling crawlers and browsers what to doA handful of meta tags that change how a page is indexed and rendered.
- Structured dataThe same facts again, in the shape a search engine reads.
- Resource hintsFour rel values that change when the browser fetches something.
- Icons and the web app manifestThe set of links that decide what your page looks like on a tab, a phone and a bookmark.
Encore
- article_page.htmlAn article page with social metadata, semantic structure and a figure.