HTML5语义化布局的核心目标是让内容层级“看得见、读得懂、用得上”，通过正确使用header、footer、nav、main、article、section等标签明确结构关系与文档大纲，确保可访问性、SEO和协作效率。
HTML5语义化布局的核心目标，是让内容层级真正“看得见、读得懂、用得上”——不是靠CSS类名猜结构，而是用标签本身说清“这是什么、它属于哪一层、跟谁有关”。结构清晰了，人（开发者、用户）、机器（搜索引擎、屏幕阅读器）才能同步理解页面意图。
用对标签，就是用对层级关系
每个语义标签自带层级含义，嵌套方式直接决定文档大纲：
- header 和 footer 可出现在 body、article 或 section 内部，各自服务于所属区块，不跨级混用
- nav 必须包裹一组导航链接，不能只包一个按钮或面包屑；它在大纲中会被识别为独立导航单元
- main 全局唯一，且必须直接子元素包含核心内容，不能被 section 或 div 包裹后才进 main
- article 内可有自己的 header、section 和 footer，形成完整子层级，RSS抓取时就靠这个自包含性
标题层级必须与语义结构对齐
h1–h6 不只是字号大小，是结构锚点。浏览器和读屏软件会据此生成文档大纲：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 页面主标题建议用 h1，放在 main 或顶级 article 内
- section 和 article 应配有明确标题（h2–h6），否则其语义分组意义减弱
- 避免跳级，比如 h1 后直接 h3；也不建议一个页面多个 h1（除非明确多主内容场景，且用 aria-labelledby 等补足）
避免“语义漂移”，让标签不背离本意
标签选错，层级就乱。常见误用会直接破坏结构表达：
立即学习“前端免费学习笔记（深入）”；
- 把侧边广告栏塞进 footer —— 它不属于页面底部，也不属于某 article 的结尾，该用 aside
- 用 section 包裹纯装饰性图标或空白占位符 —— 它需要有主题和标题，否则应改用 div
- 在 nav 里放搜索框、登录入口或页脚链接 —— 这些不是主导航路径，会干扰辅助技术判断
- 给整页加多个 main —— 违反唯一性，导致无障碍访问锚点失效，SEO 也难识别主次
结构清晰，是可访问与SEO的共同起点
语义标签本身不渲染样式，但它是所有高级能力的基础：
- 屏幕阅读器按 nav、main、aside 等角色快速跳转，结构不清等于关闭快捷通道
- 搜索引擎通过 article + 标题 + time 判断内容时效与独立价值，比一堆 div 更易提取关键信息
- 团队协作时，看到 section 就知道这里要写主题说明，看到 aside 就明白这是补充信息区，不用翻注释或问同事
