语义化html是用标签准确表达内容角色而非装饰代码。需按身份选用标签：header/footer可存在于article/section内；main全页唯一且不可嵌套；nav仅用于主要导航；article用于可独立分发的内容；section须有标题；aside为辅助信息；小标签如time、figure、blockquote等补细节；避免div滥用和语义套娃。
别再把所有区块都塞进 <div> 了。语义化不是“给代码贴标签”，而是用标签说清楚：这块内容是谁、在哪、干什么。
<h3>先搞清每个标签的“身份”</h3>
<p>选对标签的前提，是理解它在页面中的角色：</p>
<ul>
<li>
<strong><header></header></strong> 和 <strong><footer></footer></strong> 不只属于整页——每篇 <code><article></article>、每个 <section></section> 都可以有自己的 header/footer，比如文章标题+作者+发布时间，或章节末尾的参考资料
<article></article>、<aside></aside> 或 <footer></footer> 里；它是用户真正要读的核心内容容器<aside></aside> 或普通列表<h2></h2>–<h6></h6>），比如“安装步骤”“常见问题”“用户反馈”；别把它当样式容器用结构逻辑比视觉更重要
写之前先问自己三个问题：
- 这块内容去掉样式后，别人还能看出它是导航、标题还是正文吗？
- 它能单独拎出来发布或订阅吗？能就用
<article></article> - 它是整页最核心的信息区吗？是就用
<main></main>包住，且只用一次
避免“语义套娃”：比如 <section><article><section></section></article></section> 这类嵌套，除非内部确实有独立主题划分，否则纯属冗余。
小标签补细节，机器才真懂你
大结构搭好后，用轻量语义标签点睛：
- 发布时间用
<time datetime="2026-06-18">今天</time>，搜索引擎和读屏软件都能识别 - 图文组合用
<figure><img><figcaption>这是XX示意图</figcaption></figure>，比<div> <img><p> 更利于图片搜索收录 </p> <li>引用他人观点，用 <code><blockquote></blockquote>+<cite></cite>，而不是靠缩进和斜体模拟 - 强调关键词或术语定义，优先用
<strong></strong>或<dfn></dfn>，而非仅靠 CSS 加粗 - 把整个页面顶部导航包进
<div class="nav"> —— 应该直接用 <code><nav></nav> - 用
<section></section>替代<article></article>包裹一篇完整博客——弱化了内容的独立传播价值 - 在
<main></main>外又套一层<div class="container"> 做居中——语义容器不该混入布局职责 <li>纯图标按钮旁加一行说明文字，用 <code><span></span>或<small></small>就够，不必硬上<article></article>
别踩这些高频坑
看似简单，但错用反而降低可读性：
