HTML <main> main tag
The <main> tag in HTML is used to define the primary content of a webpage. This content is unique to the page and excludes elements that repeat across pages like headers, footers, sidebars, and navigation menus. The <main> tag improves accessibility by helping assistive technologies (like screen readers) and search engines understand where the core content of the page begins and ends.
Key Characteristics:
- Semantic: The
<main>element provides semantic meaning to the structure of a page by indicating where the main content resides. - Accessibility: Assistive technologies can quickly skip to the main content, enhancing navigation for users with disabilities.
- One per Page: Only one
<main>element should be used per page, as it represents the main content. It should not be nested within other content sectioning elements like<article>,<aside>,<header>, or<footer>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to My Website</h2>
<p>This is the main content of the page. It contains important information specific to this webpage.</p>
</main>
<footer>
<p>Footer content goes here.</p>
</footer>
</body>
</html>
Key Points:
- Primary Content: The content inside the
<main>tag should be unique to the page and critical for its purpose. - Does Not Contain: The
<main>element should not include content like headers, footers, sidebars, or other elements that are repeated across pages. - Browser Support: All modern browsers support the
<main>tag, and it is recognized by screen readers for better accessibility.
In essence, the <main> tag is a semantic element that identifies the main content of a web page, making it an essential tool for structuring HTML documents, improving accessibility, and providing a clear structure for SEO.