您现在的位置是：网站首页 > <main>-文档主要内容文章详情
<main>-文档主要内容
陈川
【
HTML
】
55388人已围观
3893字
<main> 是 HTML5 中引入的一个语义化标签，用于定义文档的主要内容。它帮助浏览器和搜索引擎更好地理解页面结构，同时提升无障碍访问体验。以下是关于 <main> 标签的详细解析。
<main> 标签的基本定义
<main> 标签表示文档的主体内容，通常包含页面的核心信息。一个文档中应当只有一个 <main> 标签，且不能作为 <article>、<aside>、<footer>、<header> 或 <nav> 的子元素出现。它的基本语法如下：
<main>
<!-- 主要内容放在这里 -->
</main>
<main> 标签的语义作用
<main> 的主要作用是明确标识页面的核心内容区域。对于屏幕阅读器和其他辅助技术，这个标签可以帮助用户快速定位到页面的主要部分，而无需遍历导航栏、页脚等非核心内容。
例如，一个博客页面的结构可能如下：
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>最新文章</h2>
<p>这里是文章内容...</p>
</article>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
在这个例子中，<main> 包裹了文章内容，而页眉和页脚则放在 <header> 和 <footer> 中。
<main> 标签的使用场景
<main> 适用于任何需要突出核心内容的场景。以下是几个典型用例：
- 单页应用（SPA）：在动态加载内容的页面中，
<main>可以作为内容更新的容器。 - 文档或文章页面：如博客、新闻网站等，核心内容通常是一篇文章或一组文章。
- 仪表盘或控制面板：主要数据显示区域可以用
<main>包裹。
以下是一个单页应用的示例：
<body>
<nav>
<button onclick="loadHome()">首页</button>
<button onclick="loadAbout()">关于</button>
</nav>
<main id="content">
<!-- 动态加载的内容会在这里显示 -->
</main>
<script>
function loadHome() {
document.getElementById('content').innerHTML = '<h1>欢迎来到首页</h1>';
}
function loadAbout() {
document.getElementById('content').innerHTML = '<h1>关于我们</h1>';
}
</script>
</body>
<main> 与其他语义化标签的关系
<main> 通常与其他 HTML5 语义化标签配合使用，例如：
<header>：页眉，包含导航或标题。<footer>：页脚，包含版权信息或联系方式。<aside>：侧边栏，包含补充内容。<article>：独立的文章内容。
以下是一个更复杂的结构示例：
<body>
<header>
<h1>网站标题</h1>
</header>
<nav>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
</ul>
</nav>
<main>
<article>
<h2>文章标题</h2>
<p>文章正文...</p>
</article>
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#link1">链接1</a></li>
</ul>
</aside>
</main>
<footer>
<p>联系方式：example@example.com</p>
</footer>
</body>
<main> 的无障碍访问优势
对于使用屏幕阅读器的用户，<main> 标签可以显著提升体验。屏幕阅读器会优先朗读 <main> 中的内容，并允许用户通过快捷键直接跳转到核心区域。例如，JAWS 屏幕阅读器支持使用 Q 键快速导航到 <main> 区域。
以下是一个无障碍优化的示例：
<body>
<a href="#maincontent" class="skip-link">跳过导航</a>
<header>
<nav>
<!-- 导航链接 -->
</nav>
</header>
<main id="maincontent" tabindex="-1">
<h1>核心内容标题</h1>
<p>这里是页面的主要内容。</p>
</main>
</body>
<main> 的浏览器支持与兼容性
<main> 标签在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器（如 IE11），可以通过以下方式提供兼容性支持：
<!-- 在 IE11 中为 main 标签添加样式 -->
<script>
document.createElement('main');
</script>
<style>
main {
display: block;
}
</style>
<main> 的样式与布局
<main> 默认是一个块级元素，可以通过 CSS 灵活控制其样式。例如：
<main style="max-width: 800px; margin: 0 auto; padding: 20px;">
<h1>响应式布局示例</h1>
<p>内容居中显示，最大宽度为 800px。</p>
</main>
<main> 在框架中的使用
在现代前端框架（如 React、Vue 或 Angular）中，<main> 通常作为根组件的一部分。以下是 React 中的一个示例：
function App() {
return (
<div className="App">
<header>
<h1>React 应用</h1>
</header>
<main>
<p>这里是应用的核心内容。</p>
</main>
</div>
);
}
<main> 的常见错误用法
- 多个
<main>标签：一个页面中只能有一个<main>。<!-- 错误示例 --> <main>内容1</main> <main>内容2</main> - 嵌套在
<article>或<aside>中：<!-- 错误示例 --> <article> <main>...</main> </article> - 忽略无障碍优化：未提供跳过导航的链接或未设置
tabindex。
<main> 与 <div> 的区别
虽然 <main> 和 <div> 都是容器标签，但 <main> 具有明确的语义，而 <div> 仅用于样式或脚本的钩子。以下是一个对比：
<!-- 使用 div（无语义） -->
<div id="content">
<h1>标题</h1>
<p>内容...</p>
</div>
<!-- 使用 main（有语义） -->
<main>
<h1>标题</h1>
<p>内容...</p>
</main>
<main> 在 SEO 中的作用
搜索引擎会优先索引 <main> 中的内容，因此合理使用 <main> 可以提升页面的 SEO 效果。确保核心关键词和内容放在 <main> 内，而非导航或页脚中。
上一篇： Stream的基本概念
下一篇： <article>-独立内容块
