HTML 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.