# 为什么你应该关心语义化 HTML？

语义是语言中单词或短语的含义。在 HTML 这种语言中，元素也有其自身的语义含义。实际上，你可以把 HTML 文档当作文本文件看待。就像文本文件一样，你可能会有标题、图像、加粗文本和其他格式。

元素的语义含义指的是该元素传达的特殊信息。例如，p 元素的语义含义是一个段落文本：

示例代码

大多数元素都有语义含义。div 元素是为数不多的没有语义的元素之一。但这为什么重要呢？

首先且最重要的是，使用正确的语义化 HTML 能确保使用屏幕阅读器等辅助技术的用户获得最佳体验。此外，语义化 HTML 还能改善你的搜索排名。这被称为搜索引擎优化，或 SEO。

最后，使用正确的语义元素可以改善你的开发体验。与其在一堆代码中查找导航栏，不如直接编辑 nav 元素，并清楚自己在修改什么。在本节中，你将了解这些主题的更多内容、如何使用语义元素以及语义 HTML 为什么如此重要。

# 为什么拥有良好的结构层次很重要？

创建结构层级时最重要的一点是正确使用标题元素。标题元素以 h1、h2、h3 等编号。这些数字表示该元素的标题等级。

就像文本文档一样，你不应以错误的顺序使用标题等级。你的 h1 元素是顶级标题。页面上很少会有多个 h1，通常它应位于所有内容之前。

你的 h2 元素是子标题。它应始终位于 h1 之后，可能在一些引言性文本之后。与 h1 元素不同，你可以在页面上有多个 h2 元素。你通常会这样做以划分不同的内容部分。

遵循该模式，你的 h3 元素应始终位于 h2 之后。也就是说，你不应直接从 h1 跳到 h3。然而，你可以在同一等级拥有多个标题元素。例如，以下代码是正确的：

但这段代码不正确，因为 h3 出现在 h2 之前。

将 h2 元素移到 h3 之上，使其在语义上正确。要与代码交互，您需要启用交互式编辑器。

相反，您应根据文档结构选择合适的元素，并使用 CSS 实现所需的样式。

使用正确的层级对可访问性非常重要。辅助技术（如屏幕阅读器）依赖网页的结构来判断如何解析并向用户朗读该网页。在一个
之后直接使用
元素，可能会让使用屏幕阅读器的用户认为他们不小心跳过了重要内容，因为缺少了
元素。

适当的结构对于搜索引擎优化（SEO）也很重要。搜索引擎使用自动化程序解析网页内容并判断何时以及在何处显示搜索结果。如果你的结构格式不正确，搜索引擎可能无法在相关搜索结果中为你提供良好的排名。

最后，视结构错误的程度，你的 HTML 甚至可能在技术上不被视为有效。当这种情况发生时，网页浏览器必须去 “猜” 你想要做什么。而它所猜测的内容可能根本不是你想要的。

正如你今天所学，使用页面的正确结构层级有很多理由。在构建新项目时请牢记这一点。

# 呈现性 HTML 与语义化 HTML 有什么区别？

表现性 HTML 关注内容的外观和样式。在 HTML 的早期，开发者会使用像 center、big 和 font 这样的元素。但在现代网页开发中不应使用这些类型的元素，因为它们的局限性以及对无障碍性和可维护性的负面影响。

许多表现性 HTML 元素已被弃用，这意味着它们已过时且不再被推荐。现在有更好的方法来达到相同的效果。然而，知道它们的存在是有帮助的，所以我们将看一些示例。

font 元素是一个已弃用的元素，用于设置文本的字体大小和颜色。下面是一个 font 元素的示例。

启用交互式编辑器并将大小从 5 改为 7 以查看字体增大。

此示例将文本颜色设置为 blue，大小设置为 5。size 属性的范围是 1 到 7，其中 1 最小，7 最大。默认值是 3，如果你不显式设置该值。

尽管该元素仍然可用，但不应使用它，因为字体大小和颜色应始终在 CSS 中设置，而不是在 HTML 中设置。

center 元素是另一个已弃用的元素，用于在其容器内水平居中内容。下面是一个包含文本和段落元素的 center 元素示例。

启用交互式编辑器，并在 <p>Another example text.</p> 周围添加 center 标签，以查看其在页面上的居中显示。

接下来是 big 元素。这是另一个已弃用的表现型 HTML 元素，会将被包裹的文本设为比周围文本大一级。下面给出一个定义了两部分的段落示例。

启用交互式编辑器，并在 Some other text 周围添加 big 标签，查看预览窗口中的变化。

请记住，字体大小应始终通过 CSS 设置，因此在现代 HTML 中不应使用此元素。

以上是一些表现型 HTML 元素的示例。但它们都已被弃用，不再推荐使用。那么应该改用什么呢？我们接着看。

语义化 HTML 现在是推荐的做法。它描述了元素的内容，因此更易于阅读、理解和维护。

当你使用语义化 HTML 时，搜索引擎可以更容易地理解你的网站。它对无障碍也很有帮助，因为屏幕阅读器需要语义信息来描述网页上的内容。

语义化 HTML 元素的示例包括：

用于定义文档或章节头部的 header 元素。
用于包含导航链接的导航部分元素：nav。
用于对相关信息进行分组的元素：section。
用于插图和示意图的元素：figure。
这是一个包含导航部分元素的 header 元素示例。

在交互式编辑器中启用并在 nav 内添加 <a href="#">Products</a>，然后在预览窗口查看更改。

语义元素清楚地显示了它们在 HTML 结构中的用途。语义 HTML 元素有很多种，你一定能找到符合项目需求的元素。

干得好。现在你已了解表现性 HTML 与语义性 HTML 的区别：语义性 HTML 描述内容，而表现性 HTML 侧重外观。

# 什么时候应使用强调（emphasis）元素而非习语文本（idiomatic text）元素？

这些元素与表现型与语义化 HTML 的概念密切相关。习语性文本元素 i 最初用于表现用途以斜体显示文本。但现在，它常用于突出表示替代的语气或情态、另一种语言的习语术语、技术术语以及思想。

以下是官方 HTML 规范中的一个示例，使用 i 元素来显示法语的习语短语。

在开标签 <i> 内的 lang 属性用于指定内容的语言。在本例中，语言为法语。i 元素并不表示该文本是否重要，它只是表明该文本在某种程度上不同于周围文本。

如果你确实需要强调文本的重要性，可以使用一个语义上类似的元素，即强调元素 em。如果需要提供更多语境，通常建议使用该元素。对于与周围文本相比需要特殊强调的文本部分，应使用此元素。它通常仅限于几个词，因为它可能改变句子的含义。

这是段落中强调元素的示例。

你可以看到句子 Never give up on your dreams。注意单词 your 会被强调，因为它位于该元素内部。在浏览器中你会看到单词 your 被斜体显示，以告诉读者这是句子中一个重要词。

即便当文本位于习惯用的文本元素内时看起来相同，语义上的强调元素仍在背后传达其含义和重要性。

重要的是要知道这些元素不应仅用于呈现目的。如果你只是想将文本显示为斜体，但该文本在段落中并无特殊用途、样式或含义，则应改用 CSS。

# 什么时候应使用强调重要性（strong）元素而非引起注意（bring attention to）元素？

“用于引起注意” 的元素 b 通常用于突出摘要中的关键词或评论中的产品名称。通常，浏览器会将该文本显示为粗体。下面是一个在本评论中使用 b 元素来突出产品名称的示例：

浏览器将这些文本部分呈现为粗体文本。这种视觉强调会吸引读者对产品名称的注意。

如果你需要强调文本的重要性，应使用 strong 元素，而不是 b 元素。

strong 是一个语义化的 HTML 元素，用于强调至关重要或紧急的文本。下面是一个示例，展示如何使用 strong 元素来标注关于客户可能对某产品产生过敏反应的非常重要的警告：

元素传达了那种紧迫感。

在视觉上两者非常相似，因为默认情况下它们都以粗体呈现。但它们的含义却大不相同。用于 “引起注意” 的元素仅仅是吸引对文本的注意，并不表示更高的重要性，而 strong 元素则不仅如此。它传达一种重要性或紧迫感。这是它们的主要区别。

在两者之间选择时，请考虑该文本的目的及其在周围内容中的重要性。

# 什么是描述列表（description lists），以及何时应该使用它们？

描述列表非常适合以有序且易读的格式呈现术语和定义，例如在术语表或真正的字典中，你可以在其中找到单词及其对应的定义。

下面是一个包含两个术语及其相应详细信息的 HTML 描述列表示例。

启用交互式编辑器并尝试取消注释代码，以在预览窗口中查看新增的详细项。

在本例中，术语是缩略语 HTML 和 CSS，详细信息是它们的完整写法。详细信息也可以是定义或与术语相关的其他信息。

要定义一个描述列表，你需要三个 HTML 元素。首先是描述列表元素 dl，它是整个列表的容器。在示例中你可以看到它包裹着描述列表的所有其他元素。

然后，为每个条目使用一个描述术语元素 dt。在此例中描述列表有两个术语：HTML 和 CSS，因此有两个这样的元素。

最后，在每个术语之后会有一个描述详情元素 dd，用于该术语的描述或相关细节。在本例中，它们分别是 Hypertext Markup Language 和 Cascading Style Sheets。

在浏览器中，你会看到每个术语后面跟着相应的描述。默认情况下，描述项相对于术语在视觉上向右稍微缩进，以便区分。

但描述列表并不限于术语与定义。它们的用途更加多样。在这里我们有一个包含两种配料的食谱。

启用交互式编辑器并尝试取消注释代码，以在预览窗口中看到新的详情项出现。

整个描述列表包含在一个 description list 元素内。第一个配料 Flour 位于描述术语元素中。然后，你可以看到需要多少该配料：2 cups。该信息位于对应配料之后的描述详情元素中。

对于 Sugar 也重复相同的结构。在本例中，食谱只有两种配料，但如果有更多配料，同样的结构可以在整个描述列表中重复出现。

在浏览器中，你会看到原料左对齐，配量缩进以便视觉上区分。

描述列表的其他用例包括产品规格、常见问题、联系信息和元数据。实质上，当你有两条相关信息以键值对格式存在，其中一条作为标签（键），另一条作为附加相关信息（值）时，就可以使用描述列表。