语义 HTML

HTML 元素超过 100 个，并且能够创建自定义元素，因此您可以通过无数种方式标记内容。不过，有些方式（尤其是语义化）比其他方式更好。

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

本系列文章尚未介绍许多 HTML 元素，但即使不了解 HTML，您也可以通过以下两个代码段了解语义标记如何为内容提供上下文。两者都使用字数而非 ipsum lorem 来节省一些滚动操作，请发挥您的想象力，将“三十个字”扩展为 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>
    <h2>five words</h2>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h3>seven words</h3>
    <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> 进行“导航”。位置标记可为网页内容提供结构，并有助于指明内容的重要部分，以便屏幕阅读器用户通过键盘进行浏览。

当 <header> 和 <footer> 未嵌套在其他地标中时，它们分别是角色为 banner 和 contentinfo 的地标。Chrome 的 AOM 会显示如下内容：