HTML语义化标签的核心是按内容角色而非视觉布局选择：<header>用于页顶导航，<article>包裹独立博客正文，<aside>承载可移除的辅助内容，<main>唯一且仅包核心阅读内容，<section>必须带标题，细节如<time>、<figure>、<blockquote>需精准使用。
先问内容“它是什么”，再选标签
写代码前卡住，往往不是不会敲 <header>，而是不确定这块该不该用 <section>。别从视觉出发——比如“它在左边，所以是侧边栏”，而要从内容角色出发：它能独立存在吗？去掉它，主内容还完整吗？它有没有自己的标题？
常见判断链路：
- 整页顶部导航 + logo →
<header>包着<nav> - 一篇博客正文（含标题、摘要、
<time>、正文）→<article> - 博客页右侧的“热门文章”“作者简介”→
<aside>（移除不影响阅读主体） - 没有标题、只是几个按钮的工具区 → 别硬套
<section>，用<div>加语义类名更诚实
<main> 只能有一个，且不能嵌套
<main> 不是“主要内容容器”的模糊概念，它是页面中唯一且不可替代的核心内容区。浏览器和读屏器会直接跳转到它，搜索引擎也靠它锁定正文起点。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 把全站导航或页脚塞进
<main>里 —— 它只该包<article>、<section>这类真正需要被用户阅读的内容 - 在
<article>内部再嵌一个<main>—— 违反规范，部分辅助技术会忽略内层 - 用多个
<main>分别包不同栏目 —— 页面结构会被解析为多个“主内容”，SEO 和无障碍都受损
<section> 必须带标题，否则大概率用错了
<section> 的本质是“有明确主题的内容分组”，不是样式占位符。W3C 明确要求：每个 <section> 应有 <h2>–<h6> 级标题，否则它就失去了语义锚点。
真实场景对比：
- ✅ “安装步骤”区块，开头是
<h2>→ 适合用<section> - ✅ “用户反馈”列表，上面有
<h3>→ 合理 - ❌ 纯 CSS Grid 布局容器，里面只有几张卡片，没标题 → 该用
<div> - ❌ 用
<section>包住整个<article>→ 属于语义套娃，<article>本身已有完整主题
时间、图片、引用这些细节，小标签才真管用
大结构搭好后，机器识别精度取决于细节标记。光有 <article> 不够，得让发布时间、配图说明、引用来源也“说话”。
关键细节处理：
- 发布时间必须用
<time datetime="2026-08-25">，而不是<span>今天</span>—— 搜索引擎和日历工具依赖datetime属性提取时间 - 图文组合必须用
<figure>+<figcaption>，而不是<div>+<p>—— 图片搜索和读屏器会把图和说明当整体播报 - 引用他人观点，用
<blockquote>+<cite>，不是靠缩进模拟 —— 辅助技术能区分原生引用与普通段落
最常被忽略的是：这些小标签不增加视觉负担，但一旦漏掉，语义链就断了一环——机器读不懂，人眼却看不出问题。
