LESSON 14

Semantic HTML

Learning objective: Use meaningful elements that describe the purpose of content.

Understand

Semantic tags describe what content *is*, not just how it looks.

Elements like <header>, <nav>, <main>, <section>, <article>, and <footer> give structure meaning. This helps search engines, assistive technology, and other developers understand your page far better than using <div> everywhere.

Analogy: Semantic tags are like clearly labelled rooms in a house instead of a warehouse of identical boxes.

See It in Action

A semantic page skeleton:

<header>Logo and nav</header>
<main>
  <article>Main story</article>
</main>
<footer>Contact info</footer>
How it works: Each tag names its role: <header> for the top, <main> for primary content, <article> for a self-contained piece, and <footer> for the bottom.

Try It Yourself

  1. Rebuild a page using <header>, <main>, and <footer>.
  2. Put your primary content inside <main>.
  3. Compare it to the same page built only with <div>.

Quick Quiz

Why prefer semantic elements over plain <div>s?

Challenge

Convert a div-based layout into a semantic one with header, main, and footer.

Success condition: Your page uses at least three different semantic elements correctly.