在HTML5中使用section / article语义元素的最佳实践

时间:2016-08-02 08:22:40

标签: html5 semantic-markup

这是我第一次真正使用HTML5,我已经对文章/部分进行了一些研究,但我发现答案有点令人困惑。

这个陈述就是一个例子:

  

部分 - 用于将与主题相关的内容分组在一起。   听起来像div元素,但事实并非如此。 div没有语义   含义。在使用section元素替换所有div之前,请务必使用   问自己:“所有内容都相关吗?”

但如果我正确使用它,我仍然不能100%确定。

我已经an example website,这是正确使用section / article吗?

我基本上使用section作为首页上每个元素的“包装器”。 article我用于section内的每个元素。

这是最佳做法吗?

3 个答案:

答案 0 :(得分:0)

文章本身应该有意义,应该可以从网站的其他部分独立阅读。

  • 如果您想要做的只是看起来不同,请使用div标签 (通用容器)和CSS样式。
  • 如果您希望页面的特定部分与其余部分分开 页面由于其中的信息 - 其内容",使用部分 元素(通用部分)。

"文章" element是一种特殊的"部分&#34 ;;它具有比" section"更具体的语义含义。因为它是一个独立的,独立的相关内容块。我们可以使用" section",但使用" article"为内容赋予更多语义含义。

相比之下"部分"只是一块相关的内容," div"只是一块内容。要确定这三个元素中的哪一个是合适的,请选择第一个合适的选项:

  1. 内容在Feed阅读器中是否有意义?如果是这样,请使用文章。
  2. 内容是否相关?如果是这样,请使用
  3. 部分
  4. 最后如果没有语义关系,请使用div

答案 1 :(得分:0)

部分

<section>元素定义文档中的一个部分。

根据W3C's HTML5 documentation

  

部分是内容的主题分组,通常带有标题。

网站的主页可以分为几个部分,用于介绍,内容和联系信息。

文章

<article>元素指定独立的自包含内容。

根据W3C's HTML5 documentation

  

article元素表示文档,页面,应用程序或站点中的完整或自包含的组合,并且原则上可独立分发或可重用,例如,在联合。

它也可以有一个标题。

可以使用元素的示例:

  • 论坛帖子
  • 博客条目
  • 报纸或杂志文章

嵌套

如上所述,在HTML5标准中,<article>元素定义了一个完整的,独立的内容块。

<section>元素被定义为相关元素块。

是否可以使用这些定义来决定如何嵌套元素?不,它不是!

在互联网上,您会发现包含<section>元素且包含<article>元素的HTML网页,以及包含<article>元素的<sections>元素。

您还会发现包含<section>元素且包含<section>元素的网页以及包含<article>元素的<article>元素的网页。

示例:

  

报纸:体育部分的体育文章在每篇文章中都有技术部分。

我们为什么要使用语义HTML5元素?

  1. 这使得搜索引擎无法识别正确的网页内容。
  2. 这增加了HTML结构的语义含义,允许跨应用程序,企业和社区共享和重用数据。
  3. 这使得残障人士可以更方便地访问Web内容和Web应用程序(WAI-ARIA)。

答案 2 :(得分:0)

文章和部分之间的最大区别在于它们如何定义网页的结构布局和语义。 article元素用于不属于主题的内容,并且可以独立存在而没有任何附带的内容(即博客文章,新闻文章等)。 section元素组合了相关内容,并且通常包含一个标题和段落元素来描述

部分

在您的网站中,我只会使用文章标记作为推荐部分。您可以按如下方式进行嵌套:

<section class="testimonials">
    <h3>Testimonials</h3>
        <p>...</p>
    <article class="individual-response">
        <h4>Tim Cook</h4>
        <blockquote cite="...">text here</blockquote>
    </article>
</section>
...

这可能看起来令人困惑,但是section元素可以嵌套在其中的article元素,反之亦然。请记住区分它们的重要性。虽然内容可能看似相关,但有人说它与您的网站内容无关(您还可以使用文章部分中的blockquote元素定义直接引用并添加某些默认样式和语义值)。

至于部分标签,我会用它来定义你的&#34;关于我们&#34;部分以及列出所有可用服务及描述的部分。这里最好使用section标签,因为所有内容都直接捆绑在一起,依赖于所有内容才有意义并且属于主标题。

对于您的特色服务,我个人会使用div元素来分隔各个服务/描述,因为如果您考虑语义;每个服务都像它自己的部分,因为每个服务涵盖不同的内容。它不会属于文章标签,因为如果没有本节其余部分的背景,它就没有意义或者没有能力独立。

这是一个很长的解释,但我希望我能够详细介绍它,以便您理解。如果一切都有意义,请告诉我。