Semantic HTML5 Elements

🌐 HTML Basics Lesson 10 Intermediate

HTML5 introduced semantic tags that clearly describe their meaning to both browsers and search engines, improving page accessibility and SEO indexing.

1 Semantic tags (header, nav, main, section, footer) and SEO value

Before HTML5, pages relied heavily on generic `<div>` tags with classes. HTML5 introduced semantic tags to structure pages more logically:

<header>: Holds page header elements and branding.
<nav>: Wraps navigation link groups.
<main>: Wraps the core content specific to the webpage. You should only use one per page.
<section> & <article>: Groups related content or self-contained articles.
<footer>: Holds page footer metadata.

2 Semantic Page Structure Code

Let's look at the basic structure of a semantic webpage:

HTML — Semantic Structure

<header>
    <h1>Tech Portal</h1>
    <nav>
        <a href="/home">Home</a> | <a href="/about">About</a>
    </nav>
</header>
<main>
    <article>
        <h2>HTML5 Release Notes</h2>
        <p>Semantic HTML is critical for SEO.</p>
    </article>
</main>
<footer>
    <p>© 2026 Tech Portal</p>
</footer>

3 Code Challenge

Challenge: Write a semantic layout that includes an `<aside>` tag representing a sidebar of related links adjacent to a main `<article>` section.