必须全页唯一且仅包核心内容；可多次嵌套于页面或区块；仅用于主导航；内容可独立分发，仅为逻辑分区。
HTML5语义化标签不是装饰，是网页的“骨架说明书”。用对了，代码一目了然、搜索引擎能抓准重点、屏幕阅读器能顺畅导航——它解决的是结构表达问题，而不是样式问题。
哪些标签必须用，且不能乱套
这几个标签有明确职责和使用边界，错用反而降低语义价值：
- ：全页唯一，只包真正核心内容。比如文章正文、产品主图区、表单主体；导航、侧边栏、页脚版权一律不放里面。
-
和：可多次出现。页面顶部一个 ，每篇博客开头也可以有一个 （含标题+发布时间）；同理， - ：只包裹“主要导航”，比如顶部菜单、左侧栏目树。文章末尾的“上一篇/下一篇”或页脚一堆友情链接，通常不用
和 怎么分
关键看内容是否“可独立存在”：
- ：内容自带完整意义，能单独被 RSS 订阅、被打印、被转发。例如：一篇博客、一条微博、一个用户评论、一则新闻稿。
-
：是文档内的逻辑分块，依赖上下文才有意义。比如“技术教程”大章节下的“HTML基础”“CSS布局”两个小节，各自用
包裹更合适。 - 简单判断法：删掉周围其他内容，这块还能不能被理解？能 → article；不能 → section。
侧边栏、时间、图片这些怎么标才规范
细节处理直接影响可访问性和机器识别效果：
- ：不是所有“在旁边”的内容都是
-
：别只写“2026年6月”，要用 datetime 属性提供机器可读格式：
，方便日历聚合、SEO 时效判断。 -
+ ：图像、图表、代码块等媒体内容应包裹在中，说明文字用 ，且必须是 的直接子元素。这比单纯用 +更能被辅助工具识别为“图文一体”。
避免三个常见踩坑点
语义化失效，往往不是没用标签，而是用得不精准：
- 把
当 用：只为视觉分区而加，内容之间无逻辑关联——该用 就用，语义标签不是越多越好。里塞导航或广告：破坏其“唯一主内容”的语义，导致屏幕阅读器跳过真正要读的部分。 - 忽略嵌套合理性：比如在
里再放 ，或把
- 把
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
