🧠 Module 2

HTML Structure & Elements

Objective: Learn how to build structured, multi-section webpages using HTML5 semantic elements.

🧩 1. Why Structure Matters

Structure gives meaning to your HTML. It helps browsers, screen readers, and search engines understand your content.

Without structure

<div>Title</div>
<div>Paragraph</div>

With structure

<header><h1>Title</h1></header>
<main><p>Paragraph</p></main>

👉 The second version is better for SEO, accessibility, and readability.

🧱 2. The Skeleton of a Webpage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StreetGeek Webpage Structure</title>
</head>
<body>
  <header>
    <h1>Welcome to StreetGeek Academy</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>About This Course</h2>
      <p>Learn how to structure and style websites from scratch.</p>
    </section>

    <section>
      <h2>What You’ll Learn</h2>
      <ul>
        <li>HTML Basics</li>
        <li>CSS Styling</li>
        <li>Responsive Design</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 StreetGeek Academy</p>
  </footer>
</body>
</html>

📦 3. Common Structural Tags

Tag	Purpose
`<header>`	Top section, usually with logo or navigation
`<nav>`	Contains navigation links
`<main>`	The main content of the page
`<section>`	Groups related content together
`<article>`	Standalone content (e.g., a blog post)
`<aside>`	Sidebar or secondary info
`<footer>`	Bottom section with copyright, links, or contact info

🧩 4. Nesting & Indentation

Bad

<header>
<h1>Title</h1>
<nav><a>Home</a></nav>
</header>

Good

<header>
  <h1>Title</h1>
  <nav>
    <a href="#">Home</a>
  </nav>
</header>

Always indent two spaces or one tab per level.

🧠 5. The <head> Section (Recap)

<head>
  <meta charset="UTF-8">
  <meta name="description" content="StreetGeek HTML Course">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Structured Page</title>
</head>

💡 The <title> text appears in the browser tab and search results.

🪜 6. Linking Multiple Pages

Use relative paths with the <a> tag:

<a href="about.html">About Us</a>

Mini website structure

/html-basics
├── index.html
├── about.html
└── contact.html

All pages should share a consistent header and footer for a professional look.

💻 7. Hands-On Practice: Create a Multi-Page Site

✅ Exercise 1: Basic Website Structure

Create index.html, about.html, and contact.html.
Add the same header and footer to each page.
Use <nav> to link between them.

Example header:

<header>
  <h1>StreetGeek Academy</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

✅ Exercise 2: Add Sections

<main>
  <section>
    <h2>Welcome to StreetGeek</h2>
    <p>This is where we learn how to build the web from scratch.</p>
  </section>
  <section>
    <h2>Our Mission</h2>
    <p>Empowering the next generation of web developers.</p>
  </section>
</main>

Tip: Put your personal story in an <article> on about.html; add contact info in the <footer> of contact.html.

🧭 8. Semantic HTML vs. <div> Soup

❌ Old way

<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>

✅ Modern way

<header></header>
<main></main>
<footer></footer>

Semantic HTML improves accessibility, SEO, and code readability.

🔍 9. Accessibility Tip

Organize content logically and use proper headings (<h1> to <h6>).

<h1>StreetGeek Academy</h1>  <!-- Main title -->
<h2>Our Mission</h2>         <!-- Section -->
<h3>How We Teach</h3>         <!-- Subsection -->

Never skip heading levels — screen readers rely on the outline.

🧠 10. Quiz Time

What is the purpose of the <main> tag?
Which tag should contain your navigation links?
What’s the difference between <section> and <article>?
What element appears at the bottom of most web pages?
Why is semantic HTML better than only using <div> tags?

🚀 Challenge Task

Build a mini 3-page site with shared <header> and <footer>.
<nav> with working links.
At least two <section> elements per page.
A descriptive <title> for each page.

Bonus: Add a simple contact form (no CSS yet):

<form>
  <label>Name:</label>
  <input type="text" name="name"><br>
  <label>Email:</label>
  <input type="email" name="email"><br>
  <input type="submit" value="Send">
</form>

🏁 Module 2 Summary

How to structure a website using semantic HTML
How to create reusable headers and footers
How to link pages together
Why semantic HTML is better than <div> soup

Next up: 👉 MODULE 3: Working with Text, Links, and Images — add real content with links, photos, and formatting.