HTML标签正确用法指南：提升网页质量的关键细节
写前端代码时间长了，回头看早期的项目，经常会发现一些html标签用得不太合适。标签用错不只是代码看起来不整洁那么简单。它会影响页面加载速度，给使用屏幕阅读器的用户带来障碍，甚至降低网站在搜索引擎中的排名。
这里整理了十个经常被用错的HTML标签，并给出具体的改正方法。你可以对照检查自己的项目代码。
1. <b>和<strong>的区别
很多人用<b>来加粗文字。但这个标签只改变外观，不会告诉屏幕阅读器或搜索引擎这段文字很重要。
正确的做法是使用<strong>。当你想强调某段文字的重要性时，就应该用它。
<!-- 不要这样写 -->
<p>这是一段<b>重要提示</b>。</p>
<!-- 应该这样写 -->
<p>这是一段<strong>重要提示</strong>。</p>2. <i>和<em>的不同
<i>标签只是让文字变斜体，没有其他含义。<em>标签才是真正表示强调，比如强调某个词或某句话的语气。
<!-- 不要这样写 -->
<p><i>请注意截止日期。</i></p>
<!-- 应该这样写 -->
<p><em>请注意截止日期。</em></p>3. 下划线的正确用法
用<u>加下划线容易和链接混淆，而且没有实际意义。如果你想表示新增的内容，应该用<ins>标签。
<!-- 不要这样写 -->
<div>更新内容：<u>新增用户协议</u></div>
<!-- 应该这样写 -->
<div>更新内容：<ins>新增用户协议</ins></div>4. 不要用<br>调整间距
很多人用多个<br>标签来增加行间距，这样会导致布局很难调整和维护。
应该用css来控制间距，这样更灵活也更容易修改。
<!-- 不要这样写 -->
<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. 图片一定要加alt属性
alt属性不仅对搜索引擎优化很重要，也是无障碍访问的基本要求。它描述了图片的内容，方便看不到图片的用户理解。
<!-- 不要这样写 -->
<img src="photo.jpg">
<!-- 应该这样写 -->
<img src="photo.jpg" alt="一名设计师正在使用笔记本电脑">补充一点：如果图片是装饰性的，可以写alt=""，但不要完全省略alt属性。
9. 不要忘记meta标签
至少设置description和viewport这两个meta标签。description影响搜索引擎显示的结果，viewport确保网页在手机上正常显示。
<meta name="description" content="页面简介">
<meta name="viewport" content="width=device-width, initial-scale=1">10. 正确放置脚本
把<script>放在head里会阻塞页面渲染。放在body末尾，或者使用defer/async属性，可以明显提高页面加载速度。
<!-- 不要放在head里 -->
<head>
<script src="app.js"></script>
</head>
<!-- 应该这样写 -->
<body>
<!-- 页面内容 -->
<script src="app.js" defer></script>
</body>关于defer和async的区别：
defer：脚本在文档解析完成后执行，按顺序执行
async：脚本下载完成后立即执行，不保证顺序
检查你的代码
修正这些标签用法后，你的网页可能看起来没有太大变化。但这些改变像打好地基一样重要。它们会默默提升网站的质量：
更好的无障碍访问：屏幕阅读器能正确理解内容结构
更高的搜索排名：搜索引擎更喜欢语义正确的代码
更快的加载速度：合理的脚本位置减少阻塞
更容易维护：清晰的代码结构方便后续修改
你可以用W3C的HTML验证工具检查代码，或者使用Lighthouse测试网页性能。定期检查这些细节，能帮你建立更专业、更高效的前端开发习惯。
记住，好的HTML代码不仅要让浏览器看得懂，也要让其他开发者和辅助设备看得懂。从今天开始检查你的项目，把这些标签用得更加准确。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
