HTML5 结构 - 、 和 用法

Question

美好的一天，

我刚开始学习 HTML5 - 没有问题，一切都很顺利。

关于 <article> 的语义用法，我只有一个小问题, <section>和 <div>标签。

我知道 <div>元素没有语义意义——在 HTML5 中它应该主要用于脚本/样式目的。在这里，一切对我来说都很清楚。我在 SO 问题中发现了很多有用的信息:HTML5 has new tags article, section and aside. When should I use div tag? .

但是，我对 <article> 有一些问题和 <section>用法。 W3C HTML5 规范说 <article>标签

Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.

哪里<section>应该使用标签

For a section in a document. Such as chapters, headers, footers, or any other sections of the document.

理论上，一切都很清楚。然而，在为我的第一个 HTML5 网站准备代码时，我发现很难区分。

让我解释一下我的网站结构:

1. 背景被添加到正文元素中。工作完美。
2. 我使用 960.gs我的每个 HTML/CSS 项目中的网格系统。这次我也在用。您肯定知道，它需要添加一个容器(在我的例子中有一个类:container_12)。

结束对我的结构的解释:

1. 作为主容器，我使用了 <div class="container_12">
2. 我文档中的第一个元素是 <header> .它包含几个元素: slider 和顶栏。顶部栏是 <section> .它有两个子元素:左边的电话号码和右边的语言列表。对于这些元素，我使用了 <section>也。对于 slider (或内页上的简短标语占位符)，我使用了 <section>包含两个 <section> 的标签标签:左右栏。
3. 作为主页的主要内容包装器，我决定使用 <section>元素。对于内页，我使用 <article>对于“关于我们”等页面。对于博客列表，我使用 <section>列表为 <article>里面的标签。对于单个帖子，我使用 <article>元素。
4. 显然，对于页脚，我使用 <footer>元素与三个 <section>元素作为列包装器。

转换为 HTML5 之前的布局:

<div class="container_12">
    <div class="grid_12 header">
        <div class="bar grid_12 alpha omega">
            <div class="grid_6 alpha">
                Phone number
            </div>
            <div class="grid_6 omega">
                German - English - French
            </div>
        </div>
        <div class="grid_6 alpha">
            LOGOTYPE
        </div>
        <div class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </div>
        <div class="grid_12 alpha omega">
            <div class="grid_6 alpha">
                Slider I col
            </div>
            <div class="grid_6 omega">
                Slider II col
            </div>
        </div>
    </div>
    <div class="grid_12 content">

    </div>
    <div class="grid_12 footer">
        <div class="grid_4 alpha">
            Footer I col
        </div>
        <div class="grid_4">
            Footer II col
        </div>
        <div class="grid_4 omega">
            Footer III col
        </div>
    </div>
</div>

这是我将其转换为 HTML5 后的代码:

<div class="container_12">
    <header class="grid_12">
        <section class="bar grid_12 alpha omega">
            <section class="grid_6 alpha">
                Phone number
            </section>
            <section class="grid_6 omega">
                German - English - French
            </section>
        </section>
        <section class="grid_6 alpha">
            LOGOTYPE
        </section>
        <nav class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </nav>
        <section class="grid_12 alpha omega">
            <section class="grid_6 alpha">
                Slider I col
            </section>
            <section class="grid_6 omega">
                Slider II col
            </section>
        </section>
    </header>

    <section class="grid_12 content">

    </section>
    <footer class="grid_12">
        <section class="grid_4 alpha">
            Footer I col
        </section>
        <section class="grid_4">
            Footer II col
        </section>
        <section class="grid_4 omega">
            Footer III col
        </section>
    </footer>
</div>

我的做法是否正确？您可以添加或更正一些内容吗？

为了避免任何问题:我知道 <section>不能替代 <div> .

Answer 1

嗯，回答这个问题的一种方法是使用类似 http://gsnedders.html5.org/outliner/ 的工具查看文档的大纲。 .你会注意到每个部分都需要一个标题才能有意义，所以如果没有一些内容就很难说。如果每个部分都有一个 H!有意义的标签，那么它通常是正确的。如果一个部分不需要 h1，那么它通常是错误的。

章节本身应该有意义，没有上下文。理解这一点的一种简单方法是考虑 RSS 提要 - 提要中的每个条目就像一个部分。如果您将它添加到 RSS 提要(或者它在那种情况下有意义)，那么它可能是一个部分。如果它只是页脚上的一列，那么您不会将其放在 RSS 提要中，因此它可能不是一个部分。

基于此，我可能会做这样的事情(基于我对您在每一位中放入的内容的假设)。我还添加了 WAI-ARIA 地标角色，因为它们很简单，并且在您使用屏幕阅读器时会产生很大的不同。

<div class="container_12">
    <header class="grid_12" role="banner">
        <div class="bar grid_12 alpha omega">
            <div class="grid_6 alpha">
                Phone number
            </div>
            <div class="grid_6 omega">
                German - English - French
            </div>
        </div>
        <div class="grid_6 alpha">
            LOGOTYPE
        </div>
        <nav class="grid_6 omega" role="navigation">
            <ul>
                navigation
            </ul>
        </nav>
        <div class="grid_12 alpha omega">
            <div class="grid_6 alpha">
                Slider I col
            </div>
            <div class="grid_6 omega">
                Slider II col
            </div>
        </div>
    </header>

    <section class="grid_12 content" role="main">
          <!-- Not sure what goes in here? Let's assume it's the main content. -->
    </section>
    <footer class="grid_12">
        <div class="grid_4 alpha">
            Footer I col
        </div>
        <div class="grid_4">
            Footer II col
        </div>
        <div class="grid_4 omega">
            Footer III col
        </div>
    </footer>
</div>