title与h1、b与strong、i与em的区别

pax大约 2 分钟

HTML语义化标签的区别详解

1. title与h1的区别

`<title>` 标签

作用范围：位于 <head> 部分，不显示在页面正文中
功能：
- 定义浏览器标签页的标题
- 作为搜索引擎结果页面的链接文本
- 用于书签标题
语义：表示整个文档的标题

`<h1>` 标签

作用范围：位于 <body> 内，直接显示在页面上
功能：
- 页面主要内容的标题
- 用于页面结构层次
- SEO优化中的重要元素
语义：表示页面内容的主要标题

<!DOCTYPE html>
<html>
<head>
    <title>页面标题 - 显示在浏览器标签上</title>
</head>
<body>
    <h1>页面主标题 - 显示在页面内容中</h1>
    <p>页面内容...</p>
</body>
</html>

2. b与strong的区别

`<b>` 标签

性质：纯样式标签
作用：仅将文本以粗体显示
语义：无特殊语义含义，只是视觉上的加粗
使用场景：关键字、产品名称等不需要强调语义的文本

`<strong>` 标签

性质：语义化标签
作用：表示内容具有很强的重要性、严重性或紧急性
语义：强调内容的重要程度
辅助技术：屏幕阅读器会以不同的语调读出

<p>今天天气预报：<b>多云</b>（普通文本加粗）</p>
<p>安全提示：<strong>高空作业必须系安全带</strong>（重要内容强调）</p>

3. i与em的区别

`<i>` 标签

性质：纯样式标签
作用：仅将文本以斜体显示
语义：无特殊语义含义
使用场景：技术术语、外来语、想法等需要斜体但无强调意义的内容

`<em>` 标签

性质：语义化标签
作用：表示内容需要强调或重读
语义：强调语气或重要性
辅助技术：屏幕阅读器会加重语气读出

<p>他的座右铭是<i>知足常乐</i>。（引用外来语）</p>
<p>请<em>务必</em>在下班前提交报告。（强调重要性）</p>

总结要点

语义化 vs 样式化：
- title、strong、em 具有明确语义
- h1、b、i 更多关注显示效果
SEO和可访问性：
- 语义化标签对搜索引擎和辅助技术更友好
- 纯样式标签主要影响视觉呈现
使用原则：
- 优先使用语义化标签表达内容含义
- 仅在纯样式需求时使用非语义化标签