Semantic HTML5

Semantic HTML5

Semantic HTML means using HTML elements according to the meaning and purpose of the content they contain.

Semantic elements clearly communicate the structure of a webpage to developers, browsers, search engines, and assistive technologies.

Example

<header>
    <h1>Technology Academy</h1>
</header>

<nav>
    <a href="/courses">Courses</a>
    <a href="/about">About</a>
</nav>

<main>

    <article>
        <h2>Learning HTML</h2>
        <p>HTML provides the structure of a webpage.</p>
    </article>

</main>

<footer>
    <p>Copyright 2026</p>
</footer>

1. Semantic vs Non-Semantic Elements

Semantic elements describe the purpose of their content, whereas generic elements such as div and span do not convey a specific meaning.

2. The <header> Element

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

It commonly contains headings, logos, introductory text, search controls or navigation-related content.

<header>

    <h1>Technology Academy</h1>

    <p>Learn modern web technologies.</p>

</header>

3. The <nav> Element

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

<nav>

    <a href="/">Home</a>
    <a href="/courses">Courses</a>
    <a href="/tutorials">Tutorials</a>
    <a href="/contact">Contact</a>

</nav>

Navigation can be used for primary site navigation, a table of contents, or other major navigation blocks.

4. The <main> Element

The <main> element contains the dominant content of the webpage.

<main>

    <h1>HTML Tutorial</h1>

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

</main>

5. The <section> Element

The <section> element represents a thematic grouping of content.

A section will generally have a heading that describes its subject.

<section>

    <h2>HTML Basics</h2>

    <p>
        HTML provides the structural foundation of webpages.
    </p>

</section>

6. The <article> Element

The <article> element represents a self-contained composition that can independently stand on its own.

Typical examples include:

• Blog posts
• News articles
• Forum posts
• Product reviews
• Independent educational articles

<article>

    <h2>Introduction to HTML</h2>

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

</article>

7. section vs article

8. The <aside> Element

The <aside> element represents content that is indirectly related to the main content.

Examples include:

• Sidebars
• Related articles
• Author information
• Additional resources
• Related advertisements

<aside>

    <h2>Related Tutorials</h2>

    <ul>
        <li><a href="/css">CSS Tutorial</a></li>
        <li><a href="/javascript">JavaScript Tutorial</a></li>
    </ul>

</aside>

9. The <footer> Element

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

It may contain copyright information, contact details, related links or author information.

<footer>

    <p>&copy; 2026 Technology Academy</p>

    <a href="/privacy">Privacy Policy</a>

</footer>

10. The <figure> Element

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

<figure>

    <img src="html-structure.png"
         alt="Diagram showing the structure of an HTML document">

</figure>

11. The <figcaption> Element

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

<figure>

    <img src="html-structure.png"
         alt="Diagram showing HTML document structure">

    <figcaption>
        Basic structure of an HTML document.
    </figcaption>

</figure>

12. The <time> Element

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

<p>
    The course begins on
    <time datetime="2026-09-01">1 September 2026</time>.
</p>

The datetime attribute provides a machine-readable representation.

13. The <details> and <summary> Elements

These elements provide a native HTML mechanism for displaying expandable information.

<details>

    <summary>What is HTML?</summary>

    <p>
        HTML is the standard markup language used
        to structure webpages.
    </p>

</details>

The user can expand or collapse the content without requiring JavaScript for the basic interaction.

14. The <mark> Element

The <mark> element represents text that is highlighted or marked because of its relevance in the current context.

<p>
    The most important concept is
    <mark>semantic HTML</mark>.
</p>

15. The <address> Element

The <address> element represents contact information for the nearest article or the overall document.

<address>

    Written by Alex Morgan.<br>
    Email:
    <a href="mailto:alex@example.com">
        alex@example.com
    </a>

</address>

16. Complete Semantic HTML5 Page

A professional webpage can combine several semantic elements to create a meaningful document structure.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Learning Centre</title>

</head>

<body>

    <header>

        <h1>HTML Learning Centre</h1>

        <nav>

            <a href="/">Home</a>
            <a href="/courses">Courses</a>
            <a href="/tutorials">Tutorials</a>
            <a href="/contact">Contact</a>

        </nav>

    </header>


    <main>

        <section>

            <h2>HTML Fundamentals</h2>

            <article>

                <h3>What is HTML?</h3>

                <p>
                    HTML provides the structure of webpages.
                </p>

            </article>

            <article>

                <h3>What is Semantic HTML?</h3>

                <p>
                    Semantic HTML gives meaningful structure
                    to webpage content.
                </p>

            </article>

        </section>


        <aside>

            <h2>Related Topics</h2>

            <ul>

                <li>HTML Forms</li>
                <li>HTML Tables</li>
                <li>HTML Accessibility</li>

            </ul>

        </aside>

    </main>


    <footer>

        <p>&copy; 2026 HTML Learning Centre</p>

    </footer>

</body>

</html>

17. Understanding the Page Structure

18. Semantic HTML and Accessibility

Semantic HTML helps assistive technologies understand the structure and purpose of webpage content.

For example, a screen reader can identify a <nav> element as a navigation region rather than treating it as an arbitrary block of content.

Benefits

• Improves document structure.
• Helps assistive technologies interpret content.
• Improves keyboard navigation and orientation.
• Makes webpages easier to maintain.
• Communicates meaning more clearly to developers.

19. Semantic HTML and SEO

Semantic HTML provides meaningful structure that can help search engines better understand the organization and context of webpage content.

However, semantic HTML is not a guarantee of higher search rankings. SEO depends on many factors, including content quality, accessibility, performance, links, metadata and overall site quality.

20. Semantic Elements vs <div>

Non-Semantic Approach

<div class="header">

    <div class="navigation">
        ...
    </div>

</div>

<div class="content">
    ...
</div>

<div class="footer">
    ...
</div>

Semantic Approach

<header>

    <nav>
        ...
    </nav>

</header>

<main>
    ...
</main>

<footer>
    ...
</footer>

The second version communicates the document structure directly through HTML elements rather than relying only on class names.

21. Is <div> Still Useful?

Yes. Semantic HTML does not eliminate the need for <div>.

Use <div> when no more meaningful semantic element accurately describes the content and a generic container is required for styling, scripting or layout.

<div class="card-grid">

    <article>
        <h2>HTML</h2>
    </article>

    <article>
        <h2>CSS</h2>
    </article>

</div>

22. Common Semantic HTML Mistakes

• Using <div> for every part of the webpage.
• Using <section> without a meaningful thematic purpose.
• Using <article> for content that is not independently meaningful.
• Placing every group of links inside <nav>.
• Using headings merely to make text appear larger.
• Assuming semantic HTML alone guarantees better SEO.
• Using <header> and <footer> only for visual styling.

23. Interview Questions

24. Exam Questions

25. Practical Challenge

Create a complete educational webpage using only appropriate semantic HTML5 elements.

Your webpage should contain:

• A header with the website title.
• A nav containing major navigation links.
• A single main element.
• At least two section elements.
• At least two independent article elements.
• An aside containing related resources.
• A figure with an image and figcaption.
• A footer containing copyright information.

27. Semantic HTML Checklist

• Use header for introductory content.
• Use nav for major navigation.
• Use main for the primary content.
• Use section for thematic groups.
• Use article for self-contained content.
• Use aside for complementary content.
• Use footer for footer information.
• Use figure + figcaption for self-contained visual content with a caption.
• Use semantic elements because they accurately represent the content, not merely because of their default styling.
• Use div when no more meaningful semantic element is appropriate.