更新时间:2023-01-07 15:49:16
这取决于您的内容。 例如,最近的博客列表帖子可以是部分
,其中包含多个文章
(示例1),复杂的博客文章可能是文章
与几个 sectio n
(示例2),带评论的博客文章可以是
文章
(例3)。如何决定何时使用哪个?简单:
部分开始
。 nav的定义
。如果是,请使用 nav
,否则:的定义
。如果是,请将放在旁边
,否则: article
的定义 。如果是,请使用文章
,否则:部分
中。
示例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:
section
.nav
. If yes, go with nav
, else:aside
. If yes, go with aside
, else:article
. If yes, go with article
, else: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>