html5语义化标签需按内容逻辑而非视觉布局组织：header为头部容器、nav专用于导航链接集合；main是唯一主体且必须直接子元素；article强调独立可分发，section须带标题并表主题划分；aside和footer须匹配其父级上下文。
HTML5语义化标签不是按视觉位置堆砌，而是按内容逻辑组织。核心在于：每个标签表达一种明确的角色关系，层级必须反映真实的信息结构，而非视觉布局需要。
header 与 nav 的分工要清晰
header 是“头部容器”，nav 是“导航集合”，二者功能不同，不能互相替代。
- 一个页面可有多个 header（如页面顶部、每篇文章开头），但每个 header 内是否包含 nav，取决于那里是否有主导航链接
- nav 必须包裹一组用于站点内跳转的链接（如主菜单、页脚分类导航），纯 logo、搜索框、副标题等不属于 nav，应留在 header 内但不包进 nav
- nav 可独立存在（比如底部导航栏），不必一定嵌在 header 里
main 是页面唯一主体，不可嵌套也不可缺失
main 标签代表用户最关心的内容区域，它是整个页面的语义中枢。
- 每个 HTML 页面有且仅有一个 main，且它必须是直接子元素（不能被 article、section、aside 等包裹）
- main 内可包含多个 article、section、aside，但这些区块之间应保持语义并列，而非父子嵌套（例如不要把 aside 放在 article 里面）
- 如果页面是纯导航页或错误页（如 404），main 仍需存在，内容可为空或仅含提示文字
article 和 section 的判断标准很关键
两者都表示“区块”，但语义完全不同：article 强调独立可分发，section 强调主题划分。
- 用 article 的前提是：这段内容能单独被 RSS 订阅、被搜索引擎作为独立条目索引、被转发到其他平台仍保持完整意义（如一篇博客正文、一条新闻、一个用户评论）
- section 必须带标题（h1–h6），否则语义失效；它适合组织同一主题下的若干段落、列表或组件（如“产品特性”“客户评价”“技术参数”）
- article 内可包含多个 section（如文章里的小节），但 section 内不应随意包裹 article（除非该 section 明确是一个“文章合集容器”，此时更推荐用 main + 多个 article）
aside 和 footer 要匹配所属上下文
aside 不等于“右边那块”，footer 也不只是“页面最底下”——它们的归属对象决定其语义范围。
- aside 应与紧邻的父级内容相关：若放在 main 外，属于整页辅助信息（如全站广告）；若放在 article 内，则仅服务于该文章（如作者简介、延伸阅读）
- footer 总是某个“区块”的尾部：可以是 body 的页脚，也可以是 article 或 section 的结尾（如文章发布时间、编辑说明、相关标签）
- 避免把版权信息硬塞进 article 的 footer——那是页面级信息，应放在 body 级 footer 中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
