HTML5帶出了一系列新元素,並且將在未來被廣泛應用。然而,有一些元素在使用時易被混淆,包括以下兩個新元素:<article>和<section>。
在問答網站經常可以看到別人問:在什麼情況下我們應該使用這些元素?我們應該如何正確的使用這些元素?<article>和<section>有什麼區別?
鑑於以上的這些問題,E良師益友網爲大家講解一下<article>和<section>的區別:
一、Article元素
從名字上,它已經很好的詮釋了自己,但是我們仍要看看官方文檔上是如何描述它的:
“在文檔,頁面,應用或是站點上的一個獨立部分,並且大體上,是可獨立分配,或是重複使用的,例如在發佈時。這個可以是論壇帖子,雜誌或是新聞,博客條目,用戶提交的評論,互動的小工具或小工具,或任何其他獨立項目的內容。”
從上描述中,我們可以總結出<article>元素專用於結構化文章,特別是我們要發佈的,例如博客,頁面內容或是論壇帖子。
以下例子給出瞭如何使用<article>構建一個博客文章。
-
<article class="post">
-
<header>
-
<h1>This is Blog Post Title</h1>
-
<div class="post-meta">
-
<ul>
-
<li class="author">Author Name</li>
-
<li class="categories">Save in Categories</li>
-
</ul>
-
</div>
-
</header>
-
-
<div class="post-content">
-
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
-
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
-
cake tootsie roll sesame snaps lolliPop gingerbread
bonbon. Gummies
-
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
-
</div>
-
-
</article>
複製代碼
此外,<article>元素還可與section元素結合,需要的時候,可以使用<section>元素將文章分爲幾個段落,如下例所示。
-
<article class="post">
-
<header>
-
<h1>This is Blog Post Title</h1>
-
<div class="post-meta">
-
<ul>
-
<li class="author">Author Name</li>
-
<li class="categories">Save in Categories</li>
-
</ul>
-
</div>
-
</header>
-
-
<div class="post-content">
-
<section>
-
<h2>This is the Sub-Heading</h2>
-
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
-
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
-
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
-
gummies danish biscuit applicake gingerbread jelly-o pastry.
-
</section>
-
-
<section>
-
<h3>This is another Sub-Heading</h3>
-
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
-
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
-
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
-
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
-
</section>
-
</div>
-
-
</article>
複製代碼
二、Section元素
這是一個最容易產生歧義的元素。它與<div>元素有什麼區別?我們一直在用<div>來劃分段落,所以除了<div>,我們什麼時候使用這個元素。我們引用官方文檔來闡述它。根據WHATWG文檔,對<section>元素做了以下描述:
“<section>元素表示了一篇文檔或應用中,通用段落 – WHATWG”
從描述中我們可以看出<section>元素的作用就是分段,或多或少類似於<div>。但是它仍有一個特例。在文檔中,加入了一段特別聲明:
“當一個元素僅用於風格樣式或是爲了腳本的方便,我們鼓勵作者使用<div>。<section>元素適用於,當元素的內容需要明確的列出時。- WHATWG”
基於這一點,我們可以總結以下兩點:
儘管section元素在技術上是可以設計樣式的,但是當有複雜的樣式或腳本時,我們仍建議使用div元素。
類似於<li>元素,section元素是用來列舉內容的。
因此在現實例子中,使用<section>元素的原因是結構化的列出博客的內容,代碼如下:
-
<div class="blog">
-
<section class="post">
-
<h2 class="post-title">Blog Post Title</h2>
-
<p class="post-excerpt">Ice cream tart powder jelly-o.
-
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
-
</section>
-
<section class="post">
-
<h2 class="post-title">Blog Post Title</h2>
-
<p class="post-excerpt">Ice cream tart powder jelly-o.
-
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
-
</section>
-
<section class="post">
-
<h2 class="post-title">Blog Post Title</h2>
-
<p class="post-excerpt">Ice cream tart powder jelly-o.
-
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
-
</section>
-
</div>
複製代碼
這只是個例子,<section>元素也可以用作其他用途。