【HTML Living Standard】article要素の使い方
article要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
articleオブジェクトは、ウェブページ内の自己完結型で独立したコンテンツのまとまりを表すオブジェクトです。この要素で囲まれた内容は、ウェブページ全体や他の部分から独立して単独で配信、再利用、または共有が可能なものであるべきです。例えば、ブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメント、独立したウィジェットなどがarticleオブジェクトの典型的な使用例です。
HTML Living Standardでは、コンテンツの意味を明確にし、ウェブページの構造を適切に定義することが重視されます。articleオブジェクトを正しく使用することは、コンテンツの意味的な構造を明確にし、検索エンジンが内容を理解しやすくする上で重要です。また、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、コンテンツの境界と内容を正確に把握するのに役立ち、ウェブアクセシビリティの向上に寄与します。
各articleオブジェクトは通常、見出し（h1〜h6）を持つべきですが、これは必須ではありません。記事の公開日や著者情報など、そのコンテンツに関連するメタデータも含むことができます。section要素と混同されがちですが、articleは独立したコンテンツブロックであるのに対し、sectionはドキュメントやarticle内のテーマに基づいた汎用的な区切りとして使用されます。ページ内で複数のarticleオブジェクトを使用することも可能で、それぞれが独立したコンテンツとして機能します。適切な要素の選択は、セマンティックなウェブ構築の基礎です。
構文(syntax)
1<article> 2 <!-- 記事のコンテンツがここに入ります。独立した自己完結型のコンテンツを表します。 --> 3 <h2>記事のタイトル</h2> 4 <p>これは記事の本文です。</p> 5 <p>著者: 〇〇</p> 6</article>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML articleタグで記事コンテンツを表現する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>記事のサンプルページ</title> 7</head> 8<body> 9 <!-- 10 <article>タグは、ウェブページ内で独立した自己完結型のコンテンツのセクションを表します。 11 例えば、ブログ記事、ニュース記事、フォーラムの投稿、ユーザーのコメントなどが該当します。 12 この内容は、ウェブサイトの他の部分から独立して配布または再利用できるべきです。 13 --> 14 <article> 15 <h2>HTMLにおけるarticleタグの活用</h2> 16 <p> 17 <time datetime="2023-10-27">2023年10月27日</time> 公開 18 </p> 19 <p>著者: <strong>プログラミング専門家</strong></p> 20 <p> 21 この記事では、HTML5で導入された<code><article></code>タグの基本的な使い方と、 22 セマンティックなマークアップにおけるその重要性について解説します。 23 </p> 24 <p> 25 <code><article></code>タグは、単独で意味が通じる完結したコンテンツブロックを定義します。 26 これにより、検索エンジンやスクリーンリーダーなどの補助技術に対して、 27 コンテンツの構造と意味をより正確に伝えることができます。 28 </p> 29 <h3>セマンティックなHTMLの利点</h3> 30 <p> 31 セマンティックなHTMLは、ウェブアクセシビリティの向上とSEO（検索エンジン最適化）に大きく貢献します。 32 <code><article></code>のような適切なHTML5のセクション要素を使用することで、 33 コンテンツが「記事」や「投稿」として認識され、その目的が明確になります。 34 </p> 35 </article> 36</body> 37</html>
articleタグは、HTMLにおいて、独立した自己完結型のコンテンツのセクションを表す要素です。ウェブページ内で完結しており、他のコンテンツから切り離しても意味が通じるような内容に用いられます。具体的には、ブログの記事、ニュース記事、フォーラムの投稿、ユーザーからのコメントなどがこれに該当し、ウェブサイトの他の部分から独立して再配布や再利用が可能であることを示します。
このタグを使用する主な目的は、コンテンツにセマンティックな意味（構造的な意味）を与えることです。これにより、検索エンジンはコンテンツが「記事」や「投稿」であることを正確に理解し、ウェブアクセシビリティ向上のためにスクリーンリーダーなどの補助技術も、ページの構造をより適切に解釈できるようになります。結果として、ウェブサイトのSEO（検索エンジン最適化）にも良い影響を与えます。
articleタグ自体には特定の引数（属性）や戻り値はありません。HTML要素としての振る舞いを通じて、コンテンツの構造的な意味を定義する役割を担います。サンプルコードでは、見出し、公開日、著者情報、本文を含む一連の段落が<article>タグで囲まれており、これらが一つの独立した記事コンテンツであることを明確に示しています。このように、コンテンツのまとまりを論理的に区切ることで、ウェブページの構造がより理解しやすくなります。
articleタグは、ブログ記事やニュース記事、コメントなど、それ単体で意味が完結し、独立して再利用可能なコンテンツのまとまりを示します。これは、単なるグループ化に使われるdivタグと異なり、コンテンツの構造と意味を正確に伝えるためのセマンティックな要素です。この適切なマークアップは、検索エンジンやスクリーンリーダーがコンテンツを正しく理解する手助けとなり、ウェブアクセシビリティやSEO向上に貢献します。記事の見出し、公開日、著者情報など、コンテンツに必要な要素はarticleタグ内に含めてください。
HTML article と section を使う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML article と section のサンプル</title> 7</head> 8<body> 9 <!-- このコードは、HTMLのarticle要素とsection要素を使って、 10 独立したコンテンツ（例: ブログ記事）の構造を定義する方法を示します。 --> 11 12 <!-- article要素: 文書、ページ、サイト、またはアプリケーション内の独立したコンテンツを表します。 13 ブログ投稿、ニュース記事、フォーラム投稿など、それ自体で完結しており、 14 再利用可能なコンテンツのブロックに最適です。 --> 15 <article> 16 <h1>HTMLセマンティック要素：articleとsectionの活用法</h1> 17 <p>公開日: <time datetime="2023-10-27">2023年10月27日</time></p> 18 <p>著者: SE初心者</p> 19 20 <!-- section要素: 文書またはアプリケーションの汎用的な区画を表します。 21 関連するコンテンツをグループ化するために使用され、通常は見出しを持つべきです。 22 article要素の内部で、記事の章や節を区切るのに適しています。 --> 23 <section> 24 <h2>はじめに</h2> 25 <p>HTML5では、ウェブページの構造をより意味的にするための新しい要素が導入されました。この記事では、特に<code><article></code>要素と<code><section></code>要素に焦点を当て、それぞれの役割と適切な使い方を初心者向けに解説します。</p> 26 </section> 27 28 <section> 29 <h2>article要素とは？</h2> 30 <p><code><article></code>要素は、それ自体で完結し、独立して配布または再利用可能なコンテンツの塊をマークアップするために使用されます。例えば、ブログの記事全体、ニュースサイトの個別記事、ユーザーが投稿したコメントなどがこれに該当します。それぞれの<code><article></code>は、通常、独自のタイトル（<code><h1></code>〜<code><h6></code>）を持つべきです。</p> 31 </section> 32 33 <section> 34 <h2>section要素とは？</h2> 35 <p><code><section></code>要素は、文書またはアプリケーション内の関連コンテンツをグループ化するために使用されます。これらは通常、明確な見出し（<code><h1></code>〜<code><h6></code>）を持つべきです。<code><article></code>要素の内部で、導入、本文、まとめといった個別のセクションを定義するのに非常に役立ちます。</p> 36 </section> 37 38 <section> 39 <h2>まとめと使い分け</h2> 40 <p>簡単に言えば、<code><article></code>は「独立した一つのコンテンツ」を表現し、<code><section></code>は「そのコンテンツ内部の関連する部分」を表現します。これらのセマンティックな要素を適切に使用することで、ウェブページの構造が明確になり、アクセシビリティや検索エンジン最適化（SEO）にも良い影響を与えます。</p> 41 </section> 42 </article> 43 44</body> 45</html>
このサンプルコードは、HTMLでウェブページのコンテンツ構造を意味的に表現するための主要な要素であるarticleとsectionの使い方を示しています。
article要素は、文書、ページ、サイト、またはアプリケーション内で独立した完結したコンテンツの塊を表します。例えば、ブログ記事全体、ニュース記事、フォーラム投稿のように、それ自体で意味が通じ、他の場所でも単独で配布・再利用可能な内容をマークアップする際に使用します。この要素には特定の引数（属性）や、プログラミング言語におけるような戻り値はありませんが、その内部に記述されたHTMLコンテンツがウェブブラウザに表示される形で結果を提供します。
一方、section要素は、文書またはアプリケーション内の関連するコンテンツをグループ化するために使われます。通常、h1からh6までの見出しを含み、特定のテーマを持ったまとまりを表現します。サンプルコードでは、article要素で表現されたブログ記事の内部で、「はじめに」「article要素とは？」といった各章や節を区切るためにsectionが使われています。sectionもarticleと同様に、特別な引数や戻り値は持ちません。
要するに、articleは「独立した一つのコンテンツ」全体を包み込み、sectionはそのarticleの内部、または他のより大きな文書構造の中で「関連する部分」をグループ化します。これらのセマンティックな要素を適切に使い分けることで、ウェブページの構造が明確になり、ユーザーにとってのアクセシビリティ向上や、検索エンジンがコンテンツ内容を理解しやすくなる効果が期待できます。
このサンプルコードでは、article要素がブログ記事のような「独立した完結したコンテンツ」を表し、その内部でsection要素が「記事内の章や節」のように関連する内容の区切りを示しています。初心者が間違いやすい点として、両要素の使い分けが挙げられます。articleはそれ自体で完結して再利用可能なコンテンツの塊に、sectionは文書内の汎用的な区画で、関連コンテンツをグループ化する際に使用します。どちらの要素も通常は適切な見出し（h1〜h6）を持つべきです。これらの要素を正しく利用することで、ウェブページの構造が明確になり、検索エンジン最適化（SEO）やアクセシビリティの向上に繋がります。単なる見た目のレイアウトのためではなく、コンテンツの意味的な構造を表現するために利用することが重要です。