语义化 HTML

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

HTML 元素超过 100 个，并且能够创建自定义元素，因此标记内容的方法是无限的；但有些方法（尤其是语义化方法）比其他方法更好。

“语义化”是指“与含义相关”。编写语义化 HTML 意味着使用 HTML 元素根据每个元素的含义（而不是外观）来构建内容。

本系列尚未介绍许多 HTML 元素，但即使不了解 HTML，以下两个代码段也显示了语义化标记如何为内容提供上下文。两者都使用字数而不是 ipsum lorem 来节省一些滚动 - 请发挥您的想象力将“thirty words”扩展为 30 个字

第一个代码段使用 <div> 和 <span> 这两个没有语义值的元素。

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

您能感觉到这些词扩展成了什么吗？不太能。

让我们用语义化元素重写这段代码

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

哪个代码块传达了含义？仅使用 <div> 和 <span> 的非语义化元素，您真的无法判断第一个代码块中的内容代表什么。第二个代码示例使用语义化元素，为非编码人员提供了足够的上下文来解读目的和含义，而无需遇到 HTML 标记。它绝对为开发人员提供了足够的上下文来理解页面的轮廓，即使他们不理解内容，例如外语内容。

在第二个代码块中，即使不理解内容，我们也能理解架构，因为语义化元素提供了含义和结构。您可以看出，第一个标题是网站的横幅，<h1> 可能是网站名称。页脚是网站页脚：这五个字可能是版权声明或公司地址。

语义化标记不仅仅是为了让开发人员更容易阅读标记；它主要在帮助自动化工具解读标记方面发挥重要作用。开发者工具也展示了语义化元素如何提供机器可读的结构。

无障碍功能对象模型 (AOM)

当浏览器解析接收到的内容时，它会构建文档对象模型 (DOM) 和 CSS 对象模型 (CSSOM)。然后，它还会构建一个无障碍功能树。辅助设备（如屏幕阅读器）使用 AOM 来解析和解释内容。DOM 是文档中所有节点的树。AOM 就像 DOM 的语义化版本。

让我们比较一下这两种文档结构在 Firefox 无障碍功能面板中的呈现方式

在图 2 中，第二个代码块中有四个地标角色。它使用了方便地命名为 <header>、<main>、<footer> 和 <nav>（用于“导航”）的语义化地标。地标为 Web 内容提供结构，并确保屏幕阅读器用户可以使用键盘导航到重要的内容部分。

请注意，当 <header> 和 <footer> 未嵌套在其他地标中时，它们是地标，分别具有 banner 和 contentinfo 的角色。Chrome 的 AOM 显示如下

查看 Chrome 开发者工具，您会注意到使用语义化元素与不使用语义化元素时，无障碍功能对象模型之间存在显着差异。

很明显，使用语义化元素有助于无障碍功能，而不使用语义化元素会降低无障碍功能。HTML 通常在默认情况下是无障碍的。作为开发人员，我们的工作既要保护 HTML 的默认无障碍特性，又要确保我们最大限度地提高用户的无障碍功能。您可以在开发者工具中检查 AOM。

role 属性

role 属性描述元素在文档上下文中具有的角色。role 属性是一个全局属性（意味着它在所有元素上都有效），由 ARIA 规范 而不是 WHATWG HTML 规范定义，本系列中的几乎所有其他内容都在 WHATWG HTML 规范中定义。

语义化元素各自都有一个隐式角色，有些角色取决于上下文。正如我们在 Firefox 无障碍功能开发者工具屏幕截图中看到的那样，顶层 <header>、<main>、<footer> 和 <nav> 都是地标，而嵌套在 <main> 中的 <header> 是一个节。Chrome 屏幕截图列出了这些元素的 ARIA 角色：<main> 是 main，<nav> 是 navigation，而 <footer>（作为文档的页脚）是 contentinfo。当 <header> 是文档的标题时，默认角色是 banner，它将该节定义为全局站点标题。当 <header> 或 <footer> 嵌套在分节元素中时，它不是地标角色。两个开发者工具的屏幕截图都显示了这一点。

元素角色名称在构建 AOM 中非常重要。元素的语义或“角色”对于辅助技术以及在某些情况下对于搜索引擎非常重要。辅助技术用户依赖于语义来浏览和理解内容的含义。元素的角色使用户能够快速访问他们寻求的内容，并且可能更重要的是，角色会告知屏幕阅读器用户在交互式元素获得焦点后如何与之交互。

交互式元素（如按钮、链接、范围和复选框）都具有隐式角色，所有这些角色都会自动添加到键盘 Tab 键顺序中，并且所有这些角色都具有默认的预期用户操作支持。隐式角色或显式 role 值会告知用户期望元素特定的默认用户交互。

使用 role 属性，您可以为任何元素指定角色，包括与标记暗示的角色不同的角色。例如，<button> 具有 button 的隐式角色。使用 role="button"，您可以从语义上将任何元素变成按钮：<p role="button">Click Me</p>。

虽然将 role="button" 添加到元素会告知屏幕阅读器该元素是按钮，但它不会更改元素的外观或功能。button 元素在您无需执行任何操作的情况下提供了许多功能。button 元素会自动添加到文档的 Tab 键顺序中，这意味着它在默认情况下是键盘可聚焦的。“Enter”键和空格键都可以激活按钮。按钮还具有 HTMLButtonElement 接口提供给它们的所有方法和属性。如果您不使用语义化按钮作为按钮，则必须重新编写所有这些功能。最好直接使用 <button>。

返回到非语义化代码块的 AOM 屏幕截图。您会注意到非语义化元素没有隐式角色。我们可以通过为每个元素分配一个角色来使非语义化版本语义化

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

虽然 role 属性可用于向任何元素添加语义，但您应该改为使用具有您需要的隐式角色的元素。

语义化元素

问问自己，“哪个元素最能代表此标记部分的函数？”通常会导致您为工作选择最佳元素。您选择的元素以及因此使用的标记应适合您显示的内容，因为标记具有语义含义。

HTML 应用于构建内容结构，而不是定义内容的外观。外观是 CSS 的领域。虽然某些元素被定义为以某种方式显示，但不要根据用户代理样式表使该元素默认显示的方式来使用元素。相反，请根据元素的语义含义和功能来选择每个元素。以逻辑、语义化和有意义的方式编写 HTML 有助于确保 CSS 按预期应用。

在编码时为工作选择正确的元素意味着您不必重构或注释 HTML。如果您考虑为工作使用正确的元素，您通常会为工作选择正确的元素。如果您不这样做，您可能不会。当您了解每个元素的语义并意识到为什么选择正确的元素很重要时，您通常能够做出正确的选择，而无需付出太多额外的努力。

接下来，您将使用语义化元素来构建文档结构。

检查您的理解情况

测试您对语义化 HTML 的知识。