语义化重构关键在识别内容角色、守住嵌套边界、验证机器可读性；需按功能而非class名判断是否替换div，严守唯一性、须带标题、可独立分发等规则。
直接上手改真实页面，比背标签定义有效十倍。 语义化不是语法考试，是结构决策——你得在写 <div> 前，下意识问一句：“这东西浏览器或读屏器需要知道它是什么角色？”
<h3>别从“有哪些标签”开始，先盯住你正在写的那个 <code><div>
<p>新手常卡在“记不住标签名”，其实是方向反了。真实开发中，90% 的语义化问题都出现在已有代码里：比如一个包裹导航的 <code><div class="nav">，或一个塞着文章正文的 <code><div id="content">。
<ul><li>打开你最近写的 HTML 页面，搜索所有 <code><div>，挑出三个最“像有身份”的——比如顶部栏、侧边推荐、文章主体
<li>对照场景，逐个替换：<code><div class="header"> → <code><header></header>，<div class="main"> → <code><main></main>，<div class="sidebar"> → <code><aside></aside>
<section></section> 和 <article></article> 别靠“大小”判断，看内容能否独立存在
很多人以为“长的是 <section></section>，短的是 <article></article>”，结果把整页博客塞进一个 <article></article>，或者把单条微博当 <section></section> ——错在混淆了“结构层级”和“内容粒度”。
-
<article></article>的核心判据：这段内容是否能被单独订阅、转发、存档？比如一篇博客、一条新闻、一个用户评论 -
<section></section>的核心判据：这是文档中一个逻辑完整的“节”，通常带自己的标题（<h2></h2>–<h6></h6>），但不独立于上下文——比如“技术方案”“性能对比”“用户反馈”这些章节 - 嵌套关系必须合法：
<article></article>内部可以有多个<section></section>，但<section></section>里不能随意包<article></article>；<main></main>下应优先用<article></article>或<section></section>，而非裸<p></p>
用 <time></time>、<cite></cite> 这类文本级标签时，别只加标签，要补属性
语义化效果一半在标签，一半在属性。比如 <time></time> 不带 datetime，读屏器读不出日期；<blockquote></blockquote> 不写 cite，搜索引擎就抓不到引用来源。
-
<time datetime="2026-08-25">今天</time>—— 屏幕阅读器会读成“2026年8月25日”，而不是“今天” -
<blockquote cite="https://example.com/doc">…</blockquote>—— 搜索引擎可索引该链接，Lighthouse 无障碍审计也会认可 -
<abbr title="HyperText Markup Language">HTML</abbr>—— 首次出现时鼠标悬停显示全称，读屏器自动播报全称
真正难的不是记住标签名，而是每次写结构前，多花两秒想清楚：这个区块对机器意味着什么。一旦形成条件反射，<div> 就不再是默认选项，而成了“实在找不到更贴切语义时的临时占位符”。</div>
