A11y Front-end Roadmap #4 - Semantic content
Or how to divide, segment and organize your content inside a page.
A word of preface: web content started as text-driven content and for this reason much of what HTML is today should be considered an evolution of classic typography. We continue our developer a11y roadmap by briefly exploring our content-related tags, starting with the higher-level ones.
1. A Quick Note on <div>s
Everyone knows what a <div> is (I hope… tell me I'm not wrong...). Well, all the following elements are nothing more than <div>s, block-level containers. However, the “nothing more” part is a big fat lie, since a <div> is merely a “box,” while the following tags have semantic meaning. Understanding them allows us to write more meaningful and beautiful code, making our documents more appealing to search engines and more usable across devices and for assistive technologies.
2. Article: <article>
The <article> tag is used to define a self-contained piece of content. If a part of your content could be independently distributed or reused, you're likely looking at an article. Typically, it represents a complete work, such as a blog post, news article, or forum post. It often includes a title (or header section) and may also contain author information and metadata (usually in a footer section).
3. Section: <section>
The <section> tag defines a thematic grouping of content, typically with a heading. It serves as a way to organize content into distinct areas. While <article> defines standalone content, <section> is a subdivision of content within the same topic. Each <section> should contain a heading.
4. Aside: <aside>
The <aside> tag is used for content that is tangentially related to the main content or for supplementary information. It’s often misinterpreted as a “sidebar,” but remember that its name refers to “semantically” aside (related but not essential content), not “geometrically” aside (sidebar), even if the two meanings can coexist.
5. Nav: <nav>
The <nav> tag contains a group of navigation links. From a content perspective, this could translate into a table of contents or breadcrumbs. It’s a non-mandatory tag. Remember to label it according to its purpose to make it easier to identify among all other navigation sections.
6. Header: <header>
The <header> tag represents introductory content or a set of navigational links. It can contain headings, logos, and other introductory elements. Yes, we've already seen it when laying out the main regions of our page, but keep in mind you can also use it for an article if useful.
7. Footer: <footer>
The <footer> tag defines a footer for a document or section, containing information about its author, copyright, links to related documents, or other relevant information. Similar to <header>, it can be used not only for page structure but also within an <article>.
<article>
<header>
<h1>High-Level Semantic Tags</h1>
<nav>
<ul>
<li><a href="#article">Article</a></li>
<li><a href="#section">Section</a></li>
</ul>
</nav>
</header>
<section id="article">
<h2>The Article Tag</h2>
<p>Let's talk about articles...</p>
</section>
<section id="section">
<h2>The Section Tag</h2>
<p>Let's talk about sections...</p>
</section>
<footer>
<p>Written by Another Coding Guy</p>
</footer>
</article>
7. Notes
7.1 “Pure” Containers
If you just need a container without semantic meaning, you can always use the ever-present <div>s and <span>s for your block-level or phrasing content.
7.2 Nesting
While you can nest articles in sections and vice versa, no more than one header and one footer are allowed per article or section. No nesting is allowed between them. There is no header inside a header, or footer inside a header, nor double headers inside articles... you get the idea, right?
7.3 Labeling
If a landmark is used only once on your page, it doesn't require a specific label. However, if there are multiple instances of it, labeling is crucial to allow users to distinguish between them. You can use the aria-labelledby attribute pointing to the contained heading or, if not present, the aria-label attribute. To avoid redundancy, be mindful that using the landmark role as part of the label could lead to screen readers announcing "Site Navigation Navigation."