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。