别让网页结构“跑偏”：深入理解 HTML <main> 标签的正确用法

在构建现代网页时，Header（页头）和 Footer（页脚）往往最容易被标准化处理，唯独中间那块核心区域，很多开发者习惯性地扔进一个通用的 <div id="content"> 里了事。直到面对无障碍访问审核，或者 SEO 优化遇到瓶颈时，才意识到这块“万能容器”其实埋下了隐患。这就是 <main> 标签登场的关键时刻。

它不仅仅是一个包裹内容的盒子，更是浏览器、屏幕阅读器和搜索引擎判断“页面核心价值在哪”的路标。

到底什么是 <main>？

简单来说，<main> 代表了文档中唯一的、主要的内容区域。想象你在读一份报纸，报头是 Logo 和导航，版尾是版权信息，而中间那些具体的新闻文章、产品详情，才是用户真正想看的“正文”。

在代码层面，你需要把所有重复出现的导航栏、广告侧边栏剔除出去，剩下的那个独一无二的核心内容区，就该交给 <main>。如果把你的网页比作一部电影，header 是片头曲，footer 是演职员表，那么 <main> 就是正片本身。

两个必须遵守的铁律

用好这个标签并不难，但有两个原则一旦违反，语义化就会失效，甚至适得其反。

第一，整个页面只能有一个 <main>。 这一点经常被多列布局误导。有些开发者会在左侧放产品列表，右侧放推荐内容，然后给这两块都套上 <main>。这是错误的。页面应该只有一个“主角”，哪怕你的主内容分为几个板块（比如文章标题、正文、评论区），它们都应该包裹在同一个 <main> 标签内。如果多个页面复用同一个模板，每个单独的 HTML 文件里只能出现一次。

第二，不要在 <main> 里包含通用导航或重复元素。 不要把整个 <nav> 放进 <main> 里，也不要放入全站统一的侧边栏广告。如果你的网站是每个页面都有相同的推荐位，这些属于重复内容，不应该计算在唯一的主内容之内。把它们留给 <aside> 或者直接放在 <main> 之外，保持结构的纯净。

为什么值得你多敲一行代码？

你可能会问，用 <div class="main-content"> 效果不是一样吗？从渲染样式上看确实没区别，但在机器眼中差别巨大。

对于搜索引擎而言，结构化数据有助于更快抓取重点。当爬虫识别到 <main> 时，它会降低对周边元素的权重评估，优先聚焦其中的关键词和信息密度。这虽然不是决定排名的直接因素，但在竞争激烈的搜索结果中，它是提升内容相关性的隐性加分项。

更关键的是无障碍体验。视障用户依赖屏幕阅读器浏览网页，他们可以使用快捷键快速跳转到 <main> 区域，跳过成千上万个链接组成的导航栏。如果你忽略了这点，相当于在数字世界里人为设置了一道障碍。现在国内越来越多的政府和企业网站开始强制要求通过无障碍测试，规范的语义标签是过审的基础。

常见误区与补救建议

在实际重构旧项目时，常发现两种极端情况：一种是滥用，把整张页面的所有 body 下的东西都塞进去了；另一种是缺失，完全沿用几十年前的 table 或者纯 div 布局。

修正思路：

1. 定位边界：先找出页面中不再变化的区域（如顶部菜单、底部联系方式）。
2. 隔离包裹：将这些非核心区域移出，确保剩余部分构成了完整的业务逻辑流。
3. 添加标签：给这部分核心代码加上 <main>。

如果是单页应用（SPA），要注意动态切换路由后，DOM 结构依然要维持单一 <main> 的存在，不能因为组件复用就叠加了多个相同标签。此时可以通过 aria-live 属性告知辅助技术内容已更新。

写在最后

前端开发发展到今天，拼的不是谁写的 CSS 动画更炫，而是代码是否具备长期的可维护性和包容性。<main> 标签虽然只是 HTML5 中普通的一员，但它承载的是“以用户为中心”的结构思维。

下次新建页面模板时，试着把默认的 <div> 换成语义化的 <main>。这看似微不足道的改动，既是对标准的尊重，也是对未来兼容性的投资。好的代码应当像好建筑一样，不仅外表美观，地基更要稳固清晰。