<main> - main content of the document
The <main> tag is a semantic tag introduced in HTML5, used to define the main content of a document. It helps browsers and search engines identify the core content of a page while improving accessibility.
Basic Definition of the <main> Tag
The <main> tag represents the main content of a document, which should be directly related to the document's core theme or functionality. A document should typically contain only one <main> tag, and it should not be a child element of other semantic containers (e.g., <article>, <section>, etc.).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<header>Header Content</header>
<main>
<h1>Article Title</h1>
<p>This is the main content of the document...</p>
</main>
<footer>Footer Content</footer>
</body>
</html>
Semantic Role of the <main> Tag
The semantic value of <main> lies in:
- Assistive Technology Recognition: Screen readers prioritize reading the content within
<main>. - SEO Optimization: Search engines treat its content as the core of the page.
- Development Standards: Clearly distinguishes main content from auxiliary content (e.g., navigation bars, ads).
Incorrect Example: Nesting Multiple <main> Tags
<!-- Incorrect Usage -->
<main>
<h1>Part One</h1>
<main> <!-- Nesting not allowed -->
<p>Sub-content</p>
</main>
</main>
Relationship with Other Semantic Tags
Difference from <body>
<body> contains all visible content, while <main> focuses only on the core content. The following structure is a typical combination:
<body>
<nav>Navigation Bar</nav>
<aside>Sidebar</aside>
<main>
<article>Independent Article Content</article>
</main>
</body>
Collaboration with <article>
When the page is article-centric, a common nesting approach is:
<main>
<article>
<h2>How to Learn HTML</h2>
<section>
<h3>Semantic Tags</h3>
<p>Includes tags like main, article, etc...</p>
</section>
</article>
</main>
Practical Application Scenarios
Scenario 1: Blog Post Page
<main>
<article>
<header>
<h1>CSS Grid Layout Guide</h1>
<time datetime="2023-10-01">October 1, 2023</time>
</header>
<div class="content">
<!-- Article Body -->
</div>
</article>
<section class="comments">
<!-- Comment Section -->
</section>
</main>
Scenario 2: E-commerce Product Page
<main>
<div class="product-gallery">
<!-- Product Image Carousel -->
</div>
<section class="product-info">
<h1>Product Name</h1>
<div class="price">$299</div>
<!-- Purchase Button, etc. -->
</section>
</main>
Accessibility Considerations
- ARIA Role: By default, it has the
role="main"attribute, so no additional declaration is needed. - Skip Navigation: A common accessibility practice is to add a skip link before
<main>:
<a href="#main-content" class="skip-link">Skip to Main Content</a>
<main id="main-content">
<!-- Content -->
</main>
Browser Compatibility and Polyfill
All modern browsers support the <main> tag. For older versions like IE9, the following polyfill is required:
<!--[if lt IE 9]>
<script>
document.createElement('main');
</script>
<![endif]-->
Dynamic Content Loading Example
Updating <main> content dynamically via JavaScript:
// Get the main element
const mainElement = document.querySelector('main');
// Simulate AJAX loading
function loadContent(url) {
fetch(url)
.then(response => response.text())
.then(html => {
mainElement.innerHTML = html;
});
}
// Trigger content update on click
document.getElementById('btn-load').addEventListener('click', () => {
loadContent('/api/new-content');
});
Styling the <main> Element
By default, <main> is a block-level element. A typical styling approach:
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Dark mode adaptation */
@media (prefers-color-scheme: dark) {
main {
background: #333;
color: #fff;
}
}
Usage Differences in Frameworks
React Example
function App() {
return (
<div className="app">
<Header />
<main>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</main>
<Footer />
</div>
);
}
Vue Example
<template>
<div class="page">
<app-header />
<main>
<router-view />
</main>
</div>
</template>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
下一篇：<article>-独立内容块
