Semantic Elements

Lesson 1 of 16 Beginner Interactive

Semantic HTML means using elements that clearly describe their meaning. Instead of using <div> for everything, use elements like <header>, <nav>, <main>, and <footer>.

Why Use Semantic HTML?

Accessibility — Screen readers understand the page structure
SEO — Search engines can better index your content
Maintainability — Code is easier to read and understand

Common Semantic Elements

<header> — page or section header
<nav> — navigation links
<main> — main content
<section> — thematic section
<article> — independent content
<aside> — sidebar content
<footer> — page or section footer
<figure> and <figcaption> — images with captions

Syntax

HTML

<header>
    <nav>Navigation</nav>
</header>

<main>
    <article>
        <section>Content section</section>
    </article>
    <aside>Sidebar</aside>
</main>

<footer>Footer content</footer>

Semantic HTML Elements

HTML

<!DOCTYPE html>
<html>
<head><title>Semantic HTML</title></head>
<body>
    <header>
        <nav>
            <a href="/">Home</a> |
            <a href="/about">About</a>
        </nav>
    </header>

    <main>
        <article>
            <h1>Article Title</h1>
            <p>Article content goes here.</p>
            <section>
                <h2>Section</h2>
                <p>Section content.</p>
            </section>
        </article>

        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2026 SukhNexus Academy</p>
    </footer>
</body>
</html>

Try It Yourself

Practice

Exercise

Rewrite a page using only semantic elements instead of <div> tags.

Answer

Use <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> instead of <div> with class names.

Quick Quiz

Which element wraps the main content of a page?

<div>

<main>

<body>

<main> wraps the primary content of the page.

Interview Questions

Search engines use semantic elements to understand the structure and importance of content. For example, <h1> signals the main topic, <nav> identifies navigation, and <article> marks standalone content — all helping search engines rank pages better.

Tutorial Complete

Back to HTML