必须唯一且仅包裹核心内容，登录框、搜索栏等应置于；用于可独立分发的内容，仅作逻辑分区；标题需层级连续，全页唯一；、、等须按语义使用，不可为样式滥用。
正文必须用 <main></main> 包裹，且只能有一个
浏览器和辅助技术靠 <main></main> 精准定位核心内容。多写一个、或把它嵌套在 <section></section> 里，都会让屏幕阅读器误判主次，SEO 也会弱化正文权重。
常见错误：
- 把登录框、搜索栏塞进
<main></main>—— 它们属于页头，该放<header></header>里 - 用
<div class="main"> 替代 —— 没有语义，搜索引擎无法识别 <li>在文章列表页里，给每篇文章都套一层 <code><main></main>—— 违反“每个页面仅一个”规则 - 这段内容能不能单独 RSS 推送？能 → 用
<article></article> - 它只是正文里的一个子模块，没独立意义？→ 用
<section></section> - 多个
<article></article>可以并列放在<main></main>里，但不能互相嵌套 -
<article></article>或<section></section>内部可以有自己的<h1></h1>—— 但这是“局部主标题”，只对该区块生效（需配合<header></header>使用） - 不要用
<h2></h2>当作加大字号的样式工具，它本质是语义层级标记 - 辅助设备按标题层级生成导航树，断层会让用户迷失
- 用
<div> + CSS 模拟列表 → 失去语义，键盘导航无法识别项数 <li>用 <code><u></u>下划线标注重点 → 已被废弃，易与链接混淆；改用<ins></ins>（插入内容）或 CSStext-decoration - 在
<p></p>里嵌套<div> 或 <code><h2></h2>→ 违反 HTML 规范，部分浏览器会自动修正导致布局错乱复杂点在于：语义标签不提供默认样式，视觉效果得靠 CSS 控制。但正因如此，它才能在不同设备、不同辅助工具中保持一致的含义表达——这点常被忽略，直到上线后被无障碍审计卡住。
<article></article> 和 <section></section> 别混用
<article></article> 表示可独立分发、复用的内容单元，比如博客正文、新闻稿、论坛帖子；<section></section> 只是逻辑区块划分，比如“产品特点”“客户评价”这类有标题的章节。
判断依据很简单：
示例：<main><article><h1>标题</h1>
<p>正文...</p></article><section><h2>相关资源</h2>
<ul>...</ul></section></main>
标题层级必须连续，<h1></h1> 只能出现一次
<h1></h1> 是整页唯一主标题，代表页面主题；<h2></h2> 是它的直接子级，<h3></h3> 是 <h2></h2> 的子级，以此类推。跳级（比如 <h1></h1> 后直接 <h3></h3>）或重复使用 <h1></h1> 会破坏结构语义，影响 SEO 和可访问性。
注意点：
段落、列表、强调标签要按语义选，不是按样式选
<p></p> 是正文基本单位，别用 <br> 模拟段落；<ul></ul>/<ol></ol> 用于真正有集合关系的条目；<strong></strong> 表示重要内容（屏幕阅读器会加重读），<b></b> 只是加粗外观，无语义。
容易踩的坑：
