HTML Course - Lesson 8: Semantic HTML

What is Semantic HTML?

Semantic HTML uses elements that clearly describe their meaning to both the browser and the developer. For example, a <header> element tells us it contains introductory content, while a <nav> element tells us it contains navigation links.

Why is Semantic HTML Important?

Improves accessibility for screen readers.
Helps search engines understand page structure (SEO).
Makes code more readable and maintainable.

Common Semantic Elements

Tag	Purpose
`<header>`	Introductory section, often contains logo, title, or navigation.
`<nav>`	Main navigation links for the site.
`<main>`	Main content of the page (unique content, not repeated).
`<section>`	Thematic grouping of content, often with a heading.
`<article>`	Independent, self-contained content such as a blog post.
`<aside>`	Related content, like sidebars or callout boxes.
`<footer>`	Closing content, often contains copyright or contact info.

Example of Semantic HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>First Post</h2>
    <p>Welcome to my blog!</p>
  </article>

  <aside>
    <h3>About the Author</h3>
    <p>Web developer and coffee enthusiast.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

Non-Semantic vs Semantic

Using <div> and <span> for everything is non-semantic — they tell nothing about the meaning of the content. Semantic tags provide clear purpose.

Exercise

Rebuild a simple webpage using the following semantic elements: <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.