主要内容标签 - <main>

什么是 <main> 标签？

<main> 是HTML5引入的语义化标签，用于定义文档的主要内容区域。它应该包含与文档主题直接相关的内容，排除页头、页脚、导航等重复出现的内容。

基本语法

html 
<main>
  <!-- 主要内容 -->
</main>

典型用法

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>网站标题</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <!-- 导航菜单 -->
    </nav>
  </header>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
    
    <section>
      <h2>相关内容</h2>
      <p>相关内容...</p>
    </section>
  </main>
  
  <footer>
    <p>版权信息</p>
  </footer>
</body>
</html>

全局属性

<main> 标签支持所有HTML全局属性：

属性 描述
class 为元素指定一个或多个类名
id 为元素指定唯一ID
style 为元素指定内联样式
title 提供有关元素的额外信息

最佳实践

  1. 唯一使用：一个文档中只能有一个 <main> 元素，确保主要内容的唯一性

  2. 正确嵌套：<main> 应该是 <body> 的直接子元素，或者嵌套在一个语义化区块内

  3. 排除重复内容：不要在 <main> 中包含页头、页脚、导航等在多个页面重复出现的内容

  4. 增强可访问性：使用 <main> 标签可以帮助屏幕阅读器快速定位到页面的主要内容

浏览器兼容性

  • Chrome 26+
  • Firefox 21+
  • Safari 7+
  • Opera 16+
  • IE 12+

总结

<main> 标签是HTML5中最重要的语义化标签之一，它提供了明确的主要内容标识，有助于：

  • 提高页面的可访问性，让辅助技术用户快速找到核心内容
  • 改善搜索引擎优化，使搜索引擎更好地理解页面主题
  • 增强代码的可读性和可维护性
  • 提供清晰的页面结构，便于未来的开发和维护
最后更新：2026-02-07