HTML <article> タグ

定義と用法

<article> タグは独立した、自己完結したコンテンツを定義します。

一篇文章は独立して理解でき、サイト全体から独立して配布できるべきです。

<articel> 要素の潜在的なソースには、以下が含まれます：

  • フォーラムの帖子
  • ブログ記事
  • ニュースレポート
  • ユーザーコメント

注意：ブラウザ内で、<article> 要素自体は特別なスタイルを表示しませんが、CSSスタイルを使用してスタイル化できます。 <article> 要素（以下の例を参照）。

参照もしくは：

HTML DOMリファレンスマニュアル：Articleオブジェクト

例

例1

独立して存在する3つのコンテンツ：

<article>
<h2>グーグル・クローム</h2>
<p>グーグル・クロームはグーグルが開発したウェブブラウザで、2008年にリリースされました。クロームは今や最も人気のあるウェブブラウザです！</p>
</article>
<article>
<h2>モジラ・ファイアフォックス</h2>
<p>モジラ・ファイアフォックスはモジラが開発したオープンソースのウェブブラウザです。2018年1月以降、ファイアフォックスは最も人気のあるウェブブラウザの第2位です。</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>最も人気のあるブラウザ</h1>
  <article class="browser">
    <h2>グーグル・クローム</h2>
    <p>グーグル・クロームはグーグルが開発したウェブブラウザで、2008年にリリースされました。クロームは今や最も人気のあるウェブブラウザです！</p>
  </article>
  <article class="browser">
    <h2>モジラ・ファイアフォックス</h2>
    <p>モジラ・ファイアフォックスはモジラが開発したオープンソースのウェブブラウザです。2018年1月以降、ファイアフォックスは最も人気のあるウェブブラウザの第2位です。</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