Movatterモバイル変換


[0]ホーム

URL:


W3 Watch Reference - Web クリエイターのための HTML & CSS クイックリファレンスReference

サイト内検索

HTML Tag Reference

article 要素

記事セクションを表す

article 要素は文書内の独立した記事セクションを表します。例えば、ニュースサイトや Blog サイトにおける各記事や、それに付随するコメントなども独立した記事セクションと考えられます。

article 要素が入れ子になる場合、子孫となる article 要素は、先祖にあたる article 要素の内容に関連した記事を表すことになるでしょう。これは記事に対して投稿されたコメントなどを article 要素でマークアップする際などが該当すると思います。

なお、先祖となる article 要素に関連付けられた連絡先情報 (address 要素の解説をご覧ください) は、その子孫となる article 要素には適用されませんので、記事自体の連絡先情報とは別に、個々のコメントに対してそれぞれの投稿者の連絡先情報を関連づけるといったことも可能です。

article 要素の仕様

コンテンツモデル
この要素を使用できる文脈

セクショニングコンテンツが期待される場所

この要素で使用できる属性

article 要素のサンプルソース

<!-- Blog の記事などをマークアップした例 --><article> <header>  <h1>ブログの記事</h1>  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p> </header> <p>本文</p> <p>...</p> <footer>  <address>   著者: <a href="mailto:japan@example.com">日本太郎</a>  </address> </footer></article>
<!-- article 要素を入れ子にして、コメントをそれぞれマークアップした例 --><article> <header>  <h1>ブログの記事</h1>  <p><time datetime="2013-06-12T10:30:42+09:00">公開日: 2013年6月12日</time></p> </header> <p>本文</p> <p>...</p> <section>  <h1>この記事へのコメント</h1>  <article>   <h1>二郎さんのコメント</h1>   <p>とても参考になりました。</p>   <footer>    <address>投稿者: <a href="mailto:jiro@example.com">日本二郎</a></address>   </footer>  </article>  <article>   <h1>三郎さんのコメント</h1>   <p>とても勉強になりました。</p>   <footer>    <address>投稿者: <a href="mailto:saburo@example.com">日本三郎</a></address>   </footer>  </article> </section> <footer>  <address>   著者: <a href="mailto:japan@example.com">日本太郎</a>  </address> </footer></article>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

関連する要素

仕様書の該当箇所

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。

最新著書のご案内

できるポケット Web制作必携 HTML&CSS全事典 改訂4版

ロングセラー中。3度目の大幅改定となる改訂4版は 2024年12月24日 インプレスより発売。

コンパクトサイズの B6 判で、手元に置いておきやすい HTML / CSS のリファレンス本です。

Amazon で購入
アクセシビリティ対応、アクセシビリティガイドラインに準拠・配慮したウェブサイトの構築ならバーンワークス株式会社へ
詳しく見る

[8]ページ先頭

©2009-2025 Movatter.jp