Goal
Ensure that HTML is semantically structured so that it’s understandable for users, assistive technology, and other machine uses.
Why this matters
Read Why does it matter if our HTML is semantic?.
How to implement
Semantic containers include:
<article>
Most frequently used for new articles or blog posts. Whether you’ll use this element depends on your page content.
<aside>
Most frequently used for callouts in content-heavy pages. Whether you’ll use this element depends on your page content.
<details> and <summary>
Similar to an accordion, this provides the ability to expand and collapse information where the <summary> is visible but the <details> are hidden until the component is triggered.
<figure> and <figcaption>
Most frequently used for displaying information such sa charts, graphics, or images.
<footer>
Most sites have a site <footer>. Articles or sections may also have footers if appropriate. Whether you’ll use this element depends on your page content.
<form>
Any form should be wrapped in a form tag.
<header>
The global header is in a <header> tag, but things like form headers should be too. The <section> element can also take a <header>.
<main>
The main content of the page is in a <main> tag.
<nav>
Any navigational element, including the global navigation and local navigation, should be wrapped in a <nav> element.
<section>
Most frequently used for content on the page. You should be using this frequently on complex pages with multiple areas. When you’ll use this element depends on your page content.
How to test
Manual testing
Right-click various sections of the page and ensure that their containers are semantic according to the explanations in How to Implement.
Automated testing
We can’t automate testing for all aspects of this. When it comes to checking page construction, that’s a manual task.
HTML validation should catch incorrectly nested tags.