HTML examples
The HTML hub focuses on markup that already does real work: landmark regions that give assistive technology a map of the page, skip links that place the caret where keyboard users need it, navigation lists that stay navigable without script, and form controls wired to labels and fieldsets so browsers validate and announce them correctly. Each example shows the document fragment, the reason the structure is chosen, and what changes when a screen reader or find-in-page tool meets it. Use the task groups to move from page skeleton to form detail, and follow the relationships into the CSS and JavaScript that build on the same structure.
5 published examples in 2 taskgroups. Hub pages list every Example in exactly one task group.
Author accessible form markup
2 examplesWrite native form markup whose labels, grouping, and error associations are announced correctly.
Associate every form control with an explicit label
Bind each input, select and textarea to a label with matching for and id values so the control has a name, the label is clickable, and errors have something to describe.
Group related checkboxes with a fieldset and legend
Give a set of related checkboxes a group name with fieldset and legend, keep every box individually labelled, and know why the same shape must not be used for either-or choices.
Structure page content
3 examplesMark up document regions, reading order, and navigation so people and crawlers share one map.
Add a skip link that lands on the main region
Place a first-tab link that jumps past navigation into the main content and becomes visible on focus, so keyboard users are not trapped in the header.
Mark up a primary navigation as a labelled list
Wrap site navigation in a named nav landmark and keep its items a real list, so screen readers announce which region it is, how many links it holds, and where it ends.
Structure a page with semantic landmarks
Mark the header, navigation, main, and footer regions so keyboard and screen-reader users can jump between them instead of tabbing through everything.
Adjacent navigation
- Parent: Home
- Other language hubs: CSS
- Other language hubs: JavaScript
- Other language hubs: TypeScript
- Related topic: CSS Layout
- Related topic: DOM Events
- Related topic: Form Validation
- Or search all examples: Search