HTML 的＜main＞元素

1. 什么是 <main> 元素

<main> 是 HTML5 新增的语义化标签，用于标识页面中最主要、最核心的内容区域 。一个页面通常只有一个 <main>，它包裹的是当前页面独有的主体内容，而不是导航、侧边栏、页脚等重复出现的部分。

html 复制代码

<body>
  <header>网站导航</header>
  <main>
    <h1>文章标题</h1>
    <p>这里是页面的核心内容。</p>
  </main>
  <footer>版权信息</footer>
</body>

2. 为什么使用 <main>

使用 <main> 有三大好处：

提升可访问性：屏幕阅读器可以快速跳转到主体内容，方便视障用户浏览。
利于 SEO：搜索引擎能更准确地识别页面核心内容，有助于关键词排名。
语义清晰：代码结构一目了然，开发者能快速定位主体区域。

3. 使用规则与注意事项

使用 <main> 时需遵守以下规则：

一个页面只能有一个 <main> 元素。
<main> 不能作为 <header>、<footer>、<article>、<aside>、<nav> 等元素的后代。
<main> 内部可以包含 <article>、<section>、<div> 等元素。

html 复制代码

<!-- 正确用法 -->
<main>
  <article>
    <h2>博客正文</h2>
    <p>内容...</p>
  </article>
</main>

<!-- 错误用法：main 嵌套在 article 内部 -->
<article>
  <main>
    <p>这是错误的写法。</p>
  </main>
</article>

4. 与 <div> 的区别

很多初学者会问：<main> 和 <div> 有什么区别？

对比项	`<main>`	`<div>`
语义	有明确语义，表示主体内容	无语义，仅用于布局
可访问性	辅助技术可识别	无特殊作用
数量限制	每页仅一个	无限制
代码可读性	高	低

简单来说，<main> 是「有意义的 div」，它告诉浏览器和开发者：这里是页面的核心。

5. 浏览器兼容性

<main> 元素在现代浏览器中均得到良好支持，包括 Chrome、Firefox、Safari、Edge 等。对于极老旧的浏览器（如 IE 11），可以通过以下 CSS 进行降级处理：

css 复制代码

main {
  display: block;
}

6. 总结

<main> 是 HTML5 语义化布局中不可或缺的元素。合理使用它，能让页面结构更清晰、可访问性更好、SEO 更友好。在实际开发中，请记住：一个页面只有一个 <main>，它只属于主体内容。

HTML 的 ＜main＞ 元素