语义化标签是为机器和人提供结构认知，而非视觉装饰；header/nav/main/article/section/aside/footer 明确表达内容角色，提升SEO、无障碍访问与可维护性。
header、nav、main、article、section、aside、footer 这些标签不是为了“看起来更高级”，而是让浏览器、搜索引擎、屏幕阅读器和你三个月后的同事，能一眼看懂这块 DOM 是干啥的。
搜索引擎怎么靠语义化抓取内容
Google 和 Bing 不是靠 CSS 类名或 div 层级猜内容重要性的。它们会优先信任 main 里的文字为正文，把 article 当作独立可索引单元，用 header 和 h1 组合判断页面主题。如果你全用 div class="content" 堆砌，爬虫就得靠位置、字体大小、链接密度这些弱信号推断——容易漏掉关键段落，或把侧边广告当正文。
常见错误现象：
- 在
aside里塞全文摘要（应放推荐文章、作者简介等辅助信息） - 把整页导航塞进
section而非nav（nav有明确的导航语义，section没有） - 多个
main标签（规范要求一个页面只能有一个main）
屏幕阅读器依赖语义化做结构跳转
视障用户按 Ctrl+Alt+1 跳到第一个 h1，按 Ctrl+Alt+Shift+N 直接进入 nav 区域。如果全用 div + ARIA role 模拟，不仅代码冗长，还容易漏掉 aria-current 或 aria-labelledby 等细节，导致语音朗读错乱或跳转失效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
nav必须包裹一组导航链接，不能只包一个 logo 图片 -
article内部必须有可独立分发的语义闭环（比如自带h2标题、时间time元素、作者信息） -
section不是“万能区块容器”——没标题的section很可能该用div
为什么不能靠 CSS class 名补救语义
写 <div class="header"> 看起来和 <header> 一样，但 class 名对机器不可解析。CSS 类名会被压缩、混淆、复用；而原生语义标签是 HTML 标准的一部分，浏览器内置支持，无需 JS 注入、无需额外 ARIA 补丁。
性能与兼容性影响：
- 旧版 Safari（iOS 12 及更早）对
main的焦点管理有 bug，需加tabindex="-1"才能被键盘聚焦 -
article和section在 IE 中无样式问题，但部分辅助技术会忽略未正确嵌套的语义结构（例如article里没h2） - 用
div+role="navigation"能模拟nav，但会丢失原生nav的隐式 ARIA 属性（如role="navigation"+aria-label自动继承）
最容易被忽略的一点：语义不是贴标签，而是建关系。比如 aside 必须和它所依附的 article 或 section 在 DOM 树中相邻或嵌套，否则屏幕阅读器无法建立“这是它的补充内容”这一逻辑关联。
