独立したコンテンツを表すには?
articleタグの書式
articleタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
articleタグの属性一覧
articleタグの解説
<article>タグは、独立したコンテンツを示すための要素です。
<article>~</article>には、ニュースサイトの記事、ブログや掲示板の投稿など、再利用・再配布可能なコンテンツを入れます。
ブログの記事を<article>タグで記述し、その中のコメントをさらに<article>タグで記述するなど、<article>タグは入れ子の構造にする(ネストする)こともできます。
<article>タグが入れ子の構造にする(ネストする)場合は、内側の<article>タグの内容は外側の<article>タグの内容と関連性のあるものになるのが普通です。
articleタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<article>
<header>
<h1>相撲について</h1>
</header>
<p>相撲は、日本の国技でとても人気のあるスポーツです。</p>
<p>相撲のルーツは、日本最古の歴史書『日本書紀』によれば垂仁天皇が、出雲国の野見宿禰と、大和国の当麻蹴速を戦わせたことが始まりといわれています。</p>
<p>その後、野見宿禰と当麻蹴速の二人は相撲の神といわれるようになりました。</p>
<p>相撲の歴史をひも解くと、過去には、江戸時代に「辻相撲禁止令」、明治時代に「裸体禁止令」といった相撲禁止の律令が施行されたりもしました。</p>
<p>今回は、相撲の歴史について詳しく紹介したいと思います。</p>
<footer>
<p><small><a href="/comments/001.html">詳細を見る</a></small></p>
</footer>
</article>
</body>
</html>
articleタグのサンプル画面1
articleタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<article>
<header>
<h1>クリスマスの話</h1>
</header>
<p>今回はクリスマスのお話をします。</p>
<p>次回は元旦についてお話しします。そちらもお楽しみに。</p>
<section>
<h1>コメント</h1>
<article>
<footer>
<p>投稿者: Tanaka</p>
</footer>
<p>いい話ですね。次回も楽しみにしています。</p>
</article>
<article>
<footer>
<p>投稿者: 渡辺</p>
</footer>
<p>そんな逸話があったのですね。とても参考になりました。ありがとうございました。</p>
</article>
</section>
</article>
</body>
</html>
articleタグのサンプル画面2
articleタグの関連項目