Semantics - HTML5

HTML5 introduced semantic block tags that give meaningful structure to content, unlike generic <div> elements. These tags clarify the role of each section, improving readability, accessibility for assistive technologies, and SEO by helping browsers and search engines interpret the page more effectively.

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.
<blockquote> Represents a section that is quoted from another source, typically displayed as an indented block. Long quotations from articles, books, or external sources.

Semantic tags give purpose to selected content on the website. <div> tags allow us to arrange, structure, and style the 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>