语义化重构关键在识别内容角色、守住嵌套边界、验证机器可读性；需按功能而非class名判断是否替换div，严守<main>唯一性、<section>须带标题、<article>可独立分发等规则。
直接上手改真实页面，比背标签定义有效十倍。 语义化不是语法考试，是结构决策——你得在写 <div> 前，下意识问一句：“这东西浏览器或读屏器需要知道它是什么角色？”
别从“有哪些标签”开始，先盯住你正在写的那个 <div>
新手常卡在“记不住标签名”，其实是方向反了。真实开发中，90% 的语义化问题都出现在已有代码里：比如一个包裹导航的 <div class="nav">，或一个塞着文章正文的 <div id="content">。
- 打开你最近写的 HTML 页面，搜索所有
<div>，挑出三个最“像有身份”的——比如顶部栏、侧边推荐、文章主体 - 对照场景，逐个替换：
<div class="header">→<header>，<div class="main">→<main>，<div class="sidebar">→<aside> - 替换后立刻用 Chrome 的“辅助功能检查器”（右键 → 检查 → 渲染 → 辅助功能树）看结构是否变清晰；再用 Lighthouse 跑一次“无障碍”审计，观察分数变化
<section> 和 <article> 别靠“大小”判断，看内容能否独立存在
很多人以为“长的是 <section>，短的是 <article>”，结果把整页博客塞进一个 <article>，或者把单条微博当 <section> ——错在混淆了“结构层级”和“内容粒度”。
-
<article>的核心判据：这段内容是否能被单独订阅、转发、存档？比如一篇博客、一条新闻、一个用户评论 -
<section>的核心判据：这是文档中一个逻辑完整的“节”，通常带自己的标题（<h2>–<h6>），但不独立于上下文——比如“技术方案”“性能对比”“用户反馈”这些章节 - 嵌套关系必须合法：
<article>内部可以有多个<section>，但<section>里不能随意包<article>；<main>下应优先用<article>或<section>，而非裸<p>
用 <time>、<cite> 这类文本级标签时，别只加标签，要补属性
语义化效果一半在标签，一半在属性。比如 <time> 不带 datetime，读屏器读不出日期；<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> 就不再是默认选项，而成了“实在找不到更贴切语义时的临时占位符”。
