title、h1、strong、em 的区别

问题

title 与 h1 有什么区别？b 与 strong、i 与 em 有什么区别？H 标签在页面结构中有什么作用？

结论

title 和 h1 都常被翻译成“标题”，但层级不同：

b 与 strong 的区别：

i 与 em 的区别：

H 标签的重点不是默认字号，而是文档结构。浏览器默认样式可以被 CSS 重置，不能把“字号大”当成 H 标签的本质。好的标题层级能帮助用户快速浏览，也能帮助辅助技术和搜索引擎理解内容层级。

Demo

html

<head>
  <title>订单详情 - Frontend Notes Lab</title>
</head>
<body>
  <main>
    <h1>订单详情</h1>
    <p><strong>支付失败：</strong>请在 15 分钟内重新支付。</p>
    <p>这个术语来自 <i lang="en">render tree</i>。</p>
    <p>我<em>现在</em>需要处理这个问题。</p>
  </main>
</body>

面试回答：

title 是文档级元数据，主要影响浏览器标签页和搜索展示；h1 是正文结构标题。strong 表示重要性，b 更多是视觉或文本惯例；em 表示重读强调，i 表示另一种语调或术语。标题元素应该按内容层级使用，而不是为了字号。

参考来源