HTML <記事>タグ

例

独立した自己完結型のコンテンツを含む3つの記事：

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

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

記事はそれ自体で意味があり、サイトの他の部分から独立して配布できる必要があります。

要素の潜在的なソース<article>：

フォーラム投稿
ブログ投稿
ニュース記事

注：要素<article>は、ブラウザーで特別なものとしてレンダリングされません。ただし、CSSを使用して<article> 要素のスタイルを設定できます（以下の例を参照）。

ブラウザのサポート

表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。

Element
<article>	6.0	9.0	4.0	5.0	11.1

グローバル属性

この<article>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<article>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

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 is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>

</body>
</html>

デフォルトのCSS設定

ほとんどのブラウザは<article>、次のデフォルト値で要素を表示します。

article {
display: block;
}

❮前へ完全なHTMLリファレンス次へ❯

HTMLリファレンス

HTML Tags