Structure and Semantic HTML

Building blocks of a web page

Every HTML page is a tree of elements. Some carry meaning about the role of the content, not just its appearance — that's what makes HTML "semantic".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <header>
    <h1>Aisha's Portfolio</h1>
    <nav>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="projects">
      <h2>Projects</h2>
      <p>A collection of things I've built.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Aisha</p>
  </footer>
</body>
</html>

Why semantic elements matter

<header>, <nav>, <main>, <section> and <footer> describe what the content is, not just how it looks. This helps:

• Screen readers announce page landmarks so visually impaired users can jump straight to navigation or main content.
• Search engines understand which content is most important.
• Other developers (including future you) understand the page's structure at a glance.

A <div> for everything would render identically, but tells a screen reader or search engine nothing about the page's structure.

Try it yourself

Open the HTML/CSS/JS Lab and build a simple "About Me" page using at least one heading, one paragraph, a list of three hobbies, and a link.