了解如何在HTML中使用容器標籤,並找出應該選擇哪個標籤。
容器標籤
HTML提供了一組容器標籤。這些標籤可以包含不特定的其他標籤。
我們有:
article
section
div
他們之間的區別可能讓人困惑。
讓我們看看何時使用它們中的每一個。
article
article
標籤用於標識一個可以與頁面上的其他事物獨立的"事物"。
例如,首頁上的博客文章列表。
或者一個連接列表。
<div>
<article>
<h2>一篇博客文章</h2>
<a ...>閱讀更多</a>
</article>
<article>
<h2>另一篇博客文章</h2>
<a ...>閱讀更多</a>
</article>
</div>
我們並不限於列表:一個article
可以成為頁面上的主要元素。
<article>
<h2>一篇博客文章</h2>
<p>這裡是內容...</p>
</article>
在article
標籤內部,我們應該有一個標題(h1
-h6
)和…
section
表示文檔的一部分。每個部分都有一個標題標籤(h1
-h6
),然後是該部分的內容。
示例:
<section>
<h2>頁面的一個部分</h2>
<p>...</p>
<img ... />
</section>
將一篇長文章分拆為不同的部分是很有用的。
不應將其用作通用容器元素。div
是為此而設計的。
div
div
是通用的容器元素:
<div>
...
</div>
通常在此元素上添加class
或id
屬性,以允許使用CSS對其進行樣式設置。
我們在任何需要容器的地方使用div
,但現有的標籤不適用。
與頁面相關的標籤
nav
此標籤用於創建定義頁面導航的標記。在此內部,通常我們添加一個ul
或ol
列表:
<nav>
<ol>
<li><a href="/">首頁</a></li>
<li><a href="/blog">博客</a></li>
</ol>
</nav>
aside
aside
標籤用於添加與主內容相關的內容片段。
例如,一個放置引文的框,或者一個側邊欄。
示例:
<div>
<p>一些文本...</p>
<aside>
<p>一個引文..</p>
</aside>
<p>其他文本...</p>
</div>
使用aside
標籤表示其中包含的內容不是它所處部分的正常流程的一部分。
header
header
標籤表示頁面的介紹部分。例如,它可以包含一個或多個標題標籤(h1
-h6
),文章的標語,一個圖片。
<article>
<header>
<h1>文章標題</h1>
</header>
...
</article>
main
main
標籤表示頁面的主要部分:
<body>
....
<main>
<p>....</p>
</main>
</body>
footer
footer
標籤用於確定文章的頁腳,或頁面的頁腳:
<article>
....
<footer>
<p>頁腳註釋..</p>
</footer>
</article>