【问题标题】:Confusion between <article> or <section> tags. Which to use?<article> 或 <section> 标签之间的混淆。使用哪个?
【发布时间】:2013-11-08 20:58:05
【问题描述】:

尽管阅读了有关&lt;article&gt;&lt;section&gt; 标签的页面,但我真的不明白如何将它们应用于我的网站。

我在页面末尾有一个包含相关产品的产品页面。首先我想到了做这样的事情:

<section>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</section>

<section>
  <header><h1>Related products</h1></header>
  <article>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </article>
</section>

但是,后来我阅读了一些其他博客,我突然想到,也许我应该用 &lt;article&gt; 标签替换 &lt;section&gt; 标签。

哪个是正确的,为什么?谢谢。

【问题讨论】:

标签: html article


【解决方案1】:

&lt;article&gt; 是一个独立的内容,即使它周围的所有内容都被剥离了,它也应该有意义。 &lt;section&gt; 更像是一个通用容器,与 div 标签非常相似,主要用于内容结构。所以正确的代码应该是这样的:

<article>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</article>

<article>
  <header><h1>Related products</h1></header>
  <section>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </section>
</article>

如果您在为自己的需要选择正确的 HTML5 语义元素感到困惑时,HTML 5 医生也有一个很棒的 Flowchart。您可以尝试一下,看看是否有帮助。

【讨论】:

    【解决方案2】:

    在 HTML5 标准中,&lt;"article"&gt; 元素定义了一个完整的、自包含的相关元素块。

    &lt;"section"&gt; 元素被定义为相关元素的块。

    我们可以使用定义来决定如何嵌套元素吗?不,我们不能!

    在 Internet 上,您会发现带有包含 &lt;"article"&gt; 元素的 &lt;"section"&gt; 元素和包含 &lt;"sections"&gt; 元素的 &lt;"article"&gt; 元素的 HTML 页面。

    您还可以找到包含&lt;section&gt; 元素的&lt;"section"&gt; 元素和包含&lt;"article"&gt; 元素的&lt;article&gt; 元素的页面。

    来自:http://www.w3schools.com/html/html5_semantic_elements.asp

    【讨论】:

      【解决方案3】:

      部分

      section 元素表示文档或应用程序的通用部分。在这种情况下,部分是内容的主题分组。应确定每个部分的主题,通常通过包含标题(h1-h6 元素)作为部分元素的子元素。

      文章

      article 元素代表文档、页面、应用程序或站点中的完整或自包含的组合,原则上是可独立分发或可重复使用的,例如在辛迪加。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具,或任何其他独立的内容项。

      当文章元素嵌套时,内层文章元素代表原则上与外层文章内容相关的文章。例如,接受用户提交的 cmets 的网站上的博客条目可以将 cmets 表示为嵌套在博客条目的 article 元素中的文章元素。

      直接来自 W3 http://www.w3.org/html/wg/drafts/html/master/sections.html


      在他们的示例中,他们有一个 article 嵌套在 section 内的 article 内。我会说你肯定用对了。

      <article>
       <header></header>
       <section>
        <h1></h1>
        <article></article>
        <article></article>
       </section>
      </article>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-11-20
        • 2011-08-17
        • 1970-01-01
        • 1970-01-01
        • 2017-01-23
        • 2012-11-12
        相关资源
        最近更新 更多