この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
articleタグとは
「articleタグ」はHTML5に導入されたセマンティック要素で、文章、記事、ブログエントリー、コメント、フォーラムの投稿など、配布や再利用が可能な自己完結したコンテンツに使用されます。
セマンティック要素とは
articleタグはセマンティック要素の一つです。
セマンティック要素とは、その要素が何を表しているのか、つまりその要素が持つ意味を明示的に表現するHTMLの要素を指します。セマンティック要素を使用することでコンテンツの構造がより明確になり、視覚的にブラウジングしている人だけでなく、スクリーンリーダーを使用している人や検索エンジンもコンテンツを理解しやすくなります。
これにより、ウェブアクセシビリティが向上し、SEO（検索エンジン最適化）にも寄与します。
HTML5から導入された新しいセマンティック要素には、以下のようなものがあります
- headerタグ：文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
- navタグ：ナビゲーションリンクを表す。グローバルナビゲーションなどに使う。
- articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
- sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
- asideタグ：補足情報などを表す。無くてもコンテンツの本筋の意味は通じる要素に使う。
- footerタグ：直近のセクションに関する情報を示す。関連リンクや著作権情報など。
これらの要素を適切に使用することで、ウェブページの構造が明確になり、ユーザーエージェント（ブラウザやスクリーンリーダーなど）が内容を理解しやすくなります。
ただし、装飾やデザイン目的での使用は推奨されません。そのような目的の場合は、意味を持たない非セマンティックな<div>や<span>などのタグが適切です。
aritcleタグの使用例
articleタグは、その名の通り記事やニュース記事、コメント欄など、独立した意味を成すセクションに使用されます。例えば、以下のような使い方があります。
<article>
<h1>大見出し</h1>
<h2>小見出し1</h2>
<p>テキスト1</p>
<h2>小見出し2</h2>
<p>テキスト2</p>
</article>
また、articleタグは他のセマンティック要素と組み合わせて使用することも多いです。例えば、sectionタグ、asideタグ、navタグ、headerタグ、footerタグなどと組み合わせて、以下のような文書構造を作ることもできます。
<body>
<header>
<nav></nav>
</header>
<main>
<article>
<section></section>
<section></section>
</article>
<aside></aside>
</main>
<footer></footer>
</body>
articleタグは独立したセクションを明確に示すための有用なツールです。その他のセマンティック要素との違いを理解し、それぞれ適切な場所で使うことが、ウェブページの効率的な構造化に繋がります。
articleタグ使用上のポイント
articleタグは複数回使用可能
articleタグは同一ページ内で何度使っても構いません。たとえば、ブログの投稿一覧ページでは、各投稿がそれぞれ<article>で囲まれている場合などが考えられます。
コンテンツ内に見出しを設置する
articleタグ内のコンテンツにはh1～h6の見出しを設置してください。見出しを設置しないとプログラムがHTMLのアウトラインを認識せず、文書構造明確化の効果が薄いです。
sectionタグとの違い
articleタグとsectionタグはどちらもページの特定の部分を囲むための要素ですが、使い分けが必要です。
sectionタグはその名の通り文章の節や章を表すタグでarticleタグと同様、セクション分けにまつわるタグですが、articleタグより汎用性が高いのが特徴です。articleタグはその内容が自己完結している必要がありますが、sectionタグ内のコンテンツは独立・完結している必要はありません。articleタグの子要素としてsectionタグが使用されるケースが多いと思います。
装飾、デザイン目的での使用は避ける
<article>タグはセマンティック（意味的）な要素であるため、主に文書の構造を明示する目的で使用されるため、装飾またはデザイン目的での使用は推奨されていません。つまりCSSやJavaScriptでのDOM操作を目的としてarticleタグを使用しないようにしましょう。そのような目的であれば、意味を持たない<div>タグを使用してください。
まとめ
articleタグはそれ自体で完結したセクションに使うタグです。sectionタグなど似たようなタグが多いので混乱しないようにしましょう。
