做前端有些年头了，回头看自己早期写的代码，常常会发现不少HTML标签用得并不恰当。标签用错，影响的不仅是代码整洁度，还会拖累页面性能、无障碍访问，甚至SEO效果。今天聊聊这10个常见却容易被误用的HTML标签，并提供可直接上手的修正方案。希望你读完能顺手检查一下自己的项目。
1. <b> 与 <strong>：不只是“粗体”的区别
很多人习惯用 <b> 来加粗文字，但它仅仅是个视觉样式，对屏幕阅读器或搜索引擎来说没有任何“重要性”提示。
建议这样用：
<p>这是一段<b>重要提示</b>。</p>
<p>这是一段<strong>重要提示</strong>。</p>
2. <i> 与 <em>：斜体也有语义
<i> 只负责视觉倾斜，而 <em> 才表示语气上的强调。
<p><i>请注意截止日期。</i></p>
<p><em>请注意截止日期。</em></p>
3. <u> 与 <ins>：下划线别乱画
用 <u> 加下划线容易和链接混淆，且无语义。如果想表达“新增内容”，应用 <ins>。
<div>更新内容：<u>新增用户协议</u></div>
<div>更新内容：<ins>新增用户协议</ins></div>
4. <br> 不是间距工具
很多人用一堆 <br> 来撑开上下间距，这会导致布局难以维护。
<p>第一段</p><br><br><br><p>第二段</p>
<p class="first">第一段</p><p>第二段</p>
<style>.first { margin-bottom: 2em;}</style>
5. <hr> 不应只是“装饰线”
<hr> 的本意是主题分隔，如果你只想画一条样式线，请用CSS边框。
<hr>
<div class="divider"></div><style>.divider { border-top: 1px solid #ddd;}</style>
6. 标题标签别当样式用
<h1>~<h6> 是文档结构，不是字体放大工具。确保只有一个 <h1>，并保持层级连贯。
<h3>突然用h3</h1><h6>又跳到h6</h6>
<h1>页面主标题</h1><h2>第一部分</h2><h3>细分内容</h3>
7. 别在 <li> 里套 <p>
列表项本身已是块级内容，无需额外包裹段落。
<ul> <li><p>项目一</p></li></ul>
<ul> <li>项目一</li></ul>
8. <img> 务必加上 alt
alt 不仅助于SEO，也是无障碍访问的基本要求。
<img src="photo.jpg">
<img src="photo.jpg" alt="一名设计师正在使用笔记本电脑">
9. 别忘了关键的 <meta>
至少确保 description 和 viewport 已设置，这对SEO和移动端适配至关重要。
<meta name="description" content="页面简介"><meta name="viewport" content="width=device-width, initial-scale=1">
10. <script> 别阻塞渲染
将脚本放在 body 末尾，或使用 defer/async，可明显提升首屏加载速度。
<head> <script src="app.js"></script></head>
<body> <script src="app.js" defer></script></body>
最后想说
调整这些标签用法，并不会让页面“焕然一新”，但它们会像扎实的基础工程，默默提升网站的可访问性、SEO 与长期可维护性。
阅读原文：原文链接
该文章在 2025/12/27 11:35:56 编辑过
400 186 1886
