html5语义化架构是按内容本质分配标签职责，核心是让结构本身传达意义：header、nav、main、footer构成基础骨架；article与section区分独立性与主题性；aside和figure表达关联性；time与heading需严格规范。
HTML5语义化架构不是给标签贴标签，而是按内容本质分配职责。核心是让结构本身说话——浏览器知道哪是主内容，屏幕阅读器能跳转到导航，搜索引擎明白什么是正文、什么是补充。
基础骨架：header、nav、main、footer 缺一不可
这四个标签构成页面最底层逻辑框架，顺序和职责都有明确约定：
- header 可多次出现，既用于整页顶部（含 logo、主导航），也用于 article 或 section 内部（如文章标题+作者信息）
- nav 专指主要导航系统，比如顶部菜单、左侧栏目列表；页脚链接、上一篇/下一篇不建议用 nav
- main 全页唯一，且必须是 的直接子元素；只包裹真正不可删的核心内容，不能嵌套在 header、footer、article 或 aside 中
- footer 同样可多层存在，页面底部放版权信息，每篇 article 底部也可配一个，放发布时间、作者、标签等元数据
内容组织：分清 article 和 section 的使用边界
关键看内容是否具备独立传播性与完整性：
- 用 article 包裹能单独被 RSS 抓取、被分享、被搜索引擎列为独立结果的内容，例如博客正文、新闻稿、用户评论；它应自带 h1–h6 标题，内部可含 time、author 等元信息
- 用 section 划分同一主题下的若干相关内容块，比如商品页的「参数详情」「用户评价」「售后说明」；每个 section 最好有明确标题，但本身不具备独立分发价值
- article 内部可以包含多个 section，但 section 里不应塞进另一篇完整文章；无标题的纯内容区块，优先考虑 div
辅助与图文：aside 和 figure 不是装饰，而是关系表达
它们传递的是内容之间的语义关联，而非视觉位置：
- aside 表示与主内容相关但可移除不影响主线的信息，如侧边栏作者介绍、同类文章推荐、广告位；若某段文字脱离上下文仍成立，才适合用 aside
- figure 和 figcaption 是一对，专为图像、图表、代码块等“插图类内容”设计；figcaption 必须是 figure 的直接子元素，用于说明该图的用途或来源
- 不要把全局导航、页脚链接放进 aside；也不要用 figure 包裹纯文本段落
细节规范：时间标记与标题层级影响可访问性
语义化不止于大结构，细节决定机器能否准确理解页面：
- 所有日期、时间都该用 time 标签，并带上 datetime 属性，例如
<time datetime="2026-06-15">6月15日</time>，便于跨平台解析与同步 - heading 必须连续使用：h1 → h2 → h3，不能跳级；一篇文章中 h1 只出现一次（通常是主标题），内部小节用 h2，子项用 h3
- 避免用 div 堆砌结构；能用语义标签替代的，就不用 class 名或注释来“解释”意图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
