如何使用< section>和<物品> HTML5中的标签？ [英] How to use <section> and <article> tags in HTML5?

问题描述

我很困惑如何在HTML5中使用< article> 和< section> 标记。

我在Google和Stack Overflow网站中都引用了很多。

在那篇文章中，我找到了带有< section> 包含< article> 元素的元素，以及< article> < sections> 元素的元素c $ c>元素。

我还发现了带有< section> 包含< section> 元素的元素，以及< article> 包含< article> 元素的元素。

这些标签的确切用途是什么？

解决方案

这取决于您的内容。 例如，最近的博客列表帖子可以是部分，其中包含多个文章（示例1），复杂的博客文章可能是文章与几个 sectio n （示例2），带评论的博客文章可以是文章，部分和几个文章（例3）。

如何决定何时使用哪个？简单：

1. 如果您需要分区内容元素，请从部分开始。


2. 检查内容是否与 nav的定义 。如果是，请使用 nav ，否则：


3. 检查内容是否与 的定义 。如果是，请将放在旁边，否则：


4. 检查内容是否与 article 的定义 。如果是，请使用文章，否则：


5. 留在部分中。

---

示例1：博客文章列表

 < section> 
< h1>最近的博文< / h1> 
 
< article> 
< h2>博文1< / h2> 
< / article> 
 
< article> 
< h2>博客文章2< / h2> 
< / article> 
 
< / section> 
  

示例2：一篇复杂的博客文章

 <物品> 
< h2>博文1< / h2> 
 
< section> 
< h3>所以，这就是发生的事情< / h3> 
< / section> 
 
< section> 
< h3>其他人说的< / h3> 
< / section> 
 
< / article> 
  

示例3：带评论的博客文章

 <物品> 
< h2>博客文章2< / h2> 
 
< section> 
< h3>评论< / h3> 
 
<文章> 
< p>第一！< / p> 
< / article> 
 
< article> 
< p>首先！ < ins>编辑：该死的，第二个:(< / ins>< / p> 
< / article> 
 
< / section> 
 
< / article> 
  

I just confused how to use <article> and <section> tags in HTML5.

I referenced lot in Google and also in Stack Overflow website.

On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.

I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

What is the exact use of these tags?

解决方案

It depends on your content.

For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).

How to decide when to use which? Easy:

1. If you need a sectioning content element, start with section.
2. Check if the content matches the definition of nav. If yes, go with nav, else:
3. Check if the content matches the definition of aside. If yes, go with aside, else:
4. Check if the content matches the definition of article. If yes, go with article, else:
5. Stay with section.

---

Example 1: A list of blog posts

<section>
  <h1>Recent blog posts</h1>

  <article>
    <h2>Blog post 1</h2>
  </article>

  <article>
    <h2>Blog post 2</h2>
  </article>

</section>

Example 2: A complex blog post

<article>
  <h2>Blog post 1</h2>

  <section>
    <h3>So, this is what happened</h3>
  </section>

  <section>
    <h3>What the others said</h3>
  </section>

</article>

Example 3: A blog post with comments

<article>
  <h2>Blog post 2</h2>

  <section>
    <h3>Comments</h3>

    <article>
      <p>First!</p>
    </article> 

    <article>
      <p>First! <ins>Edit: Damn, second :(</ins></p>
    </article>        

  </section>

</article>

这篇关于如何使用< section>和<物品> HTML5中的标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！