Lesson 11: Semantic HTML

What is Semantic HTML?

Semantic HTML uses tags that clearly describe their meaning and purpose. Instead of using generic <div> everywhere, semantic tags tell both browsers and developers what the content represents.

Benefits:

Better SEO (search engines understand content)
Improved accessibility (screen readers work better)
Easier to maintain and read code
More meaningful HTML structure

Main Semantic Elements

<header>

Represents introductory content or navigation links. Usually contains logo, site title, and main navigation.

<header>

    <h1>My Website</h1>

    <nav>Navigation here</nav>

</header>

<nav>

Contains navigation links for the website.

<nav>

    <ul>

        <li><a href="home.html">Home</a></li>

        <li><a href="about.html">About</a></li>

    </ul>

</nav>

<main>

Contains the main content of the page. Only one per page.

<main>

    <h2>Welcome</h2>

    <p>Main content goes here...</p>

</main>

<article>

Self-contained content that could be distributed independently (blog post, news article, forum post).

<article>

    <h3>Article Title</h3>

    <p>Article content...</p>

</article>

<section>

Groups related content together. Usually has a heading.

<section>

    <h2>About Us</h2>

    <p>Information about the company...</p>

</section>

<aside>

Contains content indirectly related to main content (sidebar, related links).

<aside>

    <h3>Related Links</h3>

    <ul>...</ul>

</aside>

<footer>

Contains footer information (copyright, contact info, links).

<footer>

    <p>© 2025 My Website</p>

</footer>

Complete Page Structure

HTML Code:

<body>

  <header>

    <h1>Site Title</h1>

    <nav>Menu</nav>

  </header>

  <main>

    <article>Content</article>

  </main>

  <footer>Footer</footer>

</body>

Visual Layout:

Header - Site Title & Nav

Main - Content Area

💡 Best Practices:

Use semantic tags instead of <div> when possible
Only one <main> per page
<article> should make sense on its own
<section> should have a heading
Use <header> and <footer> in multiple contexts

Practice Exercise

Try This:

Create a blog homepage with:

<header> with site title and navigation
<main> containing 2-3 <article> elements
<aside> with "Recent Posts" sidebar
<footer> with copyright info