真正影响内容可读性、seo和无障碍访问的html标签仅几个：h1-h6需严格遵循层级且h1唯一；strong/em表达语义强调而非视觉效果；blockquote/pre/address有特定语义场景；hr为自闭合标签，small专用于边注等次要信息。
别被“常用标签”清单带偏了——真正影响内容可读性、SEO 和无障碍访问的，就那么几个，用错比不用更糟。
为什么 <h1></h1> 到 <h6></h6> 不能靠数量凑
标题层级不是装饰，是语义骨架。浏览器、屏幕阅读器、搜索引擎都依赖它判断内容结构。
-
<h1></h1>应该全文唯一，代表页面主主题；多个<h1></h1>会让辅助技术困惑，也削弱 SEO 权重 - 跳级使用（比如
<h2></h2>后直接写<h4></h4>）会破坏大纲，部分阅读器会静默跳过缺失层级 - 纯靠 CSS 改样式（比如把
<span class="title"></span>做成大号粗体）无法传递语义，对无障碍和爬虫无效
<strong></strong> 和 <em></em> 不是加粗/斜体快捷键
它们表达的是语气强度与强调方式，不是视觉效果。CSS 可以改样式，但语义不能靠 class 模拟。
-
<strong></strong>表示内容重要性高（如警告、关键参数），屏幕阅读器通常加重语气或放慢语速 -
<em></em>表示语义上的重音（如“我没说要删库”，强调否定对象），读出来会有语调变化 - 用
<b></b>或<i></i>替代，仅表示“视觉上不同”，不带语义权重，不利于可访问性
<p></p> 之外，哪些“段落级”标签真值得用
很多人以为换行就是新段落，其实 <p></p> 的核心价值是包裹完整语义单元。以下三个替代场景更关键：
-
<blockquote></blockquote>：引用他人完整陈述，需配合cite属性（如<blockquote cite="https://example.com"></blockquote>），否则只是视觉缩进 -
<pre class="brush:php;toolbar:false;"></pre>：保留空格与换行，适合代码、ASCII 图、日志片段；但别用它实现“首行缩进”——那是 CSS 的事 -
<address></address>：仅用于文档/文章结尾的联系信息（作者邮箱、GitHub 链接等），不是所有地址都该套这个标签
容易被忽略的兼容性细节
这些小点不报错，但会影响真实环境表现：
-
<hr>是自闭合标签，写成<hr>在 HTML5 中虽不报错，但部分旧版邮件客户端会渲染出两个分割线 -
<small></small>专指“边注、版权、法律声明”等次要信息，不是通用缩小字号方案；滥用会导致语义降级 - 所有文本标签都默认有用户代理样式（如
<p></p>的上下 margin），想彻底重置请统一处理，而不是逐个设margin: 0
语义不是加标签越多越好，而是每个标签都在回答一个问题：“这段文字在整篇内容里扮演什么角色？” 答不上来，就先别加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
