Semantics - HTML5

In HTML5, new semantic tags were introduced, offering a more meaningful way to structure content compared to generic <div> elements. These semantic tags, such as <header>, <main>, <nav>, <article>, <section>, <aside>, <footer>, <figure>, and <figcaption>, provide context about the content they enclose, improving both readability and accessibility. Web browsers and assistive technologies, such as screen readers, can better interpret and navigate these sections, making websites more user-friendly for individuals with disabilities. Additionally, semantic elements enhance SEO by clarifying the structure of a webpage to search engines.

Element Description Common use
<header> Represents introductory content or navigational links for its parent section. Website headers, including logos and menus.
<main> Specifies the primary content of the document, unique to the page. Main content area of a webpage (enclosed only in <body>).
<nav> Defines a set of navigation links. Menus and navigation bars.
<article> Represents self-contained content that can be independently distributed or reused. Blog posts, news articles, or forum posts.
<section> Groups content into thematic sections, typically with a heading. Chapters or parts of a document.
<aside> Represents content related to the main content but not essential to it. Sidebars, advertisements, or pull quotes.
<footer> Defines footer content for its nearest section or the document. Contact information, copyright notices, and footnotes.
<figure> Encapsulates media content with a caption. Images, diagrams, or illustrations with associated text.
<figcaption> Provides a caption or description for the <figure> element. Text explaining an image or diagram.

Semantic tags give purpose to selected content on the site. <div> tags allow us to arrange, structure, and style the site's content.

How to arrange semantic tags on a blog page?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A sample blog page template using HTML5 semantic tags.">
    <title>Blog page template</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <p>Welcome to my personal blog where I share my thoughts and experiences.</p>
    </header>
    
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
    
    <main>
        <article>
            <h2>[Blog post title]</h2>
            <p>[Blog post content]</p>
            
            <figure>
                <img src="image.jpg" alt="Blog post image">
                <figcaption>A visual representation of the blog post topic.</figcaption>
            </figure>
            
            <section>
                <h3>Comments</h3>
                <article>
                    <h4>[Commenter name]</h4>
                    <p>[Comment #1]</p>
                </article>
                <article>
                    <h4>[Commenter name]</h4>
                    <p>[Comment #2]</p>
                </article>
            </section>
        </article>

        <aside>
            <h3>Related articles</h3>
            <p>Check out more related posts on this topic.</p>
            <ul>
                <li><a href="#related1">Related article 1</a></li>
                <li><a href="#related2">Related article 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>Copyright © My Blog All Rights Reserved</p>
    </footer>
</body>
</html>