Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 2: HTML Structure & Elements - SitesByYogi
SitesByYogi text logo
Contact
🧠 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

TagPurpose
<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

  1. Create index.html, about.html, and contact.html.
  2. Add the same header and footer to each page.
  3. 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.