<sections>应该<articles>还是<articles>应该<sections>?

Har*_*ody 7 html html5 semantic-markup

我正在阅读Mark Pilgirm的" 潜入HTML5 ",在语义部分,它讨论了HTML5如何引入<article><section>元素.它表示<section>s表示通用文档或部分,而<article>s表示自包含的组合.无论如何,我都没有看到逻辑上语义的父子关系.

我尝试通过HTML5大纲视图运行以下代码,它似乎表明文档大纲是相同的,无论它们是如何嵌套的.

所以我的问题是:应该<section>嵌套在<article>s中,应该<article>嵌套在<secion>s中,还是从语义视点来看无关紧要?

<section><h1>section article?</h1>
  <article><h1>art 1</h1></article>
  <article><h1>art 2</h1></article>
  <article><h1>art 3</h1></article>
</section>

<article><h1>article section?</h1>
  <section><h1>sec 1</h1></section>
  <section><h1>sec 2</h1></section>
  <section><h1>sec 3</h1></section>
</article>
Run Code Online (Sandbox Code Playgroud)

Bol*_*ock 12

以任何一种方式嵌套都是完全可以接受的.虽然文档大纲没有区分a <section>和a <article>,但从语义的角度来看,它们是两个不同的东西.这就是将它们作为两个不同的语义元素引入的重点.

如果您的网页包含多篇文章,请使用第一个代码段.

当您的文章足够全面以包含多个部分时,请使用第二个代码段.

如果两者都适合您的内容,您甚至可以将它们组合在一起,这样您的标记就像这样:

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>
Run Code Online (Sandbox Code Playgroud)


ani*_*son 5

HTML 文档倾向于在文章中使用部分。似乎建议您应该始终使用 an<article>并且将 each<section>用于该文章的一部分。他们举例子涉及苹果:

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>
Run Code Online (Sandbox Code Playgroud)

我没有看到很多例子 a<section>不包含在 an 中<article>,但 an<article>可以<article>在其中包含另一个,这样博客就会由一篇文章表示,然后对该博客的评论将由父级内部的另一篇文章表示文章。所以,这看起来是你应该前进的方向。

所以,从苹果的例子继续:如果你想允许用户对每种类型的苹果发表评论,那么在这种情况下,你将在一个部分中有一篇文章,这仍然是一篇文章。


在深入研究并仔细思考之后,这是我提出的概括:

使用文章应该保留用于“帖子”,例如博客、主题(及其每个后续帖子)、评论等。任何可以有作者的东西都应该使用<article>元素。

应该保留使用部分来分隔您网站的部分,例如介绍(您的网站可能是关于什么的)、一些新闻文章或文章中用于评论的区域。任何东西的“部分”(没有真正的作者)。