Html HTML5 结构 - <article>、<section> 和 <div> 用法

HTML5 Structure - <article>, <section> and <div> usage

提问by DaveW

Good Day,

再会，

I just started to learn HTML5 - have no issues, everything's going perfectly.

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

I have only one, small question about semantic usage of <article>, <section>and <div>tags.

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

I know that <div>element has no semantic meaning - in HTML5 it should be used mainly for scripting/styling purposes. Here everything is clear for me. I found a lot of useful informations in SO question: HTML5 has new tags article, section and aside. When should I use div tag?.

我知道<div>元素没有语义含义 - 在 HTML5 中，它应该主要用于脚本/样式目的。在这里，一切对我来说都很清楚。我在 SO question 中找到了很多有用的信息：HTML5 has new tags article, section and aside。我什么时候应该使用 div 标签？.

However, I have some issues with <article>and <section>usage. W3C HTML5 specification says that <article>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.

指定独立的、自包含的内容，可以是新闻文章、博客文章、论坛文章或其他可以独立于站点其余部分分发的文章。

where <section>tag should be used

<section>应该在哪里使用标签

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

对于文档中的一个部分。例如章节、页眉、页脚或文档的任何其他部分。

In theory, everything's clear. However, while preparing the code for my first HTML5 website I found it a bit hard to differ.

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

Let me explain my website structure:

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

1. Backgrounds are added to the body element. Working perfectly.
2. I use 960.gsgrid system in my every HTML/CSS project. This time I'm using it too. As you surely know, it requires a container to be added (with a class: container_12 in my case).

1. 背景被添加到 body 元素。完美运行。
2. 我在每个 HTML/CSS 项目中都使用960.gs网格系统。这次我也在用。您肯定知道，它需要添加一个容器（在我的例子中是一个类：container_12）。

To conclude explanation of my structure:

总结一下我的结构的解释：

1. As a main container, I've used <div class="container_12">
2. The first element in my document is a <header>. It contains few elements: slider and top bar. The top bar is a <section>. It has two child elements: telephone number on the left and language list on the right. For those elements, I have used <section>too. For a slider (or a short slogan placeholder on inner pages) I've used <section>tag which contains two <section>tags: left and right column.
3. As a main content wrapper for homepage I've decided to use <section>element. For inner pages I'm using <article>for pages like About Us, etc. For blogs list, I'm using a <section>with a list of <article>tags inside. For a single post, I'm using <article>element.
4. Obviously, for a footer, I'm using <footer>element with three <section>elements as a column wrappers.

1. 作为主要容器，我使用过 <div class="container_12">
2. 我的文档中的第一个元素是<header>. 它包含几个元素：滑块和顶部栏。顶部栏是一个<section>. 它有两个子元素：左侧的电话号码和右侧的语言列表。对于那些元素，我也用过<section>。对于滑块（或内页上的短标语占位符），我使用了<section>包含两个<section>标签的标签：左栏和右栏。
3. 作为主页的主要内容包装器，我决定使用<section>元素。对于内部页面，我<article>用于诸如关于我们等页面。对于博客列表，我正在使用<section>带有<article>内部标签列表的。对于单个帖子，我正在使用<article>元素。
4. 显然，对于页脚，我使用<footer>具有三个<section>元素的元素作为列包装器。

My layout before convertion to HTML5:

我在转换为 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>

Here's my code after converting it to HTML5:

这是我将其转换为 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>

Is my approach correct? Could you add or correct something?

我的方法正确吗？你能补充或更正吗？

To avoid any questions: I know that <section>is not a replacement for a <div>.

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

采纳答案by Rich Bradshaw

Well, one way to answer this is to have a look at the outline of the document using a tool like http://gsnedders.html5.org/outliner/. You'll notice that each section needs a heading to make sense, so without some content it's hard to say. If each section has a H! tag that makes sense, then it's usually right. If a section doesn't need a h1 then it's usually wrong.

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

Sections should make sense on their own, with no context. An easy way to understand this is to think about an RSS feed - each entry on the feed is like a section. If you would add it to an RSS feed (or it would make sense in that context), then it's probably a section. If it's just a column on a footer, then you wouldn't put it on an RSS feed, so it's probably not a section.

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

Based on that, I'd probably do something like this (based on my assumption about what you are putting in each bit). I'm also adding the WAI-ARIA landmark roles, as they are simple and make a lot of difference when you are using a screen reader.

基于此，我可能会做这样的事情（基于我对您在每一位中放入的内容的假设）。我还添加了 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>