Tech-Service-Logo-for-SitesByYogi-5
Contact
🧠 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

CourseDurationLevel
HTML & CSS Foundations10 hoursBeginner
PHP Foundations12 hoursIntermediate

🧩 5. Table Structure Tags

TagDescription
<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>
ElementUse
<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

  1. Create resume.html.
  2. Add a <header> with your name and title.
  3. In <main> include:
    • A profile summary in a <section>.
    • An experience <table>.
    • A skills list (<ul>).
  4. 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.