语义化布局是现代网页开发的底层基建，header/footer锚定页面骨架，nav/main/article区分内容权重，section/aside/figure细化内容关系，details/time/address等小标签提升细节体验。
语义化布局不是“锦上添花”，而是现代网页开发的底层基建。用对标签，能让代码自解释、让屏幕阅读器准确传达、让搜索引擎优先抓取主内容——这些直接关系到用户能不能快速找到信息，以及团队能不能高效协作维护。
header、footer：锚定页面骨架
这两个标签定义的是全局性区域，不局限于整页，也可用于某个 article 或 section 内部的头部与尾部。比如一篇博客文章自带发布时间和作者署名，就该用 article > header 包裹，而不是塞进一个 class="post-header" 的 div。
- header 里适合放标题（h1–h6）、Logo、主导航（nav）或搜索框
- footer 不只是版权栏，还可包含联系方式、相关链接、备案号，甚至文章末尾的标签云
- 避免嵌套多个 header 或 footer 在同一逻辑区块内，否则会干扰辅助技术判断层级
nav、main、article：区分内容权重
这三个标签共同构成页面的信息主干。搜索引擎和屏幕阅读器会据此分配权重和跳转路径。
- nav 应只包裹**主要导航链接**，面包屑、页内锚点、底部友情链接不属于它的语义范畴
- main 必须且只能出现一次，代表当前页面独一无二的核心内容容器；它不能被 article 或 section 包裹
- article 是可独立分发的内容单元，比如新闻稿、博客正文、评论条目；它自带隐含的独立上下文，可被 RSS 抓取或单独打印
section、aside、figure：细化内容关系
它们解决的是“这部分内容和谁有关、为什么放在这里”的问题，让结构有逻辑而非仅靠视觉位置。
- section 表示文档中一个有主题的段落，通常带标题（h2–h6），比如“产品特性”“客户评价”“技术参数”
- aside 不是“随便放点东西的地方”，而是与邻近 article 或 section 相关但非主线的补充内容，如术语解释、人物简介、延伸阅读推荐
- figure 专用于媒体内容容器（图、图表、代码块、引用等），配合 figcaption 提供说明文字，这对无障碍访问和 SEO 都很关键
别忽略小标签的大作用
一些轻量级语义标签常被低估，却在细节体验上起决定性作用。
- details/summary 实现原生可折叠模块，无需 JS 就支持键盘操作和屏幕阅读器播报状态
- time 标记日期时间（如 ），帮助搜索引擎识别时效性内容
- address 仅用于联系信息，放在 footer 或 article 底部时，明确告诉机器“这是谁发布的”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
