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

切换到预加载的（那个）。

在继续之前，我们暂停下并查看上面的示例。如果我们使用 <header> ， <main> 和 <footer> 作为文章的主要结构，它的外观如下：

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
复制代码

那真的很棒！但是，还有很多工作要做。

分解： <section>

因此，我们为页面提供了一个基本大纲：页眉，页脚和主要内容区域。现在是时候添加些美妙的内容了。

通常，你会希望将你的内容分解为多个部分，尤其是对像本文这样的大量文本内容，因为没人喜欢阅读这些难以理解的文本墙。

<section> 派上用场了。这是在系列规则中最简单的一个：从结构上讲，它基本上只是一个具有特殊含义的 <div> 。一个 <section> 开始一个新的"sectioning content"区域，因此它可以有自己的 <header> 和 <footer> 。

那么， <section> 和普通的旧 <div> 之间有什么区别，然后，你应该在什么时候使用它们呢？好吧，允许我再次引用规范：

你知道，概述来说， HTML5规范 实际上是可读的。它是那个比较可读的规范之一。每当我浏览它以获取快速答复时，我都不可避免地学到一些意想不到的和有用的东西，尤其是当我开始点击链接的时候。有时（你也）试试吧！

简而言之，如果要在目录中列出文档的一部分，请使用 <section> 。如果没有，请使用 <div> 或其它元素。

内容指标

很好，我们已经得到了一个坚固的页面结构。我们已经明确标记了页面的主要内容区域，而不仅仅是单独调整 <div> ，我们已经调整出了页眉，页脚和章节。但是，肯定还有比我们的文档更多的语义。

让我们来谈谈HTML5中添加的一些元素，它们传达的内容语义而不是结构。

整体：

<article> 元素用于表示完全独立的内容区域，这些内容可以从页面中提取出来并放入另一个内容中，并且仍然有意义。这可能是文字文章或博客，但也可用于社交媒体帖子，如推特或脸书的墙贴。

HTML5规范建议文章总有一个标题，标识它是什么，理想的情况下使用标题元素 (<h1>-<h6>) 。 <article> 也可以有 <header> ， <footer> 和 <section> 元素，因此你可以使用它来嵌入一个完整的文档片段，其中包含其它页面中所需的所有结构。

从上面的方式返回到示例，我们使用 <article> 和我们讨论的其它一些元素来重写带 class="article-*" 的元素。

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
复制代码

这不是比原来更具可读性吗？而且，不仅更容易阅读，它对辅助技术更有用；机器人不能总是弄清楚你的特定类名模式，但是它们可以遵循这种结构。

使用： <nav>

这个元素比其它元素更有名。 <nav> 旨在清楚地识别页面上的主要导航块，帮助用户围绕站点其余部分找到路径的链接组（例如站点地图或标题中的链接列表）或当前页面（例如目录）。

在我们的示例顶部，让我们将 <nav> 应用于标题中的那组链接。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>
复制代码

根本不改变结构，但你知道它是什么，一目了然而不需要在 <div> 上读物和处理类名来找到它，更重要的是机器人也可以找到它。

接触： <address>

我们要讨论的最后一个元素是 <address> 。这个元素旨在调出联系信息，它通常在主页 <footer> 中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等。

有趣的是，如何在 <address> 元素中标记内容的规则是开放的。规范提到有几个其它规范可以解决这个问题，并且提供这种级别的粒度可能超出了HTML本身的范围。

常见的解决方案是RDFa，也是W3C规范，它使用标签上的属性来标记数据的不同组件。下面是我们示例中的页脚在标记 <address> 元素和 RDFa 时可能看起来的样子：

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
复制代码

无疑， RDFa 有点冗长，但它对于标记数据非常方便。如果你有兴趣了解有关 RDFa 的更多信息，请点击以下链接：

• The W3C's RDFa primer
• A description of schemas and links to a bunch of them on schema.org
• The LocalBusiness schema used above

总结

好了，我们已经介绍了很多，我们已经看到很多零零散散的元素应用到我们的例子中。那么，让我们把它们放在一起看看它的样子。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
复制代码

如果你问我（怎么看改造后的内容？），那这比原始例子的可读性高100倍，而且对于搜索引擎优化和可访问性目的而言，其效率将提高100倍。

这些绝不是HTML中唯一的语义元素。有很多其它元素可以帮助你标记和构建你的文本内容，嵌入媒体资源等等。如果你喜欢这个并且希望深入挖掘，这里有一些（标签）可以查看下。你可能认识一些：

• <aside>
• <blockquote>
• <cite>
• code
• <data>
• <del>
• <figure>
• <ins>
• <time>
• <var>

这只是一个开始！就像我说的，当你开始阅读 HTML规范 时，很难停下来。它是种非常丰富的语言，我认为人们经常会低估这种语言。

原文：dev.to/kenbellows/…

文章首发： github.com/reng99/blog…

更多内容： github.com/reng99/blog…