语义标签是HTML骨架的核心，header、nav、main、article等通过隐式ARIA角色和结构规范，使屏幕阅读器准确播报、搜索引擎正确判别主次，并支撑响应式、打印样式及无障碍访问；误用会导致可访问性与SEO严重受损。
header、nav、main、article 这些标签本身不改变视觉样式，但它们是浏览器和辅助技术“理解”页面视觉层级的关键入口——没用对，屏幕阅读器会跳过导航、搜索引擎可能误判主次内容。
为什么视觉元素需要语义标签而不是仅靠CSS类名
纯
或
在DOM中只是无意义的容器，浏览器无法推断其功能。而
header自带隐式ARIA角色（如role="banner"），nav对应role="navigation"，这些信息会被屏幕阅读器直接播报为“页眉”“导航栏”，用户无需猜测布局意图。
- 视觉设计师依赖语义结构做响应式断点：比如
aside在小屏常被折叠为抽屉，前提是它被正确标记而非div - CSS选择器可基于语义精准控制：比如
main h2比.content h2更可靠，避免类名冲突导致标题样式错乱 - 打印样式表自动忽略
aside或footer内容——前提是它们是语义标签，不是带class的div
常见视觉区块与语义标签的映射关系
别把语义标签当成“换汤不换药”的div替代品，每个标签有明确的使用边界：
- 顶部通栏（含Logo+搜索+登录）→ 必用
header；但若该区域是某篇文章的标题区（非页面级），应改用article > header - 左侧/右侧工具栏 → 用
aside；若内容与主文强相关（如术语解释框），加aria-labelledby关联对应段落 - 卡片式新闻列表 → 每张卡片用
article，而非section；因为article表示可独立分发、重用的内容单元 - 页脚版权+备案链接 →
footer；但文章末尾的作者信息应放在article > footer里，而非页面级footer
容易被忽略的语义陷阱
语义错误往往在视觉上完全正常，却让可访问性和SEO大打折扣：
立即学习“前端免费学习笔记（深入）”；
-
main嵌套在header或nav内：W3C规范明确禁止，会导致屏幕阅读器跳过主体内容 - 多个
h1出现在同一article中：每个article应有且仅有一个h1作为标题，子标题从h2开始 - 用
section包裹单个p：缺少主题聚合性，应直接用p；section需有h2及以上标题才成立 -
nav里塞了非导航内容（如广告横幅）：破坏导航语义，应把广告移出或用aside包裹
真正影响视觉理解度的，从来不是颜色或间距，而是HTML骨架是否能让机器准确还原人类的视觉逻辑——一个没被article包裹的博客正文，在爬虫眼里只是“一段文字”，而在article里，它就是“一篇可索引、可订阅、可分享的独立内容”。
