Semantic HTML

1. What Does "Semantic" Mean?

Semantic = "relating to meaning." In HTML, semantic tags are elements that clearly describe their purpose to both the browser and the developer reading the code.

Compare these two approaches:

<div id="header">
  <div id="nav"> ... </div>
</div>
<div id="main-content">
  <div class="article"> ... </div>
</div>
<div id="footer"> ... </div>

<header>
  <nav> ... </nav>
</header>
<main>
  <article> ... </article>
</main>
<footer> ... </footer>

Both produce the same visual result. But the semantic version is:

• Readable — any developer can instantly understand the page layout
• Accessible — screen readers for blind users can navigate by sections
• SEO-friendly — Google understands your content structure better, which helps your page rank higher

Source: MDN — Semantics in HTML

2. The Semantic Page Layout

Here is the standard layout that almost every professional website uses. Memorize this structure — you'll use it in every project you build:

<body>

  <header>
    <!-- Site logo, site name, navigation -->
    <nav>
      <!-- Navigation links go here -->
    </nav>
  </header>

  <main>
    <!-- The primary content of the page -->

    <section>
      <!-- A thematic grouping of content -->
    </section>

    <article>
      <!-- A self-contained piece (blog post, product card) -->
    </article>

  </main>

  <aside>
    <!-- Sidebar content (related links, ads) -->
  </aside>

  <footer>
    <!-- Copyright, contact info, social links -->
  </footer>

</body>

3. Each Semantic Tag Explained

4. Section vs. Article vs. Div — When to Use What

This is the most common point of confusion for beginners. Here's the decision rule:

5. The <title> Tag — Why It Matters More Than You Think

In your Lesson 1 practice, you used <title>Document</title> — the VS Code default. Here's why that matters:

• Browser tab: The title is what users see in the browser tab. "Document" tells them nothing.
• Google Search: The <title> is the blue clickable link in Google results. A good title = more clicks.
• Bookmarks: When someone bookmarks your page, the title becomes the bookmark name.

Good titles are: Descriptive, concise (50-60 characters), and include your most important keyword. Examples:

• <title>Altamash — Full Stack Developer Portfolio</title>
• <title>About Us | The Nawaab's Restaurant</title>
• <title>How to Build a REST API with Node.js — Tutorial</title>

Source: MDN — The <title> element

6. Real-World Example: A Portfolio Page

Here's a complete, semantic HTML page for a developer portfolio. Study the structure — every tag has a reason.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Altamash — Full Stack Developer</title>
</head>
<body>

  <header>
    <h1>Altamash</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>

    <section id="about">
      <h2>About Me</h2>
      <p>I am a full stack developer learning to build
        modern web applications.</p>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <ul>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
        <li>React & Next.js</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <article>
        <h3>The Nawaab's Restaurant</h3>
        <p>A premium restaurant website built with
          Next.js and Tailwind CSS.</p>
      </article>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email: <a href="mailto:hello@example.com">hello@example.com</a></p>
    </section>

  </main>

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

</body>
</html>

Notice how reading this code, you immediately understand the page layout — even without seeing it in a browser. That's the power of semantic HTML.

7. Build Challenge: Your Portfolio Page

This is the important part. Create a new file and build a semantic portfolio page. Here's exactly what to include:

1. Create a file called practices/lesson2-portfolio.html
2. Use the full HTML5 document structure (from Lesson 1 — type it from memory)
3. Give it a proper <title> (not "Document"!)
4. Build this structure using only semantic tags:
   • <header> with your name in an <h1> and a <nav> with 3-4 links
   • <main> containing:
     • An "About Me" <section>
     • A "Skills" <section> with a list
     • A "Projects" <section> with at least one <article> inside
   • <footer> with a copyright line
5. Open it in your browser and check that it renders correctly

Primary Source: For a deeper dive into every semantic element, read MDN: Content Sectioning Elements.

Finished the build? Stuck on something? Come back and show me your code — I'll review it and tell you what's next.