こんにちは朱夏です。
先日ポートフォリオを作成していて、ふとこんな事が気になりました。
sectionタグってどういった時に使うの？
divタグと同じに見えるけど何が違うの？
というわけで今回はHTML5のsectionタグについて調べてみました。
調べていくうちにarticleタグというものもある様です。
それぞれどんな違いがあるのか、どうやって使い分けるのかなどを書いていきます。
それではいってみましょう。
sectionタグとは？
何故意味が必要なの？
articleタグとの違い
あとがき
sectionタグとは？
sectionタグは、divタグと同様にコンテンツを区切るために使われるタグです。
では、sectionタグとdivタグの違いは何かというと、「区切りに意味があるかどうか」ということらしいです。
以下リンクにあるコンテンツモデルを見てみると、sectionタグには「フロー・コンテンツ(章・節・項を表す対のヘッディング・コンテンツを必ず伴うこと)」と書かれています。
sectionタグは、1章、2章などといった区切り方をする時に使用するタグ、ということの様ですね。
何故意味が必要なの？
結論から言うと、sectionタグはgoogleのクローラなどが閲覧した時に機能します。
sectionタグで区切るべき部分をdivタグで区切ったとしても、サイトの見た目に影響が出るわけではありません。
googleのクローラなどがサイトに訪問した時に、sectionタグで区切られたブロックを意味のある塊として認識させる事が出来ます。
これはSEO対策としての効果があります。
articleタグとの違い
articleタグは、sectionタグと同様、意味のある区切りとして使います。
articleタグとsectionタグの何が違うのかというと、sectionタグは1章、2章など前後関係のある塊を作る時に使うのに対して、articleタグはそのブロック1つで意味を持つ塊を作りたいときに時に使います。
あとがき
というわけで、sectionタグとdivタグの違いについて書いてみました。
まとめとしては以下になります。
- 特に意味を持たせないけど区切りたいときはdivタグ
- 章などで区切る場合はsectionタグ
- 独立したブロックにはarticleタグ
今まではdivタグだけでやってきましたが、SEOにも影響する部分なので、意識して使っていこうと思います。
今回は以上です。
次回もよろしくお願いします。
