html语义标签不可替代，误用会导致lighthouse报错、seo降权和无障碍访问失败；必须严格按语义选用heading、time、img、strong/em等标签，并避免嵌套错误与属性遗漏。
别背标签，先盯住语义边界——<h1></h1>到<h6></h6>不是字号调节器，<p></p>不是换行工具，<strong></strong>和<b></b>不能混用。记错一个，Lighthouse 就标红“Heading level skip”或“Missing heading”。
哪些文本标签一漏就出事
这些不是“可选优化项”，而是机器可读性的硬门槛：
-
<time datetime="2024-06-15"></time>：不带datetime属性的<time></time>对屏幕阅读器和搜索引擎等于没写 -
<img alt="描述性文字">：空字符串alt=""或占位符如alt="图片"会被 Lighthouse 直接报错“Image missing alternative text” -
<h1></h1>：整页只该有一个；若删掉它导致主内容逻辑断裂，说明它真在承担结构职责，不是装饰 -
<mark></mark>和<blockquote></blockquote>：前者必须有上下文支撑（比如搜索高亮），后者需配cite属性才完整，否则语义残缺
怎么快速判断该用哪个标签
比查文档更快的现场判断法：看这段内容能不能被整块删掉。
- 删掉后不影响主流程衔接 → 用
<aside></aside>或<footer></footer>（如作者简介、版权信息） - 删掉后段落断层、逻辑跳变 → 它大概率是
<section></section>或嵌套的<h2></h2>～<h6></h6> - 图文强归属（比如图表+说明文字）→ 必须用
<figure></figure>+<figcaption></figcaption>，纯装饰图走<img>+alt - 强调语气（如反讽、重音）→ 用
<em></em>；强调重要性（如警告、关键结论）→ 用<strong></strong>；仅加粗样式 → 用 CSSfont-weight
练习时最容易踩的坑
手敲三篇真实源码比背十遍定义管用，但得避开几个高频错误：
-
<h1></h1>嵌套在<div> 里没问题，但嵌套在 <code><p></p>里会触发 HTML 解析器自动闭合，实际 DOM 结构和你写的完全不一样 -
<hr>在 Chrome 默认带margin，Firefox 没有，不重置会导致跨浏览器布局偏移；建议统一写hr { margin: 1em 0; } -
<b></b>和<strong></strong>视觉一样，但语义不同：<b></b>是无特殊含义的加粗（比如产品名、关键词），<strong></strong>是内容权重提升，AT（辅助技术）会加重朗读 - 写
<meta charset="utf-8">时漏掉<meta>的斜杠或引号，在部分旧版编辑器里可能不报错，但部署后中文直接乱码
真正卡住人的从来不是标签数量，而是删掉某个标签后页面看起来“没变”，但 Lighthouse 报错、SEO 权重稀释、屏幕阅读器跳过关键段落——这些无声的断裂点，才是练习时最该盯住的地方。
