HTML中<title> 和 <h3> 、＜b＞和＜strong＞、＜i＞和＜em＞的区别？

admin

2025年7月28日 16:1 本文热度 9

这题啊，说简单也简单，说细了还能展开不少。HTML里的这些标签，看起来功能差不多，实则背后差异可不小——特别是你要考虑SEO、可访问性（Accessibility）或者浏览器行为的时候。下面我分三组讲清楚它们的区别，配合我的一些开发经验，力求让你一眼就明白，别再混用了。

1）<title> 和 <h3> 的区别

先说结论：它们完全不是一类东西！别搞混了兄弟！

<head>
  <title>我的网站首页</title>
</head>

💡这个不会出现在网页正文里，它是给浏览器和搜索引擎看的，SEO权重极高！！

<h3>这是小标题</h3>

我之前遇到有人把 <title> 放到 <body> 里当作页面标题用，结果样式全挂了，浏览器直接忽略它的渲染，SEO也抓不到标题——白做了！

2）<b> 和 <strong> 的区别

这俩都能加粗，但语义天差地别！

<b>粗体文本</b>

<strong>重点强调内容</strong>

⚠️我之前踩过坑，有一次做无障碍网站，结果页面全是 <b>，读屏器完全读不出重点，直接被无障碍审查打回，后来换成 <strong> 一下就过了！

所以总结一句话：能用<strong>，别用<b>，除非你就是想单纯美化。

3）<i> 和 <em> 的区别

也是一对看似“斜体”的孪生兄弟，实则差别老大了！

<i>JavaScript</i>

<em>我真的非常生气！</em>

🔥这个语义重要性我在做邮件模板和政府项目时感触特别深，如果你要兼容屏幕阅读器，这种语义标签必须用对！

总结一下

标签	作用	是否语义化	浏览器表现
`<title>`	网页标题（用于浏览器标签和SEO）	✅	不显示在页面正文
`<h3>`	第三级标题（页面结构）	✅	页面中显示为小标题
`<b>`	加粗但无语义	❌	显示为粗体
`<strong>`	加粗且强调	✅	显示为粗体，语义强调
`<i>`	斜体但无语义	❌	显示为斜体
`<em>`	斜体且语义强调	✅	显示为斜体，有语音强调

👀对了，我之前还写过一个小测试页面，把 <b> 和 <strong> 放一起，然后配合读屏器试了一下，效果差别巨大，推荐你有空也测试看看。

感兴趣的朋友可以试试把这几组标签混在一起用，打开读屏工具（mac上是VoiceOver，Windows是NVDA），你就会感受到——语义真不是样式能替代的！

阅读原文：原文链接

该文章在 2025/7/29 12:30:58 编辑过

关键字查询

HTML

区别

正在查询...