HTML5语义化标签是原生支持的元素,非框架;包括header、nav、main、article、section、aside、footer,须按内容角色正确使用,避免误用div或嵌套错误。

HTML5 的语义化标签不是“框架”,而是原生 HTML 元素,浏览器原生支持,无需任何库或框架。用错概念容易在项目里误配 polyfill 或强行套用 JS 框架逻辑。
哪些标签算语义化?别把 div 当语义标签用
语义化标签的核心是「表达内容角色」,而非视觉样式。浏览器、屏幕阅读器、搜索引擎靠这些标签理解页面结构。
-
header:表示一个区域的页眉(不一定是整个页面顶部,可嵌套在article或section内) -
nav:专指**主导航链接集合**,不是所有链接都该放这里(比如页脚版权旁的“关于我们”链接通常不算nav) -
main:页面中**唯一**的主体内容容器,每个页面只能有一个,且不能出现在article、aside、footer、header、nav内部 - 其他常用语义标签:
article(独立内容单元)、section(主题分组)、aside(附属信息)、footer(区域尾部)
错误写法示例(常见于早期迁移项目):
这类写法失去语义,也削弱了无障碍支持能力。
立即学习“前端免费学习笔记(深入)”;
header 和 nav 能嵌套吗?怎么嵌才合理
能嵌套,但必须符合内容逻辑。常见误区是把 nav 当作“导航栏组件”硬塞进 header,而忽略它是否真是主导航。
- 典型合理结构:
header包含站点 logo + 一个nav(主菜单),再加搜索框或用户操作区 - 不推荐:
header里塞多个nav(如“产品导航”“客户支持导航”“开发者文档导航”),应合并为一个逻辑清晰的主导航,或改用nav+aria-label区分 -
nav可以独立于header存在(例如侧边栏导航、文章内目录)
正确示例:
我的博客
main 标签的隐藏陷阱:SEO 和辅助技术最在意它
main 不只是“看起来像主要内容”,它的存在直接影响搜索引擎抓取权重分配和屏幕阅读器跳转效率(如 JAWS 的 M 快捷键直跳 main)。
- 必须确保页面有且仅有一个
main,重复会导致辅助技术行为异常 - 不能包裹
header、footer、nav等外围结构——这些本就不属于“主体内容” - 服务端渲染(SSR)或静态生成时,若模板拼接出多个
main(比如布局组件和页面组件各自输出一个),会直接破坏语义 - 兼容性注意:IE 完全不支持
main,但可用role="main"补充(现代项目一般不再考虑 IE)
实际项目里最容易被忽略的一点
语义标签本身不带默认样式,但部分浏览器对 main 有隐式 display: block,而旧版 Safari 对 nav 的 display 处理曾有偏差;更关键的是,很多人写了 header 却忘了给它加 role="banner"(虽然非必需,但在某些老旧读屏软件中能提升识别率)。真正难的不是写对标签,而是持续校验它们是否和内容意图一致——比如一个“登录弹窗”里的 header,其实不该用语义化 header,而该用 div role="heading" 配合 aria-level。











