HTML5结构 - < article&gt ;,< section>和< div>用法 [英] HTML5 Structure - <article>, <section> and <div> usage

查看：87
本文介绍了HTML5结构 - < article&gt ;,< section>和< div>用法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好日子，



我刚开始学习HTML5 - 没有问题，一切都进行得很顺利。 >我只有一个关于< article> ，< section> 和标记。



我知道< div> 元素没有语义含义 - 在HTML5中它应该主要用于脚本/样式目的。这里一切都很清楚。我在SO问题中发现了很多有用的信息： HTML5有新的标签文章，部分和旁边。我什么时候应该使用div标签？。



然而，我遇到了一些与< article> 和< section> 用法。 W3C HTML5规范说明< article> 标记


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


其中< section> 标记应该被使用


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


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



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


  1. 背景添加到body元素。完美工作。

  2. 我在每个HTML中使用 960.gs 网格系统/ CSS项目。这一次我也使用它。正如你当然知道的那样，它需要添加一个容器（在我的情况下，使用class：container_12）。

我的结构：


  1. 作为主容器，我使用了< div class =container_12>

  2. 我文档中的第一个元素是< header> 。它包含几个元素：滑块和顶部栏。顶栏是< section> 。它有两个子元素：左侧的电话号码和右侧的语言列表。对于这些元素，我也使用了< section> 。对于一个滑块（或内部页面上的短口号占位符），我使用了< section> 标签，其中包含两个< section> code> tags：left and right column。

  3. 作为主页的主要内容包装，我决定使用< section> 元素。对于内部页面，我使用<文章> 来处理关于我们等页面。对于博客列表，我使用< section> ; 里面有一个< article> 标签的列表。对于单个帖子，我使用< article> 元素。

  4. 显然，对于页脚， code>< footer> 元素包含三个< section> 元素作为列包装。

转换为HTML5之前的版式： 

 < div class = container_12 > 
< div class =grid_12 header> 
< div class =bar grid_12 alpha omega> 
< div class =grid_6 alpha> 
电话号码
< / div> 
< div class =grid_6 omega> 
德语 - 英语 - 法语
< / div> 
< / div> 
< div class =grid_6 alpha> 
 LOGOTYPE 
< / div> 
< div class =grid_6 omega> 
< ul> 
导航
< / 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> 
电话号码
< / section> 
< section class =grid_6 omega> 
德语 - 英语 - 法语
< / section> 
< / section> 
< section class =grid_6 alpha> 
 LOGOTYPE 
< / section> 
< nav class =grid_6 omega> 
< ul> 
导航
< / 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> 
页脚我col 
< / section> 
< section class =grid_4> 
 Footer II col 
< / section> 
< section class =grid_4 omega> 
 Footer III col 
< / section> 
< / footer> 
< / div>

我的方法正确吗？为避免任何问题：我知道< section> 不是一个替换为< div> 。

解决方案

回答这个问题的方法是使用诸如 http://gsnedders.html5.org/outliner/ 。你会注意到，每个部分都需要一个标题才有意义，所以没有一些内容很难说。如果每个部分都有H！标签是有道理的，那么它通常是正确的。如果一个部分不需要h1，那么通常是错误的。



在没有上下文的情况下，部分应该是合理的。理解这一点的一个简单方法是考虑一个RSS提要 - 提要上的每个条目就像一个部分。如果你想将它添加到RSS提要中（或者在这种情况下它是有意义的），那么它可能是一个部分。如果它只是一个页脚上的列，那么你就不会把它放在RSS提要上，所以它可能不是一个部分。



基于此，我会可能会做这样的事情（根据我对你在每个位上放置什么的假设）。我还加入了WAI-ARIA的里程碑式的角色，因为它们很简单，并且在使用屏幕阅读器时有很大的不同。

 < div class =container_12> 
< header class =grid_12role =banner> 
< div class =bar grid_12 alpha omega> 
< div class =grid_6 alpha> 
电话号码
< / div> 
< div class =grid_6 omega> 
德语 - 英语 - 法语
< / div> 
< / div> 
< div class =grid_6 alpha> 
 LOGOTYPE 
< / div> 
< nav class =grid_6 omegarole =navigation> 
< ul> 
导航
< / 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 contentrole =main> 
 <！ - 不知道这里发生了什么？我们假设这是主要内容。 - > 
< / 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>


Good Day,

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

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

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?.

However, I have some issues with <article> and <section> usage. W3C HTML5 specification says that <article> tag

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

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.

Let me explain my website structure:

  1. Backgrounds are added to the body element. Working perfectly.
  2. I use 960.gs grid 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).

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.

My layout before convertion to 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:

<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>.

解决方案

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.

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.

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.

<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结构 - &lt; article&gt ;,&lt; section&gt;和&lt; div&gt;用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆