[译] 不要再用这么多 div 了，试试语义化标签吧

我们都喜欢使用 <div> 写网页。它已经存在几十年了。几十年来，当你出于样式或结构的考虑需要将一些东西包装到一起时， <div> 已经成为首选元素。现在的线上网站普遍能看到下面的代码结构：

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>
复制代码

用了很多 <div> 啊。不管怎么说，这样用也是有效的。我的意思是说，这是我们需要的结构，而且也能依照设计完成样式写书。但这里面有些大问题：

1. 可访问性：许多 a11y 工具都很聪明。它们会尽力解析页面结构，帮助用户按照开发者的意图浏览页面结构，并为用户提供轻松的跳转点（jump points），快速导航到页面的某个部分。但  <div> 并不能提供有关文档结构的任何有用信息。世界上最聪明的 a11y 工具说到底也不是人，不能期望它通过解析 class 和 id 就能明白全世界开发者各种怪异和狂野的命名方式。我能知道 class="article-header-level-2" 是一个副标题，但机器人不能。（如果真的可以，请你把它从我的计算机中请出，我还没有做好 AGI 革命 到来的准备。）
2. 可读性：阅读上面的代码，我们需要仔细查看类名，还要分清楚是哪个 <div class="..."></div> 上的。不过，一旦进入到深几个层次的标记，就很难分清楚哪些 </div> 结束标记对应的 <div...> 开始标记在哪里。然后，我们就非常依赖 IDE 提供的为 不同的缩进级别着色 或 突出显示匹配的标签 等功能，来搞清楚当前所处的位置。如果文档内容很长的话，可能还要借助大量滚动。
3. 一致性和标准。当开始一项新任务或转移到一个新项目时，从头学习整个代码库中使用的所有疯狂标记约定可能会令人沮丧。如果大家都用一种标准化的方法来标记 Web 文档里的通用结构，那么即使对于不熟悉的代码库，我们也能通过浏览 HTML 文件，快速了它的意思。这个标准就是 HTML5。

HTML5

HTML5 不是什么新东西了。简单介绍一下：它是在 2008 年 1 月（12 年前！）发布了最初的工作草案征求公众意见，并于 2014 年 10 月成为 W3C 推荐标准。也就是说，HTML5 正式存在都 5 年多了。

HTML5 的主要进步之一是引入了标准化的 语义元素 。“语义”是指单词或事物的含义，因此“语义元素”就是为了用更有 意义的 方式标记文档结构的元素。语义标签可以清楚地表明元素的 用途 和在文档里所起的作用。而且，由于是标准化的&#