应使用且推荐使用标签,因其具有明确语义:标识页面唯一主体内容,提升SEO、无障碍访问及代码可读性;每页仅限一个,不可嵌套或置于其他语义元素内;兼容IE11及以下只需加main{display:block}。
ain\"> 有什么区别?">
标签应该用,而且推荐用 —— 它不是可有可无的装饰,而是有明确语义和实际价值的 HTML5 元素。
它和 的核心区别是语义,不是外观
告诉浏览器、屏幕阅读器和搜索引擎:“这部分是页面的主体内容,其他都是辅助(比如导航、侧边栏、页脚)”。 没有这种含义,它只是个通用容器,什么也不说明。
- 搜索引擎可能更准确理解页面重点,有助于 SEO
- 视障用户用读屏软件时,能一键跳转到主要内容,体验明显更好
-
代码可读性更高:别人一眼看出哪块是主内容,不用靠 class 名或注释猜
使用规则很明确,不能乱套
不是“多放几个更清晰”,它在每个页面中只能出现一次,且不能嵌套,也不能放在 、
- ✅ 正确:直接包住整页独一无二的主体内容(比如文章正文、产品列表、表单主区域)
- ❌ 错误:在一个
里再套一个
- ❌ 错误:页面顶部导航用
,中间内容又用一个
不支持老浏览器?其实影响很小
IE11 及更早版本不识别 ,但不会报错或崩掉 —— 它就当普通标签处理,样式照常生效。只要给它加一句 CSS:main { display: block; },就能兼容所有旧浏览器。
- 现代项目基本都用构建工具或重置样式,这条声明通常已内置
- 真正需要兼容 IE9 以下的场景现在极少见,不必为此放弃语义化
IE11 及更早版本不识别
使用规则很明确,不能乱套
不支持老浏览器?其实影响很小










