Quick answer: Semantic HTML means choosing tags for their meaning, not their appearance: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> instead of a page of anonymous <div>s. The payoff is real: screen readers navigate by landmarks, search engines understand your page structure, and your CSS becomes easier to write. This guide maps each element to its correct use — the full beginner foundation is in our HTML tutorial for beginners.
Table of Contents
The seven landmarks every page should have
<body>
<header> <!-- logo, site title -->
<nav>...</nav> <!-- main menu -->
</header>
<main> <!-- ONE per page: the unique content -->
<article> <!-- self-contained: post, product, story -->
<h1>...</h1>
<section> <!-- thematic grouping with a heading -->
<h2>...</h2>
</section>
</article>
<aside> <!-- tangential: sidebar, related links -->
</main>
<footer> <!-- copyright, secondary links -->
</body>Choosing between the confusable elements
| Confusion | Rule |
|---|---|
article vs section | article makes sense alone in a feed or reprint; section is a chapter inside something larger |
section vs div | section needs a heading and meaning; pure styling containers stay div |
aside vs footer | Related-but-optional content is aside; site-level closing info is footer |
nav count | Only major navigation groups; footer link lists usually don’t need it |
Beyond landmarks: the elements people miss
<time datetime="2026-01-15">— machine-readable dates for articles and events.<figure>+<figcaption>— images/charts with their captions bound together.<address>— contact info for the article or page author.<abbr title="">— abbreviations with expansion on hover and for screen readers.<mark>— highlighted/relevant text;<small>— fine print.
One audit trick that catches most semantic mistakes: open your page, replace the CSS mentally with “outline view” — if the heading and landmark structure doesn’t read like a table of contents, the tags are decorative rather than semantic. Combined with the getting-started basics, this covers everything a beginner needs to write professional markup.
For instructor-reviewed HTML and CSS practice, Ampersand Academy teaches web development one-to-one.
Official documentation
For the full reference behind this guide, read MDN’s list of HTML elements. It is the source the details above are drawn from, and the first place to check when an option or attribute name changes.
Frequently asked questions
What is semantic HTML?
Semantic HTML uses elements that describe their content’s meaning – header, nav, main, article, section, footer – instead of generic divs. It helps screen readers, search engines and future developers understand the page.
How many main elements can a page have?
One. The main element marks content unique to that page, excluding repeated headers, footers and sidebars. Duplicate main elements confuse assistive technology.
When should I use section instead of div?
Use section when the grouping has a heading and represents a thematic block – a chapter, a tab panel, a news list. If the only reason for the element is styling, use a div.
Does semantic HTML improve SEO?
It helps search engines understand page structure and content priority, and clean landmarks correlate with better crawling. It is a foundation, not a magic ranking button – content quality still decides.
Is the div tag going away?
No. div remains correct for pure layout and styling containers that carry no meaning. Semantic elements did not replace div – they narrowed when div is the right choice.
Last updated on · Written by Dinesh Kumar R
