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 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. It can take a cite attribute that specifies the URL of the source from which the quoted text is taken.

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>