Loading...

HTML Semantic Elements

You already know div as a generic box and class/id as hooks on elements. Semantic elements go further: they name regions by meaning — banner, navigation, primary content, side note, footer — so people, search tools, and screen readers can map the page without guessing from CSS alone. A wall of anonymous divs can look identical after styling, yet the structure stays opaque. Landmarks make the outline readable in the HTML itself.

Meaning before boxes

CSS can turn any tag into a column or a bar. That flexibility is why beginners overuse div. Semantic tags do not replace layout skills; they document intent. When a region is major navigation, mark it nav. When a block is the unique main story of this URL, mark it main. When a card could stand alone as a post or news item, consider article. Use a plain div when you need a styling wrapper with no special landmark role.

Direct answer

Prefer landmarks such as header, nav, main, article, section, aside, and footer when their meaning matches the content. Keep one primary main per page for the dominant unique content. Nest carefully — nav inside header is common; stuffing the whole site inside one article is not. Semantics name roles; class and id still label hooks on top of those roles.

📊 Core landmarks

Element Typical meaning
header Introductory or banner content for a page or section
nav Major navigation links
main Dominant unique content of this page
article Independent composition (post, story, card that could stand alone)
section Thematic grouping, usually with a heading
aside Side note related to the surrounding content
footer Closing content for a page or section

A simple page skeleton

Start with the classic outline: banner and links at the top, unique content in main, closing info in footer. This is the backbone most multi-page sites share before you add articles or sidebars.

Simple semantic skeleton

html
HTML Code 
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>

Reading the skeleton

  • header holds the site title and often the primary nav
  • nav wraps major links — not every random list of anchors must be nav
  • main holds the unique content for this URL; keep one per page
  • footer closes the page with copyright or secondary links
  • Headings still matter inside landmarks — they label the themes
  • You can add class or id on these tags when you need CSS or fragment hooks from earlier lessons

Article, section, and aside

Inside main, grow structure: an article for a self-contained piece, section for thematic chunks (ideally with headings), and aside for related notes that are not the primary narrative. The second demo shows a small news-style layout without inventing fake landmarks.

Article section and aside

html
HTML Code 
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>

Reading article, section, and aside

  • article groups content that could make sense on its own
  • Each section has a heading that states its theme
  • aside holds a tip related to the article, not a second main
  • Nesting stays inside one main — do not add another main for the sidebar
  • If a box is only for layout columns with no meaning, a div may still be fine
  • Mix freely with class="card" or id="tip" when styling or jumping requires it

Choosing landmarks vs div

Ask: “Does this region have a standard role?” If yes, use the matching landmark. If you only need a flex/grid wrapper, keep div. Do not sprinkle section or article everywhere to “look semantic” — empty meaning is worse than an honest wrapper. One clear main, purposeful nav, and honest article/aside choices beat a decorative forest of tags.

Practice in your editor

  1. Rebuild a practice page with header, nav, main, and footer.
  2. Put the unique page story only inside main.
  3. Add one article with a heading and two short paragraphs.
  4. Optionally add an aside with a related tip.
  5. Confirm there is exactly one main in the file.
  6. Replace a meaningless outer div around the banner with header if it fits.
  7. Write one sentence explaining when you would still use div.
  8. Optional: add id="top" on header and a fragment link from earlier id practice.

Easy mistakes

  • Multiple main elements on one page
  • Using section with no heading or theme when a heading would clarify
  • Wrapping the entire site in one giant article
  • Calling every link list nav (reserve nav for major navigation)
  • Replacing every div with random landmarks that do not match meaning
  • Forgetting that class/id still work on semantic tags

Summary

  • Semantic elements name meaning — not only visual boxes
  • Core landmarks: header, nav, main, article, section, aside, footer
  • Keep one primary main per page
  • Prefer a landmark when the role fits; keep div for anonymous wrappers
  • Nest carefully; do not fake semantics for decoration
  • Next: combine these landmarks into fuller page layouts

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial