Layout & Structure›Core· 40 min read

Semantic HTML

Use tags that describe their meaning — header, nav, main, footer. Better for SEO, accessibility, and your own sanity.

What you will learn

Replace generic divs with meaningful semantic tags
Lay out a page with header, nav, main, section, article, aside and footer
Explain why semantics matter

Why not just use divs everywhere?

You could build a whole site with <div>. But <div> tells the browser, Google and screen readers nothing about what is inside. Semantic tags describe their meaning.

Instead of...	Use	Meaning
`<div class="header">`	`<header>`	Top of the page / a section
`<div class="nav">`	`<nav>`	Navigation links
`<div class="main">`	`<main>`	The main, unique content
`<div class="footer">`	`<footer>`	Bottom of the page
`<div class="article">`	`<article>`	A self-contained piece (a blog post)
`<div class="section">`	`<section>`	A themed group of content
`<div class="sidebar">`	`<aside>`	Side content, related but separate

A full semantic page layout

Now let us put those tags together into one real page. The example below builds a whole site layout using the semantic tags from the table — a <header> on top, a <main> in the middle and a <footer> at the bottom. Skim the code first, then follow the line-by-line tour underneath it.

A complete page using semantic tags

<header>
  <h1>CodingClave</h1>
  <nav>
    <a href="#home">Home</a> |
    <a href="#courses">Courses</a> |
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section id="courses">
    <h2>Our Courses</h2>
    <article>
      <h3>HTML &amp; CSS</h3>
      <p>Build real web pages from scratch.</p>
    </article>
    <article>
      <h3>MERN Stack</h3>
      <p>Become a full-stack JavaScript developer.</p>
    </article>
  </section>

  <aside>
    <h3>Next batch</h3>
    <p>Starts Monday. Limited seats.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 CodingClave. All rights reserved.</p>
</footer>

Live preview

Read the page top to bottom by its meaning: <header> holds the site name and a <nav> of menu links; <main> holds the page’s unique content; inside it a <section> groups the courses, with each course in its own <article>; an <aside> holds the related “Next batch” note; and <footer> holds the copyright at the bottom. Each tag *names* the part of the page it contains.

Note: Output: A normal-looking page — heading and menu on top, two course blocks in the middle, a small “Next batch” note, and a copyright line at the bottom. It looks like plain divs, but the structure now has meaning that Google and screen readers understand.

Tip: These tags look the same as plain divs in the browser — the difference is meaning. Google ranks semantic pages better, and screen-reader users can jump straight to <nav> or <main>. Same effort, far better page.

Q. Which tag best holds the main, unique content of a page?

Answer: <main> represents the dominant, unique content. There should be just one <main> per page.

✍️ Practice

Rebuild an earlier page using <header>, <nav>, <main> and <footer> instead of divs.
Add two <article> blocks inside a <section>.

🏠 Homework

Sketch the semantic layout of a news website: where would header, nav, main, article, aside and footer go?