記事要素

HTMLのarticle 要素は、やに似たセマンティック要素です。HTML5 で導入され、サイトやアプリケーションの他の部分とは独立して配信される可能性のある情報を格納するために最もよく使用されます。 <section><header>

機能と使用方法

この要素は、ウェブページまたはウェブアプリケーション<article>内の、独立して配布または再利用（例えばシンジケーション）可能な完全な構成を表します。これには、フォーラム投稿、雑誌や新聞記事、ブログエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、その他の独立したコンテンツアイテムが含まれます。^{[ 1 ]}

例

最も基本的な使い方としては、<article>次のようにテキスト本文とそれに対応するタイトルをカプセル化するために使用できます。

< article > < h2 >ここにタイトルを挿入</ h2 > < p >ここにテキストの段落を挿入</ p > </ article >

フォーラムのエントリとコメントは通常、ネストされた<article>タグによって実装されます。

< article > < header > < h1 >エントリータイトル</ h1 > < p >ヘッダー情報</ p > </ header > < p >エントリーの内容... </ p > < article > < header > < h2 >著者: John Smith </ h2 > < p >コメント情報</ p > </ header > < p >コメント本文... </ p > </ article > < article > < header > < h2 >著者: Jane Johnson </ h2 > < p > 2番目のコメントの情報</ p > </ header > < p >コメント本文... </ p > </ article > </ article >

属性

要素には、 contenteditable、id、 titleなどの<article>グローバルHTML属性のみが含まれます。^{[ 2 ]}ただし、要素のオプションのブール属性であるpubdateは、しばしばと組み合わせて使用​​されます。pubdateが存在する場合、要素は公開された日付であることを示します。pubdateは親要素、または文書全体にのみ適用されることに注意してください。^{[ 3 ]}<time><article><time><article><article>

<section>との比較

HTML5では、とが導入されました<article>。<section>どちらもセマンティックタグであり、文書内の章、ヘッダー、フッターなどのセクションを定義します。^{[ 4 ]}要素は<article>実質的に特殊な種類のであり<section>、より具体的な意味を持ち、関連するコンテンツの独立した自己完結的なブロックを参照します。^{[ 3 ] [ 5 ]}

ネストの例

独立したコンテンツをより適切に整理するために、<section>タグをタグ内にネストすることができます<article>。

< article > < h2 >図形の名前</ h2 > < p >図形にはいくつかの種類があります... </ p > < section > < h4 >三角形</ h4 > < p >三角形に関する情報です</ p > </ section > < section > < h4 >円</ h4 > < p >これらのπ形の驚異は魅惑的で... </ p > </ section > </ article >

<article>逆に、要素の中に要素をネストすることが適切な場合もあります<section>。例えば、様々なテーマの記事が複数含まれているウェブページの場合、次のようなケースが考えられます。

< section > < h1 >パリ観光に関する記事</ h1 > < article > < h3 >エッフェル塔</ h3 > < p >高さ 12 インチを超える... </ p > </ article > < article > < h3 >ルーブル美術館</ h3 > < p >パリ観光で必ず訪れるべき場所... </ p > </ article > </ section >

ブラウザのサポート

以下のブラウザはこの要素をサポートしています: ^{[ 6 ]}

• デスクトップ
  • Google Chrome 5.0以降
  • Firefox 4.0以降
  • Internet Explorer 9.0以降
  • Safari 4.1以降
  • Opera 11.1以降
• 携帯
  • Android 2.2以降
  • Firefox Mobile (Gecko) 4.0以降
  • IEモバイル9.0以上
  • Safari Mobile 5.0以降
  • Opera Mobile 11.0以降

参考文献

1. 「HTML5 article要素 - W3C」 . W3.org . 2014年5月8日閲覧。
2. 「記事コンテンツ要素」 MDN Web Docs . 2018年7月9日閲覧。
3. 「article要素」 . html5doctor.com . 2018年7月9日閲覧。
4. 「セクションタグ」 . W3Schools . 2014年4月30日. 2014年5月8日閲覧。
5. 「HTML5: セクションか記事か?」 Iandevlin.com 2013年8月19日2014年5月8日閲覧。
6. 「HTML5、CSS3などのサポートテーブルを使用できますか？」caniuse.com。2018年7月9日閲覧。

外部リンク

• 記事要素- WHATWGの現在の公式仕様
  • 記事要素- W3C 2011 公式仕様
• リッチスニペットWordPressプラグイン