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

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

应使用<section>标记

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

从理论上讲，一切都很清楚。但是，在为我的第一个HTML5网站准备代码时，我发现它有点难以区分。

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

将背景添加到body元素中。工作得很好。
我在每个HTML / CSS项目中使用960.gs网格系统。这次我也在使用它。你肯定知道，它需要添加一个容器（在我的例子中有一个类：container_12）。

总结我的结构的解释：

作为主要容器，我使用了<div class="container_12">
我文档中的第一个元素是<header>。它包含很少的元素：滑块和顶栏。顶部栏是<section>。它有两个子元素：左边的电话号码和右边的语言列表。对于这些元素，我也使用了<section>。对于滑块（或内页上的短口号占位符），我使用了<section>标记，其中包含两个<section>标记：左列和右列。
作为主页的主要内容包装器，我决定使用<section>元素。对于内部页面，我正在使用<article>来查找关于我们等页面。对于博客列表，我使用的是<section>，其中包含<article>个标记列表。对于单个帖子，我使用的是<article>元素。
显然，对于页脚，我使用带有三个<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>

HTML5结构 - <article>，<section>和<div>用法</div> </section> </article>

1 个答案: