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