语义化网页的关键是让每个标签承担明确信息角色，使浏览器、搜索引擎等无需CSS/JS即可理解内容；需依内容身份选用header、nav、main、article、aside等标签，补全time、figure、blockquote等属性，并遵循逻辑嵌套规则。
用语义化标签写具备自解释能力的网页，关键不是“换掉 div”，而是让每个标签都承担明确的信息角色——浏览器、搜索引擎、屏幕阅读器甚至未来 AI 工具，都能不依赖 CSS 或 JS 就读懂页面在说什么。
从内容身份出发，选对第一层容器
先问自己：这段内容在整个页面中扮演什么角色？是全站导航？还是某篇文章本身？是辅助信息？还是页脚声明？答案直接对应核心标签：
-
只用于真正意义上的头部区域（如网站标识、主导航、搜索框），不能当“样式盒子”乱套；一个页面可有多个 ，但每个必须属于某个语义上下文（比如 内部也可以有自己的 ） - 必须包裹一组导航链接，且链接目标应为站内资源；面包屑、页内锚点列表、底部“回到顶部”按钮也适用
-
每页仅允许一个，且不能嵌套在
、 - 表示可独立存在、可被分发的内容单元（如博客正文、新闻条目、用户评论），自带隐含的语义边界，适合 SEO 聚焦和 RSS 抓取
- 不是“侧边栏”样式概念，而是指与主内容相关但可分离的附属信息（如术语解释、作者简介、广告、相关推荐）
时间、数据、引用等细节要带机器可读属性
光用
- —— 没有 datetime 属性，屏幕阅读器只读“今天”，搜索引擎无法识别具体日期
-
2026年Q3用户增长曲线 是 的必需组成部分，缺失则图像失去上下文说明 -
…
—— cite 属性提供原始出处，供爬虫验证引用可信度
结构嵌套要符合逻辑层级，别让标签“越权”
语义标签之间有天然的包含关系，违反会导致解析歧义：
-
里不要放 —— 如果 main 中有多篇文章，每篇应各自用或 包裹，并在其内部使用 和 -
不是“视觉分块”工具 —— 它表示文档中的逻辑章节（如“产品特性”“技术参数”“客户评价”），若只是为加背景色或边距而套，反而稀释语义 -
—— 页脚里的链接集合，只要不具备主导航功能（如“隐私政策”“联系我们”），更合适用普通
- +
，而非强行套
配合基础标签强化意图表达
语义化不止靠新标签，传统标签的正确使用同样关键：
- 用 代替 表达重要性，用 代替 表达强调语气
- 表单控件必须配 ，且 input 的 id 必须一致；这不只是提升可访问性，更是告诉浏览器“这个输入框负责什么”
- 表格必须含
、、 等结构标记，否则数据关系对机器不可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
