停止滥用div! HTML语义化介绍

DIVS该停止（滥用）了

我们喜欢（使用）<div>标签。它们已经存在了几十年，这几十年来，当需要将一些内容包裹起来达到（添加）样式或者布局目的的时候，它们成为首选元素。查看线上站点时，看到像下面这些内容的情况依旧很常见：

代码语言：javascript复制

<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>

Hoo，那有很多的div标签。但是，它有效。我的意思主要是，它具有你需要的结构。并且，我确定在你完成样式添加之后，它看起来会像你想要的那个样子。然而，它有些严重的问题：

• 可访问性 - 许多a11y tools非常智能，会尽力解析页面结构，以帮助用户按照页面制作者的意图来引导用户，并为用户提供简单的跳转链接来指引他们到自己关心的页面部分。然而，<div>标签并没有真正传递有关文档结构的任何有用信息。世界上最聪明的a11y tool仍然不是人类，不能指望其解析class和id属性，或能够识别全世界开发人员命名块元素的奇怪和狂野的方式。我可以识别到class="article-header-level-2"是一个副标题，但是机器不能。（如果可以的话，把它从我电脑中拿出来，可我也还没准备好进行AGI革命呢。）
• 可读性 - 要阅读此代码，你需要仔细扫描类名，从<div class="..."></div>样板之间挑选出来。一旦你（的代码）深入几个层次，跟踪哪个</div>结束标记与哪个<div ...>开始标记对应，那就变得很棘手了。你开始非常依赖IDE功能，例如着色不同的缩进级别或突出显示匹配的标记以跟踪您的位置，而在较长的文档中，它可能需要在这些功能之上进行大量的滚动。
• 一致性和标准 - 开始新的工作或转移到新项目，并且必须从头学习代码库中使用的让人抓狂的标记，那可能会令人很沮丧。如果每个人都有标准化的方法来标记web文档中常见结构，那么在不熟悉代码库的情况下，都可以很容易的浏览HTML文件并快速处理它应该展示的内容。如果只有一个这样的标准...

HTML5: 这个标准

HTML5并不新奇。这是轻描淡写；最初的工作草稿于2008年1月（11年前）发布，以征求公众意见，并于4年半前，2014年10月份成为一个全面W3C的推荐。所以，就像它已经存在了一段时间。

HTML5的主要进步之一是引入了一组标准化的语义元素。术语“语义”指的是单词或事物的含义，因此”语义元素“是用于以更有意义的方式标记文档结构的元素，这种方式可以清楚地表明它们的用途和它们在文件中服务的目的是什么。而且重要的是，由于它们是标准化的，定义文档的这些元素可以被每个人使用并理解，包括机器人。

我认为HTML5规范本身在<div>元素定义下的一个注释中很好地总结了这个问题：

注释： 强烈建议作者将div元素视为最后采取的元素，在没有其它元素适合的（情况下）。使用更合适的元素而不是div元素可以使读者更容易访问，并且更容易为作者提供可维护性。-- https://www.w3.org/TR/html5/grouping-content.html#the-div-element

我将语义块元素分为两类：主要结构和内容指标。这些不是标准的条款或者其它条款；我在这篇文章中做了一些（区分）。但我认为这种区分足够有用。