语义化标签的核心是按内容角色而非视觉布局选择：section表逻辑段落，aside放相关非核心内容，header可多次出现，nav仅用于主导航，main必须唯一且不含header/footer，标题需层级嵌套，figure配figcaption表达图文语义单元。
用对语义化标签，代码自然有层次——关键不是堆标签，而是让每个标签都“说清楚自己是谁、在哪儿、管什么”。结构清晰的页面，一眼就能看出主次、导航在哪、正文从哪开始、辅助信息放哪边。
按内容角色选标签，不按视觉位置
很多人误把<section>当“分块盒子”，看到页面有三栏就套三个<section>。其实它代表的是“一个逻辑主题段落”，比如“产品特性”“用户评价”“技术参数”。真正该用<aside>的地方，是侧边栏里与当前文章相关但非核心的内容，如“作者简介”“同类推荐”；而广告或无关链接，反而不该塞进<aside>。
-
<header>可以出现多次：页面顶部一个，每篇<article>开头也可以有一个（含标题、发布时间、作者） -
<nav>只包裹真正起导航作用的链接集合，面包屑、页脚链接、跳转锚点都不算主导航，别硬套 -
<main>必须唯一，且直接子元素不能是<header>或<footer>——它的孩子应该是<article>、<section>或段落，不是“页头页脚”
标题层级配合语义区块，形成阅读骨架
语义标签和<h1>–<h6>是绑定关系。每个<section>或<article>应该以一个
或更高级别标题起始，内部再用向下展开。跳级（比如后面直接）或全用平铺，都会让结构失焦。
- 整页只有一个
，通常是<header>里的网站名或页面主标题
-
<main>里第一级标题用，代表内容大模块；<article>内部也用作文章标题，不降级
-
<aside>里的小提示、引用等，不用标题；真需要标题，用起始，表明它是从属层级
嵌套讲逻辑，不讲“看起来整齐”
向下展开。跳级（比如后面直接）或全用平铺，都会让结构失焦。
- 整页只有一个
，通常是<header>里的网站名或页面主标题
-
<main>里第一级标题用，代表内容大模块；<article>内部也用作文章标题，不降级
-
<aside>里的小提示、引用等，不用标题；真需要标题，用起始，表明它是从属层级
嵌套讲逻辑，不讲“看起来整齐”
）或全用平铺，都会让结构失焦。
- 整页只有一个
，通常是<header>里的网站名或页面主标题
-
<main>里第一级标题用，代表内容大模块；<article>内部也用作文章标题，不降级
-
<aside>里的小提示、引用等，不用标题；真需要标题，用起始，表明它是从属层级
嵌套讲逻辑，不讲“看起来整齐”
- 整页只有一个
，通常是
<header>里的网站名或页面主标题 -
<main>里第一级标题用，代表内容大模块；
<article>内部也用作文章标题，不降级
-
<aside>里的小提示、引用等，不用标题；真需要标题，用起始，表明它是从属层级
嵌套讲逻辑，不讲“看起来整齐”
常见错误是把<nav>塞进<header>就完事，却忘了<header>本身可独立存在。正确逻辑是：<header>定义区域身份，<nav>定义功能身份——它们是“谁”和“干什么”的关系，不是父子容器关系。
立即学习“前端免费学习笔记（深入）”；
-
<header>里可以没有<nav>（比如文章页头部只有标题和作者） -
<nav>可以不在<header>里（比如底部导航、侧边垂直菜单） -
<article>内部可嵌<header>（含文章标题/时间），也可嵌<footer>（含版权/编辑说明），但不能嵌<main>
用<figure>和<figcaption>强化图文语义
图片不是装饰，是内容的一部分。用<div><img><span>说明文字</span></div>只是视觉拼凑；而<figure><img><figcaption>这是XX数据趋势图</figcaption></figure>明确告诉机器：“这张图和这段说明是一组完整语义单元”。搜索引擎会把它当作一个信息块索引，屏幕阅读器也会连读图+说明。
- 图表、代码块、引用块、插画，只要配了说明文字，优先用
<figure> -
<figcaption>必须是<figure>的**第一个或最后一个子元素**，位置固定才有语义效力 - 纯装饰图（比如背景花纹、分割线）不用
<figure>，用CSS背景更合适
