main标签是html5中定义网页唯一主要内容区域的语义化标签，优于div因为它能明确告诉浏览器和辅助技术核心内容位置；2. 它应只包含页面独特内容如文章正文或产品列表，不可放导航栏、页脚等重复元素；3. 正确用法是在body内使用一个main标签包裹主内容，常见错误包括多main标签、嵌套错误或用div替代main。

main 标签就像你网页内容的主舞台，它定义了文档的主要内容。一个页面通常只有一个 main 标签，它不应该包含任何在不同页面重复的内容，比如导航栏、页脚或侧边栏。 简单来说，它圈定了你网页上最重要的、独一无二的那部分。

解决方案 main 标签在 HTML5 中扮演着至关重要的角色，它不仅提升了网页的语义化程度，还有助于改善可访问性。

为什么需要 main 标签？它比 div 更好吗？

main 标签的出现，主要是为了解决过去开发者滥用 div 标签带来的语义模糊问题。 以前，我们可能会用 <div id="content"> 来表示网页的主要内容区域，但这种方式对于机器（比如搜索引擎、屏幕阅读器）来说，并不具备明确的语义。<img src="https://img.php.cn/upload/article/001/221/864/175318272596769.png" alt="html 中 main 标签作用 html 中 main 标签的使用场景"><p><code>main 标签则直接告诉浏览器和辅助技术，这部分是页面的核心内容。 这对于提升网站的可访问性至关重要，尤其是对于使用屏幕阅读器的用户，他们可以快速定位到页面的主要内容，而无需遍历整个文档。

立即学习“前端免费学习笔记（深入）”；

此外，使用 main 标签也有助于搜索引擎更好地理解网页结构，从而可能提升网站的 SEO 表现。 虽然搜索引擎已经很智能，能够通过算法分析网页内容，但明确的语义化标签无疑能提供额外的线索，帮助它们更准确地索引页面。

那么，main 标签就一定比 div 好吗？ 这取决于你的使用场景。 如果你只是需要一个通用的容器来包裹一些元素，并且没有特别的语义需求，那么 div 仍然是一个不错的选择。 但如果你想要明确地表示页面的主要内容区域，那么 main 标签是更合适的选择。

main 标签里应该放什么？什么不应该放？

main 标签里应该放置那些能够代表页面核心主题的内容。 这可能是一篇文章的正文、一个产品列表、一个表单，或者任何你认为对于用户来说最重要的信息。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

需要注意的是，main 标签不应该包含在多个页面重复出现的内容，比如导航栏、页脚、侧边栏、logo 等。 这些内容应该放在 header、footer、aside 等语义化标签中，或者使用 div 标签包裹。

另外，一个页面通常只应该有一个 main 标签。 虽然 HTML5 规范允许存在多个 main 标签，但前提是它们必须被 hidden 属性隐藏。 在实际开发中，我们很少会遇到需要使用多个 main 标签的情况。

如何正确使用 main 标签？有哪些常见的错误用法？

正确使用 main 标签非常简单，只需要将其放置在 标签内，并将页面的主要内容包裹起来即可。

<body>
  <header>
    <!-- 导航栏、logo 等 -->
  </header>

  <main>
    <!-- 页面的主要内容 -->
    <h1>文章标题</h1>
    <p>文章正文...</p>
  </main>

  <footer>
    <!-- 页脚信息 -->
  </footer>
</body>

常见的错误用法包括：

• 在一个页面中使用多个可见的 main 标签。
• 将 main 标签放置在 header、footer、aside 等标签内。
• 在 main 标签中包含重复出现在多个页面上的内容。
• 忘记使用 main 标签，仍然使用 div 标签来表示页面的主要内容。

避免这些错误用法，可以确保你的网页结构清晰、语义明确，从而提升网站的可访问性和 SEO 表现。