The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →The eight tags worth knowing are <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, and <figure>. They describe what parts of a page mean—not how those parts look—and can make a document easier to navigate with assistive technology when used correctly.
What these eight tags do
HTML provides semantic elements so authors can identify the purpose and relationships of page content. Unlike a generic <div>, a semantic element communicates a role to browsers and assistive technology. The right element depends on the content’s meaning, not its visual position or styling.
Page regions and navigation
<header>contains introductory material for a page or a section, often a heading, logo, author information, or navigation aids. A header directly inside<body>is exposed as a banner landmark; a header nested in a section belongs to that section.<nav>marks a significant group of navigation links, such as a primary menu, table of contents, or index. It is not a wrapper for every set of links.<main>identifies the document’s dominant content: the material directly related to its central topic or the application’s primary function. It gives users a way to jump past repeated site-wide content.<footer>holds closing information for the nearest sectioning ancestor, such as author details, copyright, contact information, or related links. A footer for the whole page is exposed as a contentinfo landmark.
Content and groupings
<article>is an independent, self-contained composition that could make sense on its own or be reused or distributed. Examples include a blog post, news story, forum post, product card, or comment.<section>groups content around a distinct theme when no more specific element fits. Sections normally have a heading; do not choose one solely as a styling wrapper.<aside>contains material related to, but distinct from, the surrounding content. A sidebar, related links, author bio, or explanatory note can fit when it remains meaningful on its own.<figure>packages a self-contained item—such as an image, diagram, code sample, or other media—that can be referenced as a unit. Add<figcaption>when the item needs a caption.
How to choose the right element
Ask what the content is doing before deciding how to arrange or style it. Use <main> for the page’s unique central content, and use <article> for a standalone composition within it. If that composition has distinct, headed thematic groups, those can be <section> elements. Keep genuinely complementary material in an <aside>; mark important navigation groups with <nav>; and use <header> or <footer> for introductory or closing material that belongs to the page or a nested section.
These elements can be nested when their meanings warrant it. For example, a page’s <main> can contain an <article> with its own header and footer, plus an aside for related material. The names describe purpose and scope; they do not prescribe a particular layout. When none of the semantic elements fits, a <div> is still the appropriate generic container.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Using semantic tags for accessibility
Landmarks help people using screen readers or other assistive technology move directly to the page region they need. W3C WAI explains that marking a site’s header, global navigation, main content, and footer as landmarks lets users skip to a region without working through everything before it. See W3C WAI Technique H101 and its Page Regions guidance.
Use the native elements for their intended purposes: modern browsers expose their built-in landmark roles, so adding a redundant role="main" to <main> is unnecessary. If a page has more than one landmark of the same kind, give repeated landmarks useful accessible names. Keep the overall document structure logical so people can navigate it by both headings and landmarks.
Quick Recap
Best Value
Rank #4
- 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
Common mistakes to avoid
- Do not use a semantic tag just because its name matches where a box appears visually. A sidebar is an
<aside>only when its content is complementary, for example. - Do not turn every cluster of links into
<nav>; reserve it for meaningful navigation groups. - Do not use
<section>as a generic replacement for<div>. A section represents a thematic grouping and normally needs a heading. - Do not assume that changing every
<div>improves accessibility. Correct, meaningful structure is what helps; a generic container remains useful when no more specific meaning applies.
A practical way to mark up a page
- Identify the page’s unique central content and wrap it in
<main>. - Within it, identify any self-contained post, story, or similar composition for
<article>. - Divide longer content into thematic groups with headings and
<section>only where that grouping is meaningful. - Mark significant navigation groups with
<nav>, and use<aside>for related but separate content. - Add headers and footers at the level whose introductory or closing information they contain.
- Wrap a self-contained image, diagram, or other media item in
<figure>when appropriate, adding a<figcaption>if it needs a caption.
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.
