HTML5语义化布局强调标签准确表达内容功能与层级：header作为介绍性容器可多处使用，nav专用于主要导航链路，main唯一标识核心内容，section按主题分组、article强调独立复用性，aside和footer依归属关系而非位置灵活使用。
HTML5布局设计的语义化方法，核心是让标签名准确反映内容的功能与层级关系，而不是仅仅为了视觉排版而套用。标签不是样式开关，而是结构声明——浏览器、搜索引擎和屏幕阅读器靠它理解“这块内容在页面中扮演什么角色”。
header 不等于“顶部横条”，而是“介绍性容器”
一个 header 可以出现在页面任意位置，只要它是某块内容的引导或说明部分。比如整站头部、一篇文章的标题区、甚至一个产品卡片上方的简介段落，都适用。
- 页面级 header：放 logo、主导航、搜索框
- article 或 section 内部的 header：放该文章标题、作者、发布日期（
- 不需要每个区块都硬加 header——如果只有单个 h2 且无其他介绍信息，直接用 h2 更简洁
nav 专用于“主要导航链路集合”
nav 的语义重点在“导航功能”，不是所有链接都要塞进去。它强调的是用户快速跳转到其他核心区域的能力。
- 适合：顶部主导航、侧边栏目目录、文章内锚点导航、分页控件
- 不适合：页脚里的“隐私政策”“友情链接”这类辅助链接（可用普通 a 或 div 包裹）
- 可添加 aria-label 提升可访问性，例如
main 是页面唯一“核心内容锚点”
main 标签必须且只能出现一次，代表用户真正想看的主体内容。它天然排斥重复、装饰、导航等非核心信息。
立即学习“前端免费学习笔记（深入）”；
- 它应包裹 article、section 等实际内容单元，而不是仅作外层容器
- 不要嵌套在 header / footer / aside 里——这些元素与 main 是同级并列关系
- 若页面是纯工具类（如计算器），main 里可直接放表单和操作区，无需 article
section 和 article 的区分关键在“独立复用性”
section 是按主题划分的内容组，article 是能脱离上下文仍保持完整意义的内容单元。两者常嵌套，但逻辑不同。
- section：首页的“热门推荐”区块、“用户评价”列表、“技术文档目录”——有主题，但内部条目不独立
- article：一篇博客、一条新闻、一个论坛帖子——可单独 RSS 订阅、被搜索引擎单独索引、转发时保留全部语义
- article 内部可有自己的 header/footer/aside；section 内部通常用 h2–h6 明确标出本节主题
aside 与 footer 都讲“归属关系”，而非固定位置
aside 表示与当前内容相关但非主线的信息；footer 表示所属区块的收尾信息。它们都可以出现在页面任何位置，取决于归属对象。
- aside 可放在 article 旁（相关文章推荐）、main 外（站点广告）、甚至 section 内（术语解释浮层）
- footer 不只是页面最底下——每个 article 可有自己的 footer（作者署名、发布时间、编辑记录）
- 页面级 footer 通常含版权、备案号、联系方式；区块级 footer 更侧重该内容本身的元信息
