Recommended Free Tools
The five semantic HTML elements <header>, <nav>, <main>, <article> and <footer> give content meaningful structure. Choose them according to what their contents do, not how you want them to look: CSS controls presentation, while HTML communicates purpose and relationships. This is a useful beginner set, not an official ranking or a requirement to use all five on every page.
What semantic HTML elements do
A semantic element describes the role of its content. A browser and assistive technologies can use that structure to help people understand and navigate a page. A <div>, by contrast, is a generic container; it remains the right choice when no more specific element fits.
As an Amazon Associate I earn from qualifying purchases.
Semantic markup does not dictate a particular layout, color, or typeface. Use CSS for those choices, and use HTML elements to express what each part of the page is for.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The five elements and when to use them
<header>: introductory content
A <header> contains introductory material for the page or for a section of it. It might hold a heading, logo, or navigational aids. It is not necessarily one strip at the very top of the page: an article or section can have its own header.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<nav>: a meaningful group of navigation links
Use <nav> for a section whose purpose is navigation to the current document or other documents. Common examples include a site’s primary navigation or a table of contents. It is meant for significant navigation groups, not every isolated link. If a page has more than one navigation landmark, give each a distinct accessible name, such as aria-label="Primary" and aria-label="On this page".
<main>: the page’s dominant content
Place the content that is directly related to or expands on the page’s central topic or functionality inside <main>. For an article page, that usually means the unique article content rather than repeated site navigation or footer material.
<article>: a self-contained composition
Use <article> for content that makes sense as an independent composition and could be distributed or reused on its own, such as a blog post or forum entry. It is not simply a semantic replacement for any box of content.
<footer>: information about its surrounding content
A <footer> contains information about its nearest sectioning ancestor or the page itself. Depending on context, it might include author details, copyright information, or related links. A footer inside an article belongs to that article; a page-level footer belongs to the page.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
How the five elements can fit together
This illustrative structure uses all five elements, but it is not a template every page must copy. The right structure depends on the content.
<header>
<h1>Site name</h1>
</header>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/guides">Guides</a>
</nav>
<main>
<article>
<h2>Page topic</h2>
<p>Main page content goes here.</p>
</article>
</main>
<footer>
<p>Contact and copyright information</p>
</footer>When to use <section>, <aside> or <div>
Choose <section> for a thematic grouping
A <section> groups content that belongs together as a standalone theme when no more specific element describes it. Sections should generally have a heading. Use <article> instead when the composition can stand on its own or be reused.
Choose <aside> for indirectly related content
An <aside> contains material related to the main content indirectly, such as a contextual sidebar. Do not choose it merely because CSS places an element at the side of the screen; visual position alone does not establish its semantic role.
Keep <div> when a generic wrapper is all you need
If a container has no distinct semantic purpose, a <div> is appropriate. There is no benefit in substituting a semantic element whose meaning does not match the content.
How landmarks help—and what they do not guarantee
Elements such as <nav> and <main> can expose page regions as landmarks, letting assistive-technology users jump to useful areas instead of moving through every preceding link. How a region is exposed depends on context and accessible naming. For example, a <section> is not exposed as a landmark unless it has an accessible name, and the context of a <header> or <footer> affects whether it acts as a page-level banner or content-information landmark.
Using semantic elements alone does not make a site accessible or establish WCAG conformance. W3C WAI describes its H101 technique as an example, not a requirement: “Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet the normative requirements of WCAG.” W3C WAI, H101: Using HTML heading elements to identify headings. Meaningful headings, accessible names, accurate content, and a sound overall implementation still matter.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
