语义化标签比多了明确的结构和功能语义，使浏览器、辅助技术和搜索引擎能准确理解内容角色与关系，提升可访问性、SEO和团队协作效率。
语义化标签比 多了什么信息？
浏览器和辅助技术（比如读屏软件）不靠视觉样式理解页面，而是依赖标签的语义。用 什么也不说，只表示“这里有个块级容器”。
实际影响包括：
- 屏幕阅读器能生成更准确的页面结构导航（例如跳转到下一个
-
搜索引擎更容易识别内容主次（
- 团队协作时，
更容易被新成员一眼看懂用途
到底该选哪个？
关键看有没有「独立主题」和「可被大纲工具识别」的需求。HTML5 规范明确：一个 。
常见误用：
立即学习“前端免费学习笔记（深入）”；
- 把整个轮播图外层包成
- 把多个并列的卡片列表用一个
热门商品
- 为实现 margin/padding 而套一层
哪些场景必须用语义标签，不能用 替代？
不是所有地方都能自由替换。以下情况若强行用 ，会破坏可访问性或违反规范：
-
多了什么信息？
浏览器和辅助技术（比如读屏软件）不靠视觉样式理解页面，而是依赖标签的语义。用 实际影响包括： 关键看有没有「独立主题」和「可被大纲工具识别」的需求。HTML5 规范明确：一个 常见误用： 立即学习“前端免费学习笔记（深入）”； 不是所有地方都能自由替换。以下情况若强行用 、、、、、 这些标签，等于直接告诉它们“这部分是导航”“这是主内容区”“这是侧边栏”。而 什么也不说，只表示“这里有个块级容器”。
） 内容权重通常高于 ） 比 更容易被新成员一眼看懂用途
和 到底该选哪个？
应该有标题（–），且其内容在逻辑上构成一个独立单元（比如“用户评论区”“产品参数表”）。没有标题或纯为布局/样式包裹的，就该用 。
，但里面没标题 → 应该用
包住，但每张卡片本身才是独立内容 → 每张卡片用 ，外层用 并加 热门商品
→ 必须换回
哪些场景必须用语义标签，不能用
替代？
，会破坏可访问性或违反规范：
：页面导航链接集合。用
