8

<article>尽管阅读了有关和标签的页面，但<section>我真的不明白如何将它们应用于我的网站。

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

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

但是，后来我读了一些其他的博客，我想到也许我应该用<section>标签替换<article>标签。

哪个是对的，为什么？谢谢。

4

3 回答 3

3

部分

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

文章

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

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

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

在他们的示例中，它们article在 a 中嵌套了section一个article。我会说你肯定正确使用它。

<article>
 <header></header>
 <section>
  <h1></h1>
  <article></article>
  <article></article>
 </section>
</article>
于 2013-10-29T15:40:11.320 回答
3

<article>是一个独立的内容，即使它周围的所有内容都被剥离了，它也应该是有意义的。<section>更像是一个通用容器，与 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 医生也有一个很棒的流程图。你可以试一试，看看是否有帮助。

于 2016-06-15T19:21:25.417 回答
0

在 HTML5 标准中，<"article">元素定义了一个完整的、自包含的相关元素块。

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

我们可以使用定义来决定如何嵌套元素吗？不，我们不可以！

在 Internet 上，您会发现包含元素的 HTML 页面和包含元素<"section">的元素。<"article"><"article"><"sections">

您还将找到<"section">包含<section>元素的页面和包含元素<article>的<"article">元素。

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

于 2015-08-12T05:51:08.087 回答