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（区域尾部）
错误写法示例（常见于早期迁移项目）：
<div class="header"></div> <div class="nav"></div> <div class="main-content"></div>
这类写法失去语义，也削弱了无障碍支持能力。
立即学习“前端免费学习笔记（深入）”；
header 和 nav 能嵌套吗？怎么嵌才合理
能嵌套，但必须符合内容逻辑。常见误区是把 nav 当作“导航栏组件”硬塞进 header，而忽略它是否真是主导航。
- 典型合理结构：
header包含站点 logo + 一个nav（主菜单），再加搜索框或用户操作区 - 不推荐：
header里塞多个nav（如“产品导航”“客户支持导航”“开发者文档导航”），应合并为一个逻辑清晰的主导航，或改用nav+aria-label区分 -
nav可以独立于header存在（例如侧边栏导航、文章内目录）
正确示例：
<header>
<h1>我的博客</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/posts">文章</a></li>
</ul>
</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。
