Semantic elements are HTML elements that clearly describe the meaning and role of the content they contain. They help developers create a structured and meaningful web page.

Key Point: Common semantic elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.

1. What are Semantic Elements?

Semantic elements tell the browser, developers, and assistive technologies what a particular part of the document represents.

<header>
    Website Header
</header>

<main>
    Main Content
</main>

<footer>
    Website Footer
</footer>

The element names themselves communicate the purpose of each area.

2. Common Semantic Elements

Element	Purpose	Typical Content
`<header>`	Introductory or header content	Logo, title, introductory content
`<nav>`	Navigation area	Navigation links
`<main>`	Primary page content	Main content of the document
`<section>`	Thematic content grouping	A chapter, topic, or related group of content
`<article>`	Independent content	Blog post, news article, forum post
`<aside>`	Related secondary content	Sidebar, related links, additional information
`<footer>`	Footer information	Copyright, contact information, links

3. header Element

The <header> element represents introductory content for a page or a particular section.

<header>
    <h1>CIIT Training Institute</h1>
    <p>Technology Training and Learning</p>
</header>

CIIT Training Institute

Technology Training and Learning

4. nav Element

The <nav> element identifies a section containing important navigation links.

<nav>
    <a href="/home">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>
</nav>

5. main Element

The <main> element contains the primary content of the document.

<main>

    <h1>HTML Tutorial</h1>

    <p>
        Learn HTML from beginner to advanced concepts.
    </p>

</main>

Important: The main content should be the central content of the page, excluding repeated navigation, headers, and other supporting content.

6. section Element

The <section> element groups related content around a specific theme or topic.

<section>

    <h2>HTML Forms</h2>

    <p>
        Learn how to create forms using HTML.
    </p>

</section>

7. article Element

The <article> element represents self-contained content that can be understood independently.

Examples include blog posts, news articles, product reviews, and forum posts.

<article>

    <h2>Introduction to HTML</h2>

    <p>
        HTML is used to structure web pages.
    </p>

</article>

8. aside Element

The <aside> element represents content that is related to the surrounding content but is not part of its main flow.

<aside>

    <h3>Related Topics</h3>

    <ul>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

</aside>

9. footer Element

The <footer> element contains footer information for a page or a section.

<footer>
    <p>
        © 2026 CIIT Training Institute
    </p>
</footer>

10. figure Element

The <figure> element represents self-contained content, such as an image, diagram, code example, or illustration.

<figure>

    <img src="html.png"
         alt="HTML Document Structure">

</figure>

11. figcaption Element

The <figcaption> element provides a caption or description for a <figure>.

<figure>

    <img src="html.png"
         alt="HTML Document Structure">

    <figcaption>
        HTML Document Structure
    </figcaption>

</figure>

12. time Element

The <time> element represents a specific time or date.

<p>
    Course starts on
    <time datetime="2026-10-01">
        October 1, 2026
    </time>.
</p>

13. mark Element

The <mark> element highlights text that is relevant or important in a particular context.

<p>
    Learn <mark>HTML</mark> for web development.
</p>

Learn HTML for web development.

14. address Element

The <address> element provides contact information for the author or owner of the content.

<address>
    Email:
    training@example.com
</address>

15. Details and Summary

The <details> element creates a disclosure area that the user can open or close. The <summary> element provides the visible label.

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML is the standard markup language for web pages.
    </p>

</details>

What is HTML?

HTML is the standard markup language used to structure web pages.

16. Semantic Elements with Headings

Semantic sections are often easier to understand when they include appropriate headings.

<section>

    <h2>Our Courses</h2>

    <article>

        <h3>.NET Full Stack</h3>

        <p>
            Learn C#, .NET, SQL, Web API and frontend technologies.
        </p>

    </article>

</section>

17. Nested Semantic Elements

Semantic elements can be nested to create a meaningful document hierarchy.

<main>

    <section>

        <h2>Latest Courses</h2>

        <article>
            <h3>HTML Course</h3>
            <p>
                Learn HTML fundamentals.
            </p>
        </article>

        <article>
            <h3>CSS Course</h3>
            <p>
                Learn CSS fundamentals.
            </p>
        </article>

    </section>

    <aside>
        Related Learning Resources
    </aside>

</main>

18. Complete Semantic Structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Semantic HTML</title>
</head>

<body>

    <header>
        <h1>My Learning Website</h1>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>
    </nav>

    <main>

        <section>

            <h2>Courses</h2>

            <article>

                <h3>HTML Course</h3>

                <p>
                    Learn HTML from basic to advanced concepts.
                </p>

            </article>

        </section>

        <aside>

            <h3>Related Topics</h3>

            <p>
                CSS and JavaScript
            </p>

        </aside>

    </main>

    <footer>

        <p>
            © 2026 My Learning Website
        </p>

    </footer>

</body>

</html>

19. Semantic and Non-Semantic Comparison

Semantic

<header>
    Header
</header>

<nav>
    Navigation
</nav>

<main>
    Main Content
</main>

<footer>
    Footer
</footer>

Non-Semantic

<div>
    Header
</div>

<div>
    Navigation
</div>

<div>
    Main Content
</div>

<div>
    Footer
</div>

20. Advantages of Semantic Elements

Make the document structure easier to understand.
Improve HTML readability.
Make the code easier to maintain.
Provide clearer structural information to assistive technologies.
Help organize large web pages into meaningful areas.
Support a more logical document structure.

21. Common Mistakes

Mistake 1: Using div for every element

<div>Header</div>
<div>Navigation</div>
<div>Main Content</div>
<div>Footer</div>

Prefer meaningful semantic elements when the role of the content is known.

Mistake 2: Misusing section

A <section> should represent a meaningful thematic grouping. It should not automatically replace every <div>.

Mistake 3: Misusing main

The <main> element should identify the page's primary content.

22. Best Practices

Choose semantic elements according to the purpose of the content.
Use one primary <main> area for the page content.
Use <nav> for important navigation blocks.
Use <section> for meaningful topic groups.
Use <article> for independent content.
Use <aside> for related secondary content.
Use <header> and <footer> where appropriate.
Do not select semantic elements only for their default visual appearance.

23. Practice Example

Create a semantic page containing a header, navigation, main content, two articles, an aside, and a footer.

<header>
    <h1>Learning Portal</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>
</nav>

<main>

    <section>

        <h2>Popular Courses</h2>

        <article>
            <h3>HTML</h3>
            <p>
                Learn HTML fundamentals.
            </p>
        </article>

        <article>
            <h3>CSS</h3>
            <p>
                Learn CSS fundamentals.
            </p>
        </article>

    </section>

    <aside>
        <h3>Related Topics</h3>
        <p>
            JavaScript and Web Development
        </p>
    </aside>

</main>

<footer>
    <p>
        © 2026 Learning Portal
    </p>
</footer>

Summary

Semantic HTML elements describe the purpose of page content. Important elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. Using these elements creates a clearer, more meaningful, and easier-to-maintain HTML structure.

← Previous: Semantic HTML Next: Header →