10 个你仍在错误使用的 HTML 标签

HTML 标签是几乎每一个网页的“骨架”。 可现实是：很多开发者到现在还在瞎用、乱用、用错场景。

结果就是——

• 页面性能被悄悄拖慢
• 无障碍体验一团糟
• SEO 排名莫名其妙地被扣分

如果你写前端、做网站，又真心想把 HTML 标签用对、用满，用到让搜索引擎和屏幕阅读器都爱上你，那这篇就是给你的。

下面这 10 个标签，不是让你别用，而是教你用对，顺便给出更合理的替代方案。

1. <b> vs <strong>：别再只会“加粗”，要学会“强调”

很多人一上来就习惯性写：

<p>This article is about <b>valuable tips</b> about writing HTML Tags</p>

<b> 的确能把字变粗，但它只是“视觉加粗”，没有任何语义，屏幕阅读器也不会觉得这句话更重要。

更好的写法是：

<p>In this article you will learn <strong>valuable tips</strong> about writing HTML Tags</p>

<strong> 代表“语义上的强调”：

• 屏幕阅读器会特别读出来
• 搜索引擎也更容易理解这段话的重点
• 对无障碍和 SEO 都更友好

结论：想让文字“看起来粗一丢丢”用 CSS； 想告诉机器“这句话很重要”，用 strong。

2. <i> vs <em>：不是所有斜体，都叫“语气”

写斜体时，你是不是也顺手就敲：

<p><i>quisquam nobis commodi animi!</i></p>

<i> 同样只是视觉上的倾斜， 对屏幕阅读器来说——完全没有任何“语气变化”的提示。

更聪明的做法，是用：

<p><em>quisquam nobis commodi animi!</em></p>

<em> 表示“语气上的强调”：

• 屏幕阅读器会用不同语调读出来
• 搜索引擎更容易判断这是一段被特别强调的内容

一句话：想单纯变好看 → CSS； 想表达“这里要重读” → em。

3. <u> vs <ins>：下划线，不只是“画一条线”

很多人还在用 <u> 给文字加下划线：

<div><u>quisquam nobis commodi animi!</u></div>

问题是：

• <u> 不具备任何语义
• 它只是单纯画了一条线
• 还容易和“链接”混淆（下划线+蓝色=超链接）

如果你真的需要在语义层面表示“插入的文本”“新增内容”， 可以这样写：

<div><ins>quisquam nobis commodi animi!</ins></div>

<ins> 表示“被插入、被新增的内容”：

• 对比 diff、展示修改历史时特别有用
• 同时也可以加上下划线效果

小建议：

• 只是样式：用 text-decoration: underline;
• 需要语义：用 ins。

4. <br> 滥用：你不是在换行，你是在毁布局

刚学 HTML 的时候，几乎所有人都干过这事：

<p>This is the first line</p>
<br>
<br>
<br>
<p>This is the fifth line</p>

为了“挤一点空白”， 直接连着塞一堆 <br> 当垫片。

结果：

• 代码一团乱
• 维护成本爆表
• 换个屏幕尺寸，排版立刻崩盘

正确做法是，把“留空”交给 CSS：

<pid="firstLine">This is the first line</p>
<p>This is the fifth line</p>

#firstLine {
padding-bottom: 50px;
}

经验法则：

• <br> 适合用在段落内部的小换行（比如地址、诗歌）；
• 想制造“块与块之间”的距离，用 margin / padding。

5. 把 <hr> 当“设计元素”：请把它还给“语义”

很多页面习惯用 <hr> 当一条“分割线”：

<pid="firstLine">This is the first line</p>
<hr>
<p>This is the fifth line</p>

<hr> 的语义，本意是“主题内容的分隔 / 语义上的分割”， 而不是“好看的一条线”。

如果你只是想要一个视觉上的底边：

<pid="firstLine">This is the first line</p>
<p>This is the fifth line</p>

p {
border-bottom: 2px solid black;
}

这样：

• 样式可以统一控制
• 不会给搜索引擎和辅助工具制造“假的语义分隔”

总结：

• 真的是段落/主题间分隔 → 可以用 hr；
• 单纯想画条线 → CSS border 搞定。

6. 标题标签 <h1> ～ <h6>：不是“调字体大小”的工具

标题标签是整个网页结构的骨架。 很多人却拿它当“字体变大”的快捷方式乱用。

正确姿势是：

• 整页应该有且仅有一个 <h1>，表示页面主标题
• 接着按层级使用 <h2>、<h3>……
• 不要跳级乱飞、也不要用来“凹样式”

示例：

<h1>Main Heading</h1>
<h2>First sub heading</h2>
<h3>Second sub heading</h3>
<h4>Third sub heading</h4>

好处是：

• 屏幕阅读器可以按层级朗读，帮助用户快速跳转
• 搜索引擎能清晰看懂你的内容结构
• 对 SEO 和可访问性都非常友好

别用 h 标签当“加粗+放大”。 那是 CSS 的工作。

7. <p> 套在 <li> 里：多此一举还搞脏结构

常见写法长这样：

<ul>
<li><p>I am first</p></li>
<li><p>I am second</p></li>
<li><p>I am third</p></li>
<li><p>I am fourth</p></li>
<li><p>I am fidth</p></li>
</ul>

这么写的问题在于：

• 结构冗余
• 无意义多了一层标签
• 样式还不好统一管理

更干净的写法其实就是——只用 li：

<ul>
<li>I am 1</li>
<li>I am 2</li>
<li>I am 3</li>
<li>I am 4</li>
<li>I am 5</li>
</ul>

需要样式？ 统一对 li 写 CSS 就行了。

口诀：列表项就是 li，别再给它套一层没必要的 p 外套。

8. <img> 不写 alt：对机器来说，你的图是“透明”的

你在图片搜索里搜东西时， 浏览器能把相对匹配的图找出来，很大程度上就是靠：

<imgalt="Image of a cow on mountain"src="cow.jpg">

alt 文本告诉：

• 屏幕阅读器：这是什么图
• 搜索引擎：这张图和什么内容相关
• 在图片加载失败时：用户：这里原本有什么

如果你写：

<imgsrc="cow.jpg">

那在机器眼里，这就是一块完全没信息的空白。

实战建议：

• alt 要简洁，但要具体（描述“内容”，不是“文件名”）
• 纯装饰图片可以留空 alt=""，表示“可以忽略”

9. <meta> 标签缺失：SEO 从根上就亏了

在 SEO 这件事上，<meta> 标签的重要性，经常被新手低估。

比如这条：

<metaname="description"content="This is the online shopping website in canada" />

description 会被用来：

• 在搜索结果中展示网页摘要
• 帮助搜索引擎理解你页面的主题

除了 description， 还有很多常见的 meta：

• keywords（虽然现在作用减弱，但历史上很重要）
• viewport（移动端适配）
• charset（编码）

合理补齐这些 meta， 能让你的网站在搜索引擎眼中「更完整、更专业」。

10. <script> 摆错位置：白白拖慢首屏加载

很多老项目里，你能看到这样的结构：

<head>
<scriptsrc="script.js"></script>
</head>
<body>
<imgalt="Image of a bird on a mountain"src="bird.jpg">
</body>

问题是：

• 浏览器在加载并执行完 script.js 之前， 会阻塞后续渲染；
• 用户就这么干等着，首屏体验直接变差。

更合理的做法是：

<body>
<imgalt="Image of a bird on a mountain"src="bird.jpg">
<scriptsrc="script.js"></script>
</body>

或者更进一步：

<scriptsrc="script.js"defer></script>

• defer：脚本会在 HTML 解析完成后才执行
• async：更适合独立、不依赖 DOM 的脚本

总之：

• 非必要不要把脚本塞在 <head> 阻塞渲染；
• 善用 defer / async，让用户先看到内容，再跑逻辑。

最后的总结：这些“小习惯”，会悄悄决定你网页的上限

你可能觉得，上面这些只是微调：

• 把 <b> 换成 <strong>
• 用 <em> 替代 <i>
• 用 <ins> 表达插入文本而不是到处 <u>
• 不再用十几个 <br> 堆出空白
• 用 CSS border 代替滥用 <hr>
• 标题结构按层级写好 <h1> ~ <h6>
• 不再给 <li> 套一层无意义 <p>
• 给 <img> 写上清晰的 alt 文本
• 用好 <meta> 提升 SEO 与可读性
• 把 <script> 放到页面末尾，或加上 defer/async

但就是这些看似“鸡毛蒜皮”的改动， 会一点一点积累成：

• 更快的加载速度
• 更稳定的布局
• 更清晰的语义结构
• 更友好的无障碍体验
• 更有竞争力的 SEO 表现

写 HTML，从来不是“能跑就行”。 当你开始在这些细节上较真时， 你的网页，才真的开始有了「专业」的影子。

希望你看完之后， 能去翻一翻自己项目里的那些标签， 顺手改掉几个，一定会看到不一样的结果。