/

HTML容器標籤

HTML容器標籤

了解如何在HTML中使用容器標籤，並找出應該選擇哪個標籤。

容器標籤

HTML提供了一組容器標籤。這些標籤可以包含不特定的其他標籤。

我們有：

  • article
  • section
  • div

他們之間的區別可能讓人困惑。

讓我們看看何時使用它們中的每一個。

article

article標籤用於標識一個可以與頁面上的其他事物獨立的”事物”。

例如，首頁上的博客文章列表。

或者一個連接列表。

1
2
3
4
5
6
7
8
9
10
<div>
  <article>
    <h2>一篇博客文章</h2>
    <a ...>閱讀更多</a>
  </article>
  <article>
    <h2>另一篇博客文章</h2>
    <a ...>閱讀更多</a>
  </article>
</div>

我們並不限於列表：一個article可以成為頁面上的主要元素。

1
2
3
4
<article>
  <h2>一篇博客文章</h2>
  <p>這裡是內容...</p>
</article>

在article標籤內部，我們應該有一個標題(h1-h6)和…

section

表示文檔的一部分。每個部分都有一個標題標籤(h1-h6)，然後是該部分的內容。

示例：

1
2
3
4
5
<section>
  <h2>頁面的一個部分</h2>
  <p>...</p>
  <img ... />
</section>

將一篇長文章分拆為不同的部分是很有用的。

不應將其用作通用容器元素。div是為此而設計的。

div

div是通用的容器元素：

1
2
3
<div>
  ...
</div>

通常在此元素上添加class或id屬性，以允許使用CSS對其進行樣式設置。

我們在任何需要容器的地方使用div，但現有的標籤不適用。

與頁面相關的標籤

此標籤用於創建定義頁面導航的標記。在此內部，通常我們添加一個ul或ol列表：

1
2
3
4
5
6
<nav>
  <ol>
    <li><a href="/">首頁</a></li>
    <li><a href="/blog">博客</a></li>
  </ol>
</nav>

aside

aside標籤用於添加與主內容相關的內容片段。

例如，一個放置引文的框，或者一個側邊欄。

示例：

1
2
3
4
5
6
7
<div>
  <p>一些文本...</p>
  <aside>
    <p>一個引文..</p>
  </aside>
  <p>其他文本...</p>
</div>

使用aside標籤表示其中包含的內容不是它所處部分的正常流程的一部分。

header標籤表示頁面的介紹部分。例如，它可以包含一個或多個標題標籤(h1-h6)，文章的標語，一個圖片。

1
2
3
4
5
6
<article>
  <header>
    <h1>文章標題</h1>
  </header>
  ...
</article>

main

main標籤表示頁面的主要部分：

1
2
3
4
5
6
<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

footer標籤用於確定文章的頁腳，或頁面的頁腳：

1
2
3
4
5
6
<article>
  ....
  <footer>
    <p>頁腳註釋..</p>
  </footer>
</article>

tags: [“HTML”, “container tags”, “article”, “section”, “div”, “nav”, “aside”, “header”, “main”, “footer”]