结论：无需背全语义标签，优先用好header、nav、main、aside、footer这5个即可解决90%结构混乱问题；div套娃是初学者最大陷阱，因语义缺失导致seo差、无障碍失效、代码难维护。
直接说结论：不需要背全所有语义标签，先用好 header、nav、main、aside、footer 这5个，就能解决90%的结构混乱问题。
为什么 div 套娃是初学者最大陷阱
写页面时习惯性全用 <div class="header"></div>，看似灵活，实则埋下三颗雷：
搜索引擎抓不到“这是导航”，屏幕阅读器跳不过去“这是正文”，自己三个月后回看代码得靠类名猜结构。
而语义标签自带含义，浏览器和爬虫一读就懂——不是靠CSS类名，是靠标签名本身。
常见错误现象：
• 页面在无障碍工具里无法用“跳转到主内容”快捷键定位
• 百度搜索结果中摘要错乱，把版权信息当正文展示
• 同一个 class="nav" 在不同项目里实际包裹的是搜索框、面包屑或页脚链接
实操建议：
• 每个页面只允许一个 main，且它必须包裹真正核心内容（比如文章正文、产品列表）
• header 和 footer 可以嵌套使用：文章区块内也能有独立 header（如带标题和作者的卡片）
• 不要为了“看起来像导航”就硬套 nav：纯装饰性图标栏、广告位链接不用 nav
nav 标签不是“所有链接集合”，而是“主要导航路径”
很多新手把页脚联系方式、侧边分享按钮、甚至轮播图箭头都塞进 nav，结果让语义失真。nav 的本质是告诉机器：“这些链接能带你去网站其他一级/二级页面”。
使用场景判断：
• ✅ 顶部横排菜单（首页 / 关于我们 / 产品 / 联系）
• ✅ 左侧垂直后台菜单（仪表盘 / 用户管理 / 日志）
• ❌ 页脚“关注我们”微信/QQ图标链接
• ❌ 文章末尾“上一篇 / 下一篇”
• ❌ 表单里的“忘记密码？”链接
兼容性提醒：
老版本 IE 不识别 nav，但不影响渲染——它会当作普通块级元素处理，所以无需 polyfill；真正要注意的是别把它和 ul 混用出错：
• 正确：<nav><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav>
• 错误：<nav>@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@2</nav>（缺少语义容器，屏幕阅读器可能连读成“首页关于”）
main 和 section 到底谁包谁？
这个问题卡住很多人：main 是页面唯一主内容区，section 是它内部的逻辑分组。就像一本书的“正文”（main）里分“第一章”“第二章”（section）。
参数差异与性能影响：
• main 不能嵌套，一个页面只能有一个；section 可以无限嵌套，但建议不超过三层，否则结构过深影响可读性
• 搜索引擎对 main 内容权重最高，section 仅作辅助划分，不额外加权
• 不要用 section 替代 article：博客列表项、新闻卡片应该用 article，因为每条都是独立可分发的内容单元
实操建议：
• 首页轮播图 + 产品列表 + 客户评价，这三块都应是 main 的子元素，各自用 section 包裹
• 如果某 section 有独立标题（h2），就说明它确实该用 section；如果只是样式分隔线，用 div 更合适
• 不要给 main 加 id="content" 这类冗余属性——它的语义已经足够明确
容易被忽略的细节：lang、aria-label 和默认样式
语义化不是只换标签名就完事。三个常漏点直接削弱效果：
• 必须写，否则屏幕阅读器可能用英文朗读中文页面
• nav 如果没有可见文字标题（比如纯图标菜单），得补 aria-label="主导航"，不然读屏软件会说“导航”但不说“这是主导航”
• header、footer 等标签有浏览器默认 margin，但不同浏览器值不同（Chrome 给 header 上下 0.83em，Firefox 是 0.67em），实际项目中建议统一重置或用 CSS 重定义
最复杂的点其实不在标签选择，而在“同一内容在不同上下文是否需要不同语义”。比如一个搜索框：
• 在 header 里，它是站点级搜索 → 用 <form role="search"></form>
• 在 aside 里，它是侧边过滤 → 用 <form></form> 即可，不必加 role
这种细微差别，得靠多看真实页面源码（比如 MDN 或 GitHub Pages）来建立直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
