プラカンブログSTAFF BLOG

2017.02.23

【HTML5】sectionタグの使い方

Webデザイナーの嶋津です。最近はIE8以下に対応しなくてもいいようになり、HTML5でコーディングできるようになりました。そこでHTML5から新たに加わったタグを使用するようになったのですが、そのなかでsectionタグの使い方が難しいと感じました。

というのも、section要素の使い方に対する記事はネット上にたくさんありますが、記事によって書いてあることが違っており、大変混乱するわけです。しかし、そんな混乱の中で、「これこそがsectionタグの使い方だ!」というものを見つけましたので、紹介したいと思います。

sectionタグとは

まずsectionタグとは章、節、項などを表すタグになります。したがって、sectionタグの中には、h1~h6タグの見出しが子要素として必要になります。

sectionタグ(セクショニング)の使い方

section要素の使い方

例えば、このような文章の場合、色付きの枠線のようにセクショニングします。このように、HTML5では、sectionタグを使用することによって、Google先生に論理構造・階層構造を伝えることができるわけです。

ちなみにbody直下の章にあたる部分をsectionタグで囲む必要はありません。なぜなら、bodyタグは「セクショニング・ルート」というセクションのルートとして扱われる要素だからです。したがって、節や項を囲むのに使用することが多くなります。詳しくは下記の記事を参考にしてみてください。

セクショニング・ルートについて

sectionタグの凄いところ

sectionタグを使用して、各セクションをGoogle先生にしっかりと教えてあげると、階層構造の判別に見出しのレベルが関係なくなるため、全ての見出しをh1要素でマークアップしても大丈夫になるのです!これには大変驚きました。

sectionタグを使用していないサイトが多い

多くのWebサイトでは、sectionタグを省略していることが多いですが、HTML5では、文章構造をGoogle先生に明示させてあげるようマークアップすることが推奨されています。しかし、予算的にも工数的にも厳しい場合、デザインやユーザービリティーには、特に影響を与えるわけでもないため使用しないことが多いようです。

私はsectionタグを使用したマークアップを心掛けておりますが、大規模なサイトになると全てのページにsectionタグを使用するのはコスト高になります。また、頻繁にコンテンツを更新するようなサイトでは、更新のコストが増えてしまいます。したがって、マークアップする前にsectionタグのガイドラインを策定するのがベストですね。

おわりに

感覚的にsectionタグを使用しているという方は少なくないのではないでしょうか。しかし、sectionタグはGoogle先生に正しく情報を収集・解釈してもらう上でとても大切になってきます。今までちゃんと使用していなかった方も、この機会にぜひsectionタグを使用してみることをオススメします。

 

参考文献

第4回 HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ

この記事は、SHIMAZU が書きました。