Semantic structure
Landmarks, sections, articles, navigation, and content hierarchy.
What you will practice
Site header; Primary navigation; Main landmark; Named sections.
Use the worked examples when needed, then test your understanding without them.
- 01Semantic structure: Site headerA top-level header introduces the page or site. It is not a replacement for the main content landmark.Practice
- 02Semantic structure: Primary navigationA nav landmark groups major navigation links; a label distinguishes it from another navigation region.Practice
- 03Semantic structure: Main landmarkThe main landmark contains the page-specific content, excluding repeated site navigation.Practice
- 04Semantic structure: Named sectionsA section groups a distinct topic. aria-labelledby can give the region its name from a visible heading.Practice
- 05Semantic structure: Independent articlesAn article is a self-contained composition that could make sense when distributed independently.Practice
- 06Semantic structure: Supporting asidesAn aside contains related but secondary material. Essential task instructions belong in the main flow.Practice
- 07Semantic structure: Page footerA footer contains information about its nearest section or the page, such as related links or authorship.Practice
- 08Semantic structure: Contact informationaddress marks contact information for its nearest article or body, not every postal address mentioned in text.Practice
- 09Semantic structure: Nested heading orderHeading order follows the relationship between topics. A subsection of h2 normally starts at h3.Practice
- 10Semantic structure: Complete page outlineA clear page outline separates site navigation, the primary task, and supporting information.Practice