Tutorials › HTML Fundamentals › Semantic HTML5

Semantic HTML5

5 min read Quiz at the end

HTML5 semantic elements give meaning to structure: header, nav, main, article, section, aside, and footer. Screen readers and search engines use these to understand pages. Prefer semantic elements over generic divs.

Semantic Elements

<header>     Site header, logo, nav</header>
<nav>        Navigation links</nav>
<main>       Main content (one per page)</main>
<article>    Self-contained content (blog post)</article>
<section>    Thematic group of content</section>
<aside>      Sidebar content</aside>
<footer>     Page or section footer</footer>
<figure>     Image + caption
    <figcaption>Image caption</figcaption>
</figure>

← Form Validation Next: div and span →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which element is for main page content?

💡 <main> wraps the primary content — there should be only one per page.

2. <article> is for:

💡 <article> is for self-contained content that makes sense independently.

3. <aside> is for:

💡 <aside> marks content related to but not essential to the main content, like a sidebar.

4. <nav> is for:

💡 <nav> marks sections of major navigation links.

5. Why use semantic HTML?

💡 Semantic elements help screen readers, search engines, and developers understand the page structure.

Quick Access

Semantic HTML5

Semantic Elements

Test your understanding before moving on