HTML要素 ・ ページ構造
<article>
独立したコンテンツ
ブログ記事やニュース、商品カードなど、それだけで完結し単独でも意味が通じる内容を表す要素です。
01
サンプルコード
HTML
1<article class="card">
2 <h2>春の新メニュー</h2>
3 <time datetime="2026-04-01">2026.04.01</time>
4 <p>桜のシフォンケーキが登場しました。</p>
5</article>
CSS
1.card {
2 max-width: 320px;
3 padding: 16px;
4 border: 1px solid #ddd;
5 border-radius: 6px;
6}
7.card h2 {
8 font-size: 18px;
9 margin: 0;
10}
11.card time {
12 font-size: 12px;
13 color: #888;
14}
02
実行結果
ブラウザでの表示
03
解説
article は、ページから切り離して別の場所に置いても意味が通じる、独立した内容を表します。RSSで配信される記事のようなものが典型です。
記事一覧のカードを1枚ずつ article にしたり、記事への個々のコメントを article にしたりと、1ページに複数使えます。
article の中で header や footer を使い、タイトルや著者情報をまとめることもできます。
04
応用例・注意点
article の中で使う要素
| 要素 | 説明 |
|---|---|
header | タイトル・投稿日などの導入 |
h1〜h6 | 記事の見出し |
time | 投稿日（datetime 属性で機械向けの日付） |
footer | 著者・タグ・関連リンク |
記事一覧をカードで並べる
1件ずつ article にし、全体を Grid で並べます。
HTML
1<div class="cards">
2 <article class="card">…</article>
3 <article class="card">…</article>
4</div>
CSS
1.cards {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
4 gap: 16px;
5}
注意点
- 01単なる囲みに article を使わないでください。独立性がなければ section や div を使います。
- 02article には見出しを含めるのが基本です。