HTML <article> 標簽

定義和用法

<article> 標簽規定獨立的、自包含的內容。

一篇文章應該能夠獨立理解，且可以獨立于整個站點進行分發。

<articel> 元素的潛在來源包括：

  • 論壇帖子
  • 博客文章
  • 新聞報道
  • 用戶評論

注意：在瀏覽器中，<article> 元素本身不會呈現任何特殊的樣式。但是，你可以使用 CSS 樣式化 <article> 元素（請參見下面的例子）。

另請參閱：

HTML DOM 參考手冊：Article 對象

實例

例子 1

三篇內容獨立、自成一體的文章：

<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是谷歌開發的網絡瀏覽器，于 2008 年發布。Chrome 是當今世界上最受歡迎的網絡瀏覽器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 開發的開源網絡瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二大最受歡迎的網絡瀏覽器。</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是微軟開發的一款網絡瀏覽器，于 2015 年發布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>

親自試一試

例子 2

使用 CSS 設置 <article> 元素的樣式：

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌開發的網絡瀏覽器，于 2008 年發布。Chrome 是當今世界上最受歡迎的網絡瀏覽器！</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 開發的開源網絡瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二大最受歡迎的網絡瀏覽器。</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微軟開發的一款網絡瀏覽器，于 2015 年發布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</article>
</body>
</html>

親自試一試

全局屬性

<article> 標簽還支持 HTML 中的全局屬性。

事件屬性

<article> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <article> 元素：

article {
  display: block;
}

瀏覽器支持

表中的數字注明了首個完全支持該元素的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1