应优先使用语义化标签而非div：article用于可独立分发的内容，section用于有标题的逻辑区块，main为唯一主要内容容器且内部标题自成体系，header和nav需满足特定内容条件，图片、时间、代码等须用对应语义标签补全。
@#@#@#@#@#@#@#@#@#@0 ——这不是导航，是操作入口，用 <footer></footer> 或普通 <p></p> 更合适
标题层级和 <main></main> 的强制约束
<main></main> 是页面唯一性标签，且它直接决定了标题嵌套的起点：
- 每个 HTML 文档中只能有一个
<main></main>，不能嵌套，也不能出现在<article></article>或<section></section>内部 -
<main></main>内第一个标题应为<h1></h1>（哪怕页面已有<h1></h1>在<header></header>中）——因为<main></main>定义的是“主要内容起始点”，其内部标题需自成体系 - 滥用
<h2></h2>做样式分隔线？立刻换成<hr>或 CSS border；用<h3></h3>标注小图标旁文字？那是<span></span>+ ARIA，不是标题
容易被忽略的细节：图片、时间、代码的语义补全
语义化不止在结构标签，更藏在细节里：
-
<img>必须带alt属性：描述图像内容（非“图片”“logo”），纯装饰图写alt=""，别留空或删掉 - 发布时间、更新时间统一用
<time datetime="2026-08-25">2026年8月25日</time>，而不是<span></span>或<p></p> - 代码片段必须用
<code>包裹，行内变量用<var></var>，键盘输入用<kbd></kbd>；<pre class="brush:php;toolbar:false;"></pre>只负责保留格式，不替代语义 - 引用他人内容，大段用
<blockquote></blockquote>+cite属性，行内用<q></q>——别再通篇<p></p>加引号了
最常出问题的地方，往往不是不会写 <article></article>，而是把 <section></section> 当 <div> 用，或者让 <code><nav></nav> 承担了本该由 <button></button> 或 <a></a> 完成的交互职责。语义标签不解决样式，但一旦写错，后续所有 CSS 选择器、JS 查询、SEO 索引、屏幕阅读器播报都会跟着偏移——它不是“锦上添花”，是 DOM 结构的地基。
