Page Structure

Semantic HTML: Building Your Website Like a House 🏠

Imagine you’re building a house. You don’t just throw bricks everywhere randomly, right? You have a roof at the top, walls in the middle, and a floor at the bottom. Everything has its proper place!

Semantic HTML works exactly the same way. Instead of using boring <div> boxes for everything, we use special tags that tell the browser (and people who can’t see the screen) exactly what each part of your webpage is for.

The Big Picture: Your Webpage is a House

graph TD
    A["🏠 Your Webpage"] --> B["🎩 header - The Roof/Sign"]
    A --> C["🧭 nav - The Hallways"]
    A --> D["🏠 main - The Living Space"]
    D --> E["📰 article - Complete Rooms"]
    D --> F["📦 section - Room Dividers"]
    A --> G["📎 aside - The Side Closet"]
    A --> H["🦶 footer - The Foundation/Mat"]

Let’s take a tour of each room!

🎩 The <header> Element: Your Website’s Welcome Sign

Think of the <header> like the sign on a shop or the welcome mat at your front door. It’s the first thing people see!

What goes inside?

• Your website’s name or logo
• A catchy tagline
• Sometimes navigation links

Example:

<header>
  <h1>Tommy's Pizza Palace</h1>
  <p>The best pizza in town!</p>
</header>

Real life: When you visit YouTube, the red YouTube logo at the top? That’s in a <header>!

💡 Remember: A page can have ONE main header, but articles and sections can have their own little headers too!

🧭 The <nav> Element: Your Website’s Hallways

Imagine you’re in a big building. The hallways help you find different rooms. That’s exactly what <nav> does—it holds your navigation links!

What goes inside?

• Links to different pages
• Menu items
• Breadcrumbs (those “Home > Products > Toys” links)

Example:

<nav>
  <a href="/home">Home</a>
  <a href="/about">About Us</a>
  <a href="/menu">Our Menu</a>
  <a href="/contact">Contact</a>
</nav>

Real life: The menu bar on Amazon with “Today’s Deals,” “Customer Service,” etc.? That’s a <nav>!

⚠️ Important: Not ALL links need to be in <nav>. Only the main navigation for your site belongs there.

🏠 The <main> Element: The Living Space

This is where the action happens! The <main> element contains the main content of your page—the stuff people actually came to see.

Rules for <main>:

• There can be only ONE <main> on each page
• It should NOT include stuff that repeats on every page (like headers, footers, or nav)

Example:

<main>
  <h1>Today's Special Pizzas</h1>
  <p>Check out our delicious offerings!</p>
  <!-- All your main content here -->
</main>

Real life: On a news website, all the actual news stories are inside <main>. The header and sidebar ads are outside it.

💡 Think of it this way: If someone asked “What is this page ABOUT?”, everything in <main> is the answer!

📰 The <article> Element: A Complete Story

An <article> is like a newspaper article or a trading card—it’s a complete, self-contained piece of content that could stand on its own.

The Magic Test: Could you…

• Post it on social media by itself?
• Put it in a newsletter?
• Show it to someone without any other context?

If YES → It’s an <article>!

Example:

<article>
  <h2>Pepperoni Pizza</h2>
  <p>Our classic pepperoni pizza has
     been a family favorite since 1985.</p>
  <p>Price: $12.99</p>
</article>

More Examples of Articles:

• A blog post
• A product review
• A comment on a post
• A news story
• A recipe

📦 The <section> Element: Room Dividers

A <section> is like a chapter in a book or dividers in a folder. It groups related content together within a larger piece.

When to use <section>:

• When you have different “chapters” of content
• When content has its own heading
• When you’re dividing up a long page

Example:

<section>
  <h2>Vegetarian Pizzas</h2>
  <p>All our veggie options!</p>
  <!-- veggie pizza list -->
</section>

<section>
  <h2>Meat Lovers Pizzas</h2>
  <p>For the carnivores!</p>
  <!-- meat pizza list -->
</section>

🤔 Article vs Section: The Big Decision!

This confuses a lot of people, so let’s make it crystal clear:

Think Like This:

A book = The whole webpage

A chapter = <section> (part of the book)

A sticky note you could take out and show someone = <article>

Real Example:

<main>
  <article>
    <h1>How to Make Pizza at Home</h1>

    <section>
      <h2>Ingredients You Need</h2>
      <p>Flour, water, yeast...</p>
    </section>

    <section>
      <h2>Step-by-Step Instructions</h2>
      <p>First, mix the dough...</p>
    </section>
  </article>
</main>

See? The article is the complete recipe. The sections are just chapters inside it!

📎 The <aside> Element: The Side Closet

An <aside> is for content that’s related but not essential. It’s like a side note, a fun fact box, or a “by the way” moment.

What goes in <aside>:

• Sidebar widgets
• “Related articles” boxes
• Pull quotes
• Fun facts
• Advertisements

Example:

<aside>
  <h3>Fun Pizza Fact!</h3>
  <p>The largest pizza ever made was
     over 1,260 square meters!</p>
</aside>

Real life: On Wikipedia, those blue boxes on the right with quick facts? Those are <aside> content!

💡 Test: Could the page still make sense if you removed this content? If yes → it’s probably an <aside>.

🦶 The <footer> Element: The Welcome Mat at the Exit

Just like your house has a doormat as you leave, your webpage has a <footer> at the bottom!

What goes inside?

• Copyright info
• Contact details
• Links to privacy policy
• Social media links
• “Back to top” buttons

Example:

<footer>
  <p>&copy; 2024 Tommy's Pizza Palace</p>
  <p>123 Main Street, Pizza Town</p>
  <a href="/privacy">Privacy Policy</a>
</footer>

Real life: Scroll to the bottom of almost any website—you’ll find a <footer> with copyright and links!

🏗️ Putting It All Together

Here’s a complete webpage using ALL our semantic elements:

<!DOCTYPE html>
<html>
<head>
  <title>Tommy's Pizza Palace</title>
</head>
<body>

  <header>
    <h1>Tommy's Pizza Palace</h1>
    <p>Best pizza since 1985!</p>
  </header>

  <nav>
    <a href="/">Home</a>
    <a href="/menu">Menu</a>
    <a href="/about">About</a>
  </nav>

  <main>
    <article>
      <h2>Today's Special</h2>

      <section>
        <h3>The Mega Supreme</h3>
        <p>Our biggest pizza ever!</p>
      </section>

      <section>
        <h3>Ingredients</h3>
        <p>Pepperoni, mushrooms...</p>
      </section>
    </article>

    <aside>
      <h3>Did You Know?</h3>
      <p>We make 500 pizzas daily!</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 Tommy's Pizza</p>
  </footer>

</body>
</html>

🎯 Why Does This Matter?

Using semantic HTML isn’t just about being fancy. It helps:

1. Screen readers tell blind users what each section is
2. Search engines understand your content better
3. Other developers read your code more easily
4. Your future self remember what you built!

🧠 Quick Memory Trick

Think of your webpage as a newspaper:

🎉 You Did It!

You now understand semantic HTML page structure! Remember:

• header = The welcome sign
• nav = The hallways/menu
• main = The main event (only one!)
• article = Complete, shareable stories
• section = Chapters within content
• aside = Related but not essential info
• footer = The goodbye message

Your websites will now be more organized, accessible, and professional. Screen readers, search engines, and other developers will thank you!

🚀 Next step: Start looking at your favorite websites and try to guess which semantic elements they’re using!