HTMLで独立した記事セクションを示すarticleタグ。
初心者の中で、詳しい意味や役割、使い方などを理解している人は少ないのではないでしょうか？
・articleタグの意味は何？
・sectionタグと何が違うの？
・他のセクション要素との使い分けも知りたい･･･。
こんな悩みを抱えている人も多いでしょう。
今回は、articleタグの
・基本的な使い方
・sectionタグとの違い
・他のセクション要素との使い分け
について説明します。
目次 [非表示]
articleタグとは
articleタグとはどういった要素なのか、意味や役割を知らない人も多いです。
なのでここでは、articleタグについて詳しく解説します。
articleタグの読み方
articleタグは「アーティクル」と読みます。
「article」には「記事・条項・論説」という意味があり、HTMLでは「独立した記事のまとまり」を表します。
例えば、ブログサイトの記事やニュースサイトの記事、記事のコメントなどにarticleタグが使用されることが多いです。
articleタグは独立した記事セクションを示す要素
articleタグは「独立した記事セクションを示す要素」です。
図で表すと次のようなもの。
articleタグは、上記のように意味のあるまとまりを表す要素になります。
なので、articleタグの中にh1やh2などの見出しタグが来ることが多いです。
articleタグで利用できる属性
articleタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です。 |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
| title | 要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。 |
| lang | 要素の中で使われる言語を定義する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
articleタグの基本的な使い方
ここからは実際にarticleタグの使い方を解説していきます。
サイト制作で的確な使い方ができるように、理解を深めていきましょう。
articleタグの使い方
articleタグの使い方をコードを用いて見ていきます。
実際のコードは次の通り。
コードで書いた通り、articleタグは意味のあるまとまりを囲うタグです。
中にh1の見出しが付いていますね。
結果を表示すると以下のようになります。
見た目ではわかりませんが、Chromeのデベロッパーツールで見てみると、しっかりarticleタグで囲まれているのがわかります。
articleタグを使うことで、サイトの構造を理解しやすくなるので、使い方を覚えておきましょう。
articleタグとsectionタグとの違い
articleタグと似た要素で、sectionタグというものがあります。
このsectionタグもまとまりを作るセクション要素なのですが、articleタグとは使い方が少し異なります。
- ・articleタグ：まとまりの中で独立して、それだけで完結できる要素。
- ・sectionタグ：一般的な文章や節のまとまりを示す要素。
この2つの要素には、上記のような違いがあります。
実際のコードで書くと次の通り。
独立したまとまりである全体をarticleタグで囲います。
そして、その中にある1つ1つの章や節をsectionタグで囲うのです。
結果を表示すると、次のようになります。
見た目に特徴はありませんが、これもサイトの構造を理解するために重要なことです。
articleタグとsectionタグの違いを理解し、使い分けができるようにしておきましょう。
他のセクション要素との使い分け
セクション要素はarticleタグだけではありません。
他にも、headerタグやnavタグ、asideタグなどがあり、先ほど解説したsectionタグもセクション要素の1つです。
- ・headerタグ：ヘッダーを意味し、サイトの頭部分を表す。
- ・navタグ：ナビゲーションを意味し、ユーザーのページ移動を助ける要素。
- ・asideタグ：サイトの補足情報を表す要素。
その他のセクションタグには、上記のような役割の違いがあります。
それぞれの役割によって使う箇所が異なるので、しっかりと違いを理解しておくことが必要です。
参考として、書き方をコードで見ていきましょう。
簡単な使い分けとして上記のようになります。
それぞれの目的に合わせて、まとまりを作っていくのです。
結果を表示すると、次のようになります。
見た目ではわかりませんが、Chromeのデベロッパーツールで見ると各項目がセクション要素で囲まれています。
中でもarticleタグは、意味のある1つの記事として全体を囲うような使い方が多いです。
適切な箇所でセクションタグを使うことで、サイト構造を理解しやすくなるので、使い分けができるようになりましょう。
まとめ
今回は、articleタグの基本的な使い方やsectionタグとの違いを解説しました。
articleタグを使うことで、検索エンジンのクローラーがサイトの構造を理解しやすくなり、SEO対策にもつながります。
また、他のセクションタグと使い分けるとコードも見やすくなるでしょう。
この記事がarticleタグの学習に役立つと幸いです。
参考文献：MDN web docs｜article：記事コンテンツ要素
