HTML Semantics

Example

<body>
    <header>
        <h1>Codementrix</h1>
        <nav aria-label="Main navigation">
            <a href="/">Home</a>
            <a href="/blog">Blog</a>
        </nav>
    </header>

    <main>
        <h1>Welcome to Codementrix</h1>
        <p>Explore programming tutorials and courses.</p>
    </main>

    <footer>
        <p>Copyright 2026 Codementrix.</p>
    </footer>
</body>

Important Rules

• Normally, a page should have one visible main element identifying its primary content.
• The main element should not be placed inside header, footer, nav, article, aside or another main element.
• Do not use main simply as a generic styling container.
• Provide a clear way to reach the main content, such as a skip link, on pages where repeated navigation would otherwise be tedious for keyboard users.

Skip Link Example

<a href="#main-content" class="skip-link">
    Skip to main content
</a>

<header>
    <nav aria-label="Main navigation">
        <a href="/">Home</a>
        <a href="/courses">Courses</a>
    </nav>
</header>

<main id="main-content">
    <h1>HTML5 Mastery</h1>
    <p>Start learning semantic HTML.</p>
</main>

A skip link can be styled so that it becomes visible when focused. This helps keyboard users bypass repeated navigation.

7. The footer Element

The footer element represents footer information for the nearest relevant sectioning content or for the page as a whole.

Example: Website Footer

<footer>
    <p>&copy; 2026 Codementrix. All rights reserved.</p>

    <nav aria-label="Footer navigation">
        <a href="/privacy">Privacy Policy</a>
        <a href="/terms">Terms and Conditions</a>
        <a href="/contact">Contact</a>
    </nav>
</footer>

Example: Article Footer

<article>
    <h2>Introduction to HTML</h2>
    <p>HTML structures content on the web.</p>

    <footer>
        <p>Written by the Codementrix team.</p>
    </footer>
</article>

The first footer provides page-level information. The second provides information associated with the article.

Important Rules

• A page can contain a page footer and footers belonging to individual articles or sections.
• A footer does not have to appear at the physical bottom of the browser window.
• Footer content may include authorship, related links, copyright information and contact details.
• A footer does not automatically create a special footer landmark in every context; its accessibility semantics depend on where it appears.

8. The article Element

The article element represents a self-contained composition that could be distributed or reused independently of the surrounding page.

Common examples include:

• Blog posts
• News articles
• Forum posts
• Product reviews
• Community discussions
• Independent tutorials or course descriptions

Example: Blog Article

<article>
    <header>
        <h2>How to Learn HTML5</h2>
        <p>
            Published on
            <time datetime="2026-10-17">October 17, 2026</time>
        </p>
    </header>

    <p>
        HTML5 provides the elements needed to structure modern web content.
    </p>

    <footer>
        <p>Category: Web Development</p>
    </footer>
</article>

The article has its own heading, content and footer. It remains understandable as an individual composition.

Can Articles Be Nested?