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.
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.
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.