HTML Foundations: Module 5

← Dashboard
Module 5: The Organizing Cup

Tables & Containers

Use <table> for tabular data, <div> to group elements, and semantic tags like <header>, <footer>, <main>, <section> for meaning.

<!-- Semantic structure -->
<header>Logo, Nav</header>
<main>
  <section>Content block</section>
  <section>Another block</section>
</main>
<footer>Copyright</footer>

<!-- Table for data -->
<table>
  <tr><td>Espresso</td><td>$2.50</td></tr>
  <tr><td>Latte</td><td>$4.00</td></tr>
</table>

Semantic vs. Div

<header> — Top of page, logo, nav
<main> — Primary content
<section> — Thematic grouping
<footer> — Bottom, copyright
Pro Tip

Semantic tags help search engines and screen readers understand your page structure.

Div

Use <div> when no semantic tag fits — for layout grouping with no meaning.