HTML 元素，团结！组合元素的 Voltron 式力量。

关于语义 HTML 的指南、资源和讨论通常围绕特定元素展开，例如标题、分节元素或列表。我们很少专门讨论如何组合 HTML 元素来提高它们的有效性。

通常，当我们介绍 HTML 时，我们会谈论它如何用于对文档中的内容应用意义，我们通过使用以下示例来做到这一点

• “这是一个段落吗？”
• “这是一个标题吗？”
• “这是一个编号列表吗？”
• “这是一个按钮吗？”

我们使用这些示例是因为它们易于理解——这是一块或一块相同的内容，需要以特定的方式呈现。这很有用，但它只触及了我们如何使用和组合元素以提供更多上下文和意义的表面。

你还记得 Voltron 吗？Voltron 力量的每个成员本身都很强大，但当他们组合在一起形成一个高大的身影时，他们强大的力量变得势不可挡。

https://www.youtube.com/watch?v=1uS5b8aQ6z8&t=1m25s

HTML 元素也是如此。我有一些最喜欢的组合，我会带你浏览一遍。它们可能看起来很晦涩，但当你花时间跳出 div 和 span 的思维定势时，你会惊讶于它们出现的频率。

缩写和定义

<abbr> 和 <dfn> 是我最喜欢的两个 HTML 元素。我特别喜欢它们，因为它们可以很好地协同工作。

您可以组合缩写和定义元素，以允许浏览器、搜索引擎和其他技术识别正在定义的内容以及首字母缩写与该短语相关联。

<p>
  The <dfn><abbr title="International Good
  Dog Association">IGDA</abbr></dfn> is an international,  
  not-for-profit organization responsible for determining
  that all dogs are good.
</p>

在上面的示例中，我将首字母缩写“IGDA”定义为“International Good Dogs Association”。我通过将首字母缩写包装在带有 title 属性的 <abbr> 元素中来实现这一点，该属性定义了完整名称。通过在首字母缩写周围添加 <dfn> 元素，它表示周围的段落定义了术语“International Good Dogs Association”。

<abbr> 元素很有用，因为它可以通过工具提示的形式提供有用的视觉表示，解释首字母缩写是什么。

键盘、示例和变量

如果你以前没听说过这些元素，那么准备好惊叹吧，因为它们太棒了。

首先，<kbd> 元素用于表示文本用户的文本输入（例如，来自键盘）。您还可以嵌套多个 <kbd> 元素来表示多个按键。我喜欢这个元素，因为作为开发者，我们经常（希望）编写文档、博客文章和指南，HTML 为我们提供了原生方法，可以直接从盒子中表示这种内容！

如果我想告诉某人如何使用键盘复制和粘贴，我可以像下面的代码一样标记它。

<p>I like to <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> and <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd> a lot.</p>

它看起来有点乱，但上面的代码在渲染后看起来如下所示，没有任何样式应用于它。如果您想知道为什么 kbd 嵌套在另一个 kbd 元素内，这样做是为了指定键或输入是更大输入的一部分。更强大的组合力量！

查看 CodePen 上 CSS-Tricks 的作品 rZpNPy (@css-tricks)。

您可以进一步使用 CSS 针对 <kbd> 元素进行定位，使其看起来更像小的键盘控制。（**注意：**浏览器倾向于默认情况下以等宽字体渲染它。）

查看 CodePen 上 CSS-Tricks 的作品 gdoOqE (@css-tricks)。

如果您想知道使用 <kbd> 与使用 span 之间的区别，我认为这取决于信息。我将重复很多次：我们不知道别人将如何使用我们的 HTML，因此请通过以最具意义和最具上下文的方式表示您的内容，为您的内容提供最好的机会。如果您仍然不相信，那么请阅读我关于 HTML 如 TypeScript 所述 的文章。

<samp> 元素非常酷，因为您可以将它嵌套在 <kbd> 元素中，反之亦然。什么？我知道，太灵活了！让我们从 MDN 中查看一些示例。

以下代码是将 <samp> 元素嵌套在 <kbd> 元素内部的示例。这用于标记表示基于系统显示的文本（例如按钮名称）的输入的内容。

<p>To save the image file, select <kbd><kbd><samp>File</samp></kbd> - <kbd><samp>Save as...</samp></kbd></kbd>.
</p>

查看 CodePen 上 CSS-Tricks 的作品 YOYzbJ (@css-tricks)。

在上面的代码中，我们定义了键盘快捷键与我们之前的示例相同，但我们还确定菜单和菜单项名称（包含在 <kbd> 和 <samp> 中）是从系统显示的某项中选择输入，例如对话框或小部件。

换句话说，这段文本是来自系统的消息，其中包含一些您需要遵循的用户输入（例如文件和另存为...）。

而当我们将 <kbd> 嵌套在 <samp> 内部时，我们确定输入已经由系统回显给用户。

<p><samp>yarn start:theproject does not exist, did you mean:</p>
<blockquote><samp><kbd>yarn start:the-project</kbd></samp></blockquote>

最后，<var> 元素！这用于标记数学或编程中变量的名称，例如

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Error: <var>console<var> is undefined.</samp>

在这里，您可以开始看到如何将 <var> 与其他元素（如 <pre>、<code>、<kbd> 或 <samp>）组合起来，通过添加更多上下文使您的内容标记更加明确。任何解释您的 HTML 标记的技术都可以开始从您使用的元素中获得更多意义，而不仅仅是假设它都是标准文本。

如果您将此内容放在带有 span 的段落中，那么技术将无法将其与页面上的任何其他旧文本区分开来。您不必诉诸 <span> 或 <div> 来表示此内容，因为 HTML 已经为我们提供了更多语义上准确的元素，我们可以使用这些元素。HTML 不仅仅是关于展示；它是关于意义的。各种超出视觉渲染引擎的技术依赖于这种意义来做出关于如何以最具意义的方式传达我们内容的决定（例如屏幕阅读器、文本转语音、阅读应用程序、机器人或未来的下一件大事）。

图形

图形（<figure>）是强大的组合元素的一个很好的例子。不幸的是，我认为它被广泛误用和低估（就像 <aside> 一样，我可以谈论它几个小时）。您可能熟悉的一个明显的组合是将 <figure> 和 <figcaption> 结合在一起。我们经常使用这个组合来表示图形内容，例如图像、插图和图表——但它也可以用于代码、诗歌和引言等！

由于图形在表示内容类型方面非常灵活，因此您可以在图形中使用许多不同的 HTML 元素，以提供有关您在页面中放置的内容类型的更多上下文。

图注

<figure> 元素通常与可选的 <figcaption> 元素一起使用，该元素表示图形的标题或图例。它应该是 <figure> 元素的第一个子元素或最后一个子元素。您也可以在 <figcaption> 中使用任何 流内容（例如段落、标题等）来提供更多上下文，您可以在由单个 <figcaption> 表示的 <figure> 中拥有多个图像。

<figure>
  <img src="jello.jpg" alt="Golden Retriever Puppy" />
  <figcaption>Jello the Golden Retriever enjoying being carried home.</figcaption>
</figure>

预格式化的文本

<pre> 元素用于显示预格式化的文本或代码，通常使用等宽字体渲染。虽然 <pre> 可以单独使用，但它也可以与 <figure> 和 <figcaption> 组合使用。通过这样做，<pre> 元素内的内容对辅助技术（如屏幕阅读器）更加易于访问，因为它允许我们使用 <figcaption> 作为文本或代码的标签。

我们可以进一步将 <pre> 和 <code> 元素组合起来，以识别预格式化的内容为代码。

查看 CodePen 上 CSS-Tricks 的作品 QVaWVW (@css-tricks)。

因为 <code> 被认为是流内容，所以它也可以用在 <figcaption> 内，标记代码的内联引用（例如，单个短语或行）。

引用和块引用

引用是我经常使用的东西，老实说我从来没有想到它可以作为图的一部分使用。但如果引用的内容与整体内容相关，即使它不是主文档流的一部分，使用引用或块引用仍然是有意义的。

我喜欢使用图来展示诗歌的例子，主要是因为这样我就可以分享我写的那首关于我的狗的精彩诗歌。这里我在 <figcaption> 内使用 <cite> 元素。

<figure>
  <p>
    Jello - A little fluffy dog.
    Hello! 
    Squishy Jello - you little fluffy fellow.
    BOUNCY yellow Jello.
        A very mellow fellow.
    EATING MY MARSHMALLOW.
  </p>
  <figcaption><cite>Eating my Marshmallow by Mandy Michael</cite></figcaption>
</figure>

很容易陷入这样的陷阱：认为 figure 元素只适用于图像或类似图像的内容，但你可以将其用于音频、视频、图表、诗歌、引用甚至统计表格等内容。因为该元素非常灵活，你可以将它与许多其他元素结合起来，为辅助技术、浏览器和 其他使用你网站的科技提供更多上下文。

总结

这些只是 HTML 元素可以组合起来以获得更好上下文的一些方法。HTML 元素本身确实有用且有价值，当用作孤立的片段时，使用它们是一个好的第一步。但是，就像超兽武装一样，当你将 HTML 元素组合在一起时，各个部分会形成一个更大的整体，并获得更多意义和力量。重要的是，我们不要将 HTML 视为单独的代码片段，而是整体的一部分，因为 HTML 实际上是一堆非常惊人的组合。

你可以通过多种方式组合和使用 HTML 元素来最佳地表示你的内容。不要仅仅坚持你所熟悉的旧东西；花时间探索 HTML 并了解它所提供的一切。就像任何语言一样，我们应该充分利用它，并将其发挥到极致。

你对内容标记越准确，该内容在各种技术中的表示就越好，并且它将为将来用于解释你的 HTML 的任何其他内容做好准备。

所以，前进吧，HTML 元素，联合起来！

---

资源

在我看来，学习和理解如何使用 HTML 的最佳资源（除了 规范 本身）是 MDN Web 文档。它列出了所有你可能需要的 HTML 元素。

以下是在这篇文章中介绍的一些元素

• <abbr>
• <cite>
• <code>
• <dfn>
• <figure>
• <figcaption>
• <kbd>
• <samp>
• <var>

如果你是一个 TypeScript 粉丝，并且不明白为什么语义 HTML 很重要，我专门为你写了这篇文章：理解为什么语义 HTML 对 TypeScript 很重要。