HTML5语义化布局关键在于精准理解标签功能：nav专管核心导航路径，header标识内容单元入口，aside承载关联性补充信息；用对则结构清晰、机器可读、维护友好。
HTML5语义化布局不是换几个标签就完事，关键在理解每个标签“管什么”——nav专管主导航路径，header负责内容引入，aside承载相关但非必需的补充信息。用错位置，结构就乱；用对了，机器能读、人好维护、屏幕阅读器也顺。
nav：只收“主要导航链接”，不包所有链接
导航的本质是提供页面间或区块内的核心跳转路径。不是所有带链接的地方都该套
- 适合放进
- 不适合的：页脚友情链接、面包屑（推荐
<ol aria-label="breadcrumb">）、登录/注册按钮（仅1–2个链接时，用更轻量）- 多个导航区可共存，但需明确标注用途，例如：
<nav aria-label="主导航">和<nav aria-label="快捷工具">header：不等于“页面最上面那条横幅”
它代表某个内容单元的“介绍入口”，可以出现在页面顶层，也可以嵌套在
或 - 典型内容：网站Logo+主标题、文章标题+发布时间+作者、搜索框（若属于该区块引导功能）
- 别塞广告横幅或次要链接——除非它确实是这个区块的身份标识（比如某专栏的专属logo）
- 一个页面可以有多个
：一个在顶层，每个 里再有自己的
aside：看内容关系，不看摆放位置
它不是“右边那栏”的代名词，而是指与当前上下文有关联、但删掉也不影响主线逻辑的信息。
立即学习“前端免费学习笔记（深入）”；
- 合适场景：博客侧边的作者简介、术语解释框、同类文章推荐、图表说明（配合
使用） - 不合适场景：全局导航栏、页脚版权链接、独立广告位（无上下文关联）——这些应归
或 - 如果一段文字脱离当前文章仍成立（比如作者个人履历），就适合
不复杂但容易忽略：语义标签的价值不在样式，而在让结构本身说话。去掉CSS后，别人靠源码就能分清哪是导航、哪是正文、哪是补充——机器也是这么“读”你的页面的。
- 多个导航区可共存，但需明确标注用途，例如：
