🧠 Module 4

Lists, Tables, and Semantic HTML

Objective: Learn to organize and display information clearly using lists, tables, and semantic elements that improve structure, accessibility, and SEO.

🧩 1. Review: What Does “Semantic” Mean?

Semantic HTML means using the right tag for the right purpose — describing meaning, not just appearance.

❌ Non-semantic

<div id="top">
<div id="nav">
<div id="main">
<div id="footer">

✅ Semantic

<header>
<nav>
<main>
<footer>

Benefits: Better accessibility, stronger SEO, and cleaner, more maintainable code.

🧱 2. Lists: Grouping Related Information

Unordered List (`<ul>`)

Items are shown with bullet points.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List (`<ol>`)

Items are numbered automatically.

<ol>
  <li>Plan the layout</li>
  <li>Write the HTML</li>
  <li>Style with CSS</li>
</ol>

Description List (`<dl>`)

Definitions or key-value pairs.

<dl>
  <dt>HTML</dt>
  <dd>Defines the structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>Controls the visual presentation.</dd>
</dl>

💡 Lists are great for menus, features, and FAQs.

🗂️ 3. Nesting Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>MySQL</li>
    </ul>
  </li>
</ul>

📊 4. Tables: Displaying Structured Data

Tables present data in rows and columns — think schedules, pricing, or contact lists.

Basic Table Example

Course	Duration	Level
HTML & CSS Foundations	10 hours	Beginner
PHP Foundations	12 hours	Intermediate

🧩 5. Table Structure Tags

Tag	Description
`<table>`	Defines the table
`<tr>`	Table row
`<th>`	Header cell (bold, announced as column header)
`<td>`	Data cell
`<caption>`	Table title
`<thead>`	Header section
`<tbody>`	Body section
`<tfoot>`	Footer (summaries/totals)

Example

<table>
  <caption>StreetGeek Academy Courses</caption>
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>10 hrs</td>
      <td>Beginner</td>
    </tr>
    <tr>
      <td>PHP Foundations</td>
      <td>12 hrs</td>
      <td>Intermediate</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">All courses include a final project</td>
    </tr>
  </tfoot>
</table>

💡 colspan="3" merges cells horizontally.

🧱 6. Semantic Layout Elements (Deep Dive)

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

<main>
  <article>
    <h2>Latest Blog Post</h2>
    <p>Learn how to code your first website with StreetGeek.</p>
  </article>

  <aside>
    <h3>Related Topics</h3>
    <ul>
      <li>HTML Tips</li>
      <li>CSS Basics</li>
      <li>Web Hosting 101</li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2025 StreetGeek Academy. All rights reserved.</p>
</footer>

Element	Use
`<header>`	Top banner / site title
`<nav>`	Menu or navigation links
`<main>`	Main content area (unique per page)
`<article>`	Independent, self-contained content
`<aside>`	Sidebar / secondary info
`<footer>`	Bottom section for copyright/links

⚙️ 7. Accessibility & SEO Benefits

Screen readers announce regions correctly (e.g., “navigation”).
Search engines better understand your page sections.
Developers parse and maintain layouts faster.

✅ <nav> vs <div class="nav"> — same look is possible, but the semantic element communicates intent.

💻 8. Hands-On Practice

✅ Exercise 1: Create a Resume Page

Create resume.html.
Add a <header> with your name and title.
In <main> include:
- A profile summary in a <section>.
- An experience <table>.
- A skills list (<ul>).
Add a <footer> with contact info.

Example snippet

<header>
  <h1>Yogi Copeland</h1>
  <p>WordPress Developer</p>
</header>

<main>
  <section>
    <h2>Experience</h2>
    <table>
      <thead><tr><th>Company</th><th>Role</th><th>Years</th></tr></thead>
      <tbody>
        <tr><td>SitesByYogi</td><td>Lead Developer</td><td>2020–Present</td></tr>
      </tbody>
    </table>
  </section>

  <section>
    <h2>Skills</h2>
    <ul>
      <li>WordPress</li>
      <li>PHP</li>
      <li>JavaScript</li>
    </ul>
  </section>
</main>

<footer>
  <p>Email: hello@sitesbyyogi.com</p>
</footer>

🧠 9. Quiz Time

What’s the difference between <th> and <td>?
Which tag groups navigation links?
What are the three main list types in HTML?
Why is semantic HTML important for accessibility?
What tag defines a table’s title?

🚀 Challenge Task

Create a “StreetGeek Course Catalog” page that includes:

A <table> with at least 4 courses (name, duration, difficulty, description).
A <caption>, and proper <thead>, <tbody>, <tfoot>.
A page structure with <header>, <main>, and <footer>.
At least one list (e.g., “What You’ll Learn”).
Bonus: Add an <aside> promo box.

<aside>
  <h3>Join StreetGeek Academy!</h3>
  <p>Learn HTML, CSS, and PHP at your own pace.</p>
</aside>

🏁 Module 4 Summary

How to use HTML lists for organizing data
How to build and format tables properly
The power of semantic HTML elements
How to structure your webpage for accessibility and SEO

Next up: 👉 MODULE 5: Introduction to CSS — style everything you’ve built so far.