HTML5結構 - <article> ， <section> 和 <div> 用法

Question

美好的一天，

我剛剛開始學習HTML5 - 沒有問題，一切都很順利。

我只有一個關於<article> ， <section>和<div>標簽的語義用法的小問題。

我知道<div>元素沒有語義含義 - 在HTML5中它應該主要用於腳本/樣式目的。 這里的一切都很清楚。 我在SO問題中找到了很多有用的信息： HTML5有新的標簽文章，部分和旁邊。 我什么時候應該使用div標簽？ 。

但是，我有一些<article>和<section>用法的問題。 W3C HTML5規范說<article>標簽

指定獨立的，獨立的內容，可以是新聞文章，博客文章，論壇帖子或其他可以獨立於網站其他部分分發的文章。

其中應使用<section>標簽

對於文檔中的某個部分。 例如章節，頁眉，頁腳或文檔的任何其他部分。

從理論上講，一切都很清楚。 但是，在為我的第一個HTML5網站准備代碼時，我發現它有點難以區分。

讓我解釋一下我的網站結構：

1. 背景被添加到body元素。 工作完美。
2. 我在每個HTML / CSS項目中使用960.gs網格系統。 這次我也在使用它。 你肯定知道，它需要添加一個容器（在我的例子中有一個類：container_12）。

總結一下我的結構的解釋：

1. 作為主要容器，我使用了<div class="container_12">
2. 我的文檔中的第一個元素是<header> 。 它包含很少的元素：滑塊和頂欄。 頂部欄是<section> 。 它有兩個子元素：左邊的電話號碼和右邊的語言列表。 對於這些元素，我也使用了<section> 。 對於滑塊（或內頁上的短口號占位符），我使用了<section>標簽，其中包含兩個<section>標簽：左右列。
3. 作為主頁的主要內容包裝器，我決定使用<section>元素。 對於內頁我正在使用<article>來搜索關於我們等頁面。對於博客列表，我正在使用帶有<article>標簽列表的<article> <section> 。 對於一篇文章，我正在使用<article>元素。
4. 顯然，對於頁腳，我使用帶有三個<section>元素的<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>