Topic 30 of 57 5. HTML Layout and Structure Interactive Tutorial

HTML Main Tag: Syntax, Uses, and Examples

10 mins read Last updated: 12 Nov 2026 14,900 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What is the role of the HTML <main> tag and what rules govern its usage?

Direct Answer & Overview

The HTML

tag designates the dominant, central content unique to an individual document. It directly excludes content repeated across multiple pages such as site headers, navigation bars, search bars, copyright notices, and global sidebars. A valid page must only contain one visible

tag.

Comprehensive Step-by-Step Concepts

1) Purpose and Centrality: The

tag informs browsers, search engines, and screen readers of the central core topic of the page, cutting through peripheral boilerplate. 2) The Strict Singularity Rule: A document must not have more than one

element without the 'hidden' attribute. Having multiple visible

tags violates W3C validation. 3) What Must NOT Be Inside

: Never place global headers, primary navigation menus, global footers, legal copyrights, or site-wide advertising banners inside

. 4) Web Accessibility Landmark: Assistive technologies identify

as the primary 'main' landmark. Screen reader users often configure their software to skip directly to

, bypassing dozens of repetitive navigation links. 5) Skip to Main Content Link: For superior keyboard accessibility, developers add a visually hidden 'Skip to main content' anchor link at the very top of the () that focuses

when pressing Tab.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Element Architecture</title>
    <style>
        .skip-link { position: absolute; top: -40px; left: 0; background: #2563eb; color: #fff; padding: 8px; z-index: 100; text-decoration: none; }
        .skip-link:focus { top: 0; }
    </style>
</head>
<body>
    <!-- Accessible Skip Link for Keyboard Users -->
    <a href="#main-content" class="skip-link">Skip to Main Content</a>

    <!-- Header & Navigation (NOT in main) -->
    <header>
        <nav aria-label="Main Site Navigation">
            <a href="/">Home</a> | <a href="/about">About</a> | <a href="/blog">Blog</a>
        </nav>
    </header>

    <!-- Unique, Primary Page Content: Strictly ONE per page -->
    <main id="main-content">
        <h1>Exploring Deep Learning with Python</h1>
        <p>This article explores convolutional neural networks and tensor operations...</p>
    </main>

    <!-- Footer (NOT in main) -->
    <footer>
        <p>&copy; 2026 TechInsights. All rights reserved.</p>
    </footer>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Include exactly one visible

tag per page. Exclude global navigation and footers, and provide an accessible 'Skip to Content' link.

Common Technical & Interview Questions

Q1: Can a
element be placed inside an
or
?

A1: No. A

element cannot be a descendant of an

Q2: Why is the 'Skip to main content' link considered a WCAG 2.1 Level A requirement?

A2: Keyboard and screen reader users would otherwise have to press the Tab key 20-50 times on every single page load just to bypass the navigation menu to reach the article content.

Q3: Does the
tag replace the need for ARIA role="main"?

A3: In all modern browsers,

carries an implicit ARIA role of 'main'. Adding role="main" is only needed for legacy support with very old assistive devices.

All HTML Topics

Previous TopicHTML Footer Tag: Uses, Structure, and Code Examples

Next TopicHTML Head Tag: Structure, Elements, and Examples