标签是 HTML 中用于表示强调的语义化标签。合理使用它能提升网站的可访问性、SEO 和代码结构

语义化强调

其核心作用是从语义上表示一段文本需要被强调，而不仅仅是视觉上的斜体，默认情况下，浏览器会将其内容呈现为斜体，但这只是其语义的视觉副产品。

合理用法与示例

应该用于在句子或段落中，为了改变句子的含义或语气而需要强调的单词或短语。

1. 表示语气或重点强调

   <p>我们<em>必须</em>在截止日期前完成这个项目。</p>
   <!-- 强调“必须”一词，表达紧迫性和重要性 -->
   <p>我今天真的<em>非常</em>开心！</p>
   <!-- 强调“非常”，加强语气 -->

2. 表示对比或不同

   <p>我让你买苹果，但你买了<em>梨</em>。</p>
   <!-- 强调“梨”，突出与“苹果”的差异 -->

3. 在引用中表示强调

   <blockquote>
       <p>他说：“这个计划<em>可能</em>会成功。”</p>
   </blockquote>
   <!-- 强调引用语中的“可能”，表示不确定性 -->

4. 用于警告或注意

   <p><em>警告：</em>操作前请备份您的数据。</p>
   <!-- 强调“警告”一词，引起读者注意 -->

与 <i> 标签、<strong> 标签的区别

这是关键,避免混淆：

示例对比：

<p>这是一段<em>非常重要</em>的文本。</p>
<!-- 强调语气：“非常”这个词让重要性更突出 -->
<p>这是一段<strong>极其重要</strong>的文本。</p>
<!-- 强调内容本身的重要性：“极其重要”这个内容是关键 -->
<p>《<i>泰坦尼克号</i>》是一部经典电影。</p>
<!-- 仅仅是表示作品名称的样式，无强调语义 -->

重要原则与最佳实践

1. 不要为了斜体而用 <em>

   • 错误示例： <p>这是<span style="font-style: italic;">一本书</span>。</p> 或 <p>这是<i>一本书</i>。</p>（如果只是想让“一本书”变斜体，但无强调语义，应用 CSS）。
   • 正确做法： 如果仅仅是为了视觉效果，应该使用 CSS：<span class="italic-text">一本书</span> 并定义 .italic-text { font-style: italic; }。

2. 可以嵌套，但需谨慎 嵌套的 <em> 标签表示更强的强调。

   <p>我们<em>真的<em>必须</em></em>开始了！</p>
   <!-- 嵌套的“必须”得到了双重强调 -->

3. 与 CSS 配合使用 你可以通过 CSS 改变 <em> 的默认样式（例如改成粗体、加背景色等），但不要改变其语义,这确保了样式和结构分离。

   em {
       font-style: italic; /* 默认，可保持 */
       color: #d00; /* 可以添加颜色 */
       /* font-weight: bold; 也可以改为粗体，只要符合设计需求 */
   }

4. 对可访问性至关重要 屏幕阅读器等辅助技术会根据 <em> 的语义，用不同的语调或语气来朗读其中的内容,帮助视障用户理解文本的重点和情感。

在百度（搜索引擎）语境下的考量

虽然百度没有官方声明 <em> 标签直接影响排名，但合理使用它符合良好的 SEO 实践：

1. 清晰的语义结构有助于百度更好地理解页面内容的重点和层次关系。
2. 提升用户体验和可访问性的网站,间接对SEO有积极影响。
3. 避免滥用，过度使用或不当使用 <em>（如堆砌关键词）可能被视为操纵排名,对SEO有害。

一句话概括：当你想通过强调某个词来改变句子的语气或含义时，就使用 <em>