Semantic HTML: header, nav, main, article and why they matter

A div says nothing about its content. Semantic elements say what the content is, and browsers, screen readers and search engines use that.

The landmark elements

• header: introductory content for the page or a section, such as the logo and site name.
• nav: a block of main navigation links.
• main: the main content. Use it once per page.
• article: a self-contained piece that would make sense on its own, such as a blog post or a product card.
• section: a themed group of content, normally with its own heading.
• aside: related but secondary content, such as a sidebar.
• footer: closing content such as contact details and copyright.

<body>
  <header>
    <a href="/">CampusConnect</a>
    <nav aria-label="Main">
      <a href="/events">Events</a>
      <a href="/clubs">Clubs</a>
    </nav>
  </header>
  <main>
    <h1>Upcoming events</h1>
    <article>
      <h2>Robotics workshop</h2>
      <p>Saturday, 10 am, Seminar hall 2.</p>
    </article>
  </main>
  <footer>Contact: clubs@college.example</footer>
</body>

Headings are an outline, not a font size

Screen reader users jump between headings to scan a page. Keep them in order: one h1, then h2 for sections, h3 inside those. Never skip from h2 to h4 just because h4 looks the right size; change the size with CSS instead.

Why it is worth the effort

• Accessibility: assistive technology lets users jump straight to nav or main.
• SEO: search engines understand which part is the real content.
• Maintenance: header, main and footer are easier to read in code reviews than three nested divs.
• Viva: "What is semantic HTML?" is a standard first-round web question. Practise more in UniCircle interview prep: web development.