articleタグの使い方
articleタグとは、特定の記事やニュースの記事など「独立した記事のまとまり」に使うタグです。
「独立した記事のまとまり」とは、articleタグ内の情報の中身（コンテンツ）だけを抜きとって読んでも意味が成立する場合に使います。
ブログサイトの記事やニュースサイトの記事、記事のコメントなどにarticleタグをよく使用します。
articleタグは抜きとって読んでも前後の文脈が読み取れるか、articleタグの中にh1やh2などの見出しタグが入るかというのも使用する際のわかりやすい基準になります。
HTML の
参考：mdn web docs<article>要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
articleタグはアウトラインを生成する要素
articleタグはアウトラインを生成することができるセクショニング要素の1つです。
- アウトライン＝文書構造を明確にする
- 文書構造＝情報の中身に「見出し」「本文」など、それぞれの役割についての情報を付け加えたもの
- セクショニング要素＝文章のまとまった範囲などを囲い、検索エンジンが情報の中身を理解するのを助ける役割のこと
HTMLタグのセクショニング要素は以下の4つの要素のことです。
- “nav”要素
- “section”要素
- “article”要素（←今ここ）
- “aside”要素
articleタグの書き方
articleを記述することで部分的なマークアップをしていることになります。
- マークアップ＝ブラウザ上に表示されている内容をどういう意味でどういう意図を持って書かれているかを理解してもらうために、「タグ」を使ってコンピューターにわかってもらう事
コンピューターは書かれている文字を「データ」として扱います。なので、コーダー自身がHTMLを使ってマークアップすることでコンピューターにどういう役割なのか教える必要があります。
それではarticleタグの書き方についてみていきましょう。
articleタグの書き方
<article>
<h1>記事の見出しです</h1>
<p>記事の内容を書きました。</p>
</article>articleタグを入れ子にした時の書き方
articleタグを入れ子にして使う際は、外側（親要素）のarticleタグに内側（子要素）のarticleタグが関連づいていることが大事です。
例えば、パンの特集の記事を書いていくとしましょう。
親要素（外側）のarticleタグ内にはH1タグで「パン特集！」としましす。
子要素（内側）のarticleタグ内にはパンに関連する記事のまとまりを書いていきます。
このときに注意するのは、子要素（内側）のarticleタグだけでも独立している、またはそこだけ抜き取っても子要素（内側）のarticleタグだけで内容が成り立っていることがとても大切です。
<article>
<h1>パン特集！</h1>
<article>
<h2>レシピ集</h2>
<ul>
<li>クロワッサンを作ってみよう！</li>
<li>食パンを作ってみよう！</li>
<li>メロンパンを作ってみよう！</li>
</ul>
</article>
<article>
<h2>パンの歴史</h2>
<p>パンの歴史について書く</p>
</article>
</article>ページ内に複数の「article」タグを使用する場合は、各「article」タグにタイトルを付けることが推奨されています。
articleタグのまとめ
- 中身（コンテンツ）だけ抜きとって読んでも意味が成立する
- Hタグ（見出し）がある
- ただし、Hタグ（見出し）は必須ではない
- アウトライン（文書構造）を明確に設定する役割
articleタグの使い方を解説してみました。
articleタグは、SEO（検索エンジン最適化）において非常に重要な役割を持っています。
検索エンジンが、情報の中身（コンテンツ）の質を判断するときにも活躍しています。
つまり、記事や投稿などの特定の内容（コンテンツ）が「article」タグで囲まれている場合、検索エンジンはその情報の中身を重要なものと判断し、ページランクを上げることができる可能性を持っています。
重要な情報を正確に読み取ってもらうよう、適切にマークアップしていきましょう。