HTML5引入了一系列语义化标签来优化页面结构，main标签就是其中专门用于标记页面主要内容区域的元素，它的出现替代了过去用div配合class标识核心内容的传统方式，让页面结构更清晰易懂。
main标签的核心作用
main标签的核心作用是明确标识出页面中独一无二的核心内容区域，这部分内容是当前页面专属的，不会在其他页面重复出现。它的价值主要体现在两个方面：
- 提升语义化程度：让浏览器、搜索引擎和辅助工具能快速识别页面的核心信息，不需要再通过class名称去推断内容属性。
- 优化可访问性：屏幕阅读器等辅助工具可以通过main标签快速跳过导航、侧边栏等重复内容，直接定位到用户需要的核心信息，提升视障用户的浏览体验。
主要内容区域的界定标准
要正确使用main标签，首先需要明确什么是页面的主要内容区域，符合以下特征的内容才适合放在main标签内：
- 内容是当前页面独有的，不会在网站的其他页面重复出现，比如文章详情、商品介绍、表单内容等。
- 是页面的核心信息载体，用户访问当前页面的主要目的就是获取这部分内容。
- 不包含网站通用的重复模块，比如导航栏、页脚、侧边栏、搜索框、版权声明等。
main标签的使用规范
使用main标签时需要遵循以下规范，避免出现语义错误：
- 一个页面中只能出现一个main标签，因为页面核心内容区域是唯一的，多个main标签会导致语义混乱。
- main标签不能直接放在<header>、<footer>、<article>、<aside>、<nav>等语义化标签内部，它和这些标签是平级的关系。
- 如果页面使用了<article>标签包裹独立的内容块，main标签可以包含多个<article>，只要这些文章都是当前页面的核心内容。
正确与错误的使用示例
下面通过代码示例展示main标签的正确和错误用法：
正确的使用方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章详情页</title>
</head>
<body>
<header>
<nav>网站导航</nav>
</header>
<!-- 主要内容区域 -->
<main>
<article>
<h1>HTML5 main标签使用教程</h1>
<p>本文详细介绍main标签的用法...</p>
</article>
<section>
<h2>相关推荐</h2>
<p>推荐相关技术文章...</p>
</section>
</main>
<aside>侧边栏广告</aside>
<footer>版权声明</footer>
</body>
</html>
错误的使用方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>错误示例</title>
</head>
<body>
<header>
<nav>
<!-- 错误：main不能放在nav内部 -->
<main>导航内容</main>
</nav>
</header>
<!-- 错误：一个页面出现多个main -->
<main>内容1</main>
<main>内容2</main>
<footer>
<!-- 错误：main不能放在footer内部 -->
<main>页脚内容</main>
</footer>
</body>
</html>
main标签和div标签的区别
很多开发者会疑惑main标签和div标签的差异，两者的核心区别如下：
| 对比维度 | main标签 | div标签 |
|---|---|---|
| 语义性 | 有明确语义，代表页面主要内容区域 | 无语义，仅作为通用容器 |
| 使用限制 | 一个页面只能有一个，不能嵌套在特定语义标签内 | 无使用数量限制，可任意嵌套 |
| 辅助工具识别 | 辅助工具可快速定位核心内容 | 辅助工具无法识别其承载的内容属性 |
| SEO价值 | 帮助搜索引擎识别核心内容，提升相关度 | 无额外SEO价值 |
常见问题解答
如果页面有多个核心内容块，怎么使用main标签
如果页面有多个同属核心的内容块，比如博客首页的多篇文章列表，这些文章都是当前页面的核心内容，那么可以把所有文章都放在同一个main标签内，用<article>标签分别包裹每一篇文章即可。
main标签需要配合role属性使用吗
在支持HTML5的浏览器中，main标签会自动映射为role="main"的语义，不需要手动添加role属性。如果是需要兼容非常老旧的浏览器，可以手动添加role="main"来提升兼容性，但现代开发中一般不需要额外添加。