雑学

3分で簡単にわかる！HTMLのdivとsectionの違いとは？使い分けやコーディングのポイントもITオタクの会社員ライターがわかりやすく解説

よぉ、桜木建二だ。この記事ではHTMLでのdivタグとsectionタグの違いについてみていくぞ。どちらもHTMLで書かれた要素をグループ化するのに使われるが、その違いはずばりグループ化する対象がコンテンツの一部かWebページ全体を区切ったものなのかで使い方も変わってくるみたいだ。今回はWebページを作るうえで欠かせないdivタグとsectionタグの違いについてを会社員ライターのちょびと一緒に解説していくぞ。

この記事の目次

解説／桜木建二

「ドラゴン桜」主人公の桜木建二。物語内では落ちこぼれ高校・龍山高校を進学校に立て直した手腕を持つ。学生から社会人まで幅広く、学びのナビゲート役を務める。

ライター／ちょび

ビジネス書が大好きな読書家Webライター。FPの資格やAWSの資格を取得し、金融知識やITについての情報を発信している。

divとsectionの違いとは？

image by iStockphoto

divとsectionはHTMLでよく使用される要素ですが、どちらもコンテンツをグループ化するために使用されます。しかし、divとsectionにはそれぞれ特徴的な違いがあるのでみていきましょう。

div：コンテンツをグループ化

divは、HTML文書内で区分けするための汎用的なコンテナ要素で、タグ（<div>〇〇</div>）で囲うことで任意の要素をグループ化できます。

例えば、同じデザインのスタイルを適用したい複数の要素をグループ化したり、CSSによるスタイル指定を行うために使用することが一般的です。divタグで囲われた箇所の前後には自動的に改行が入り、id属性やclass属性を用いることでCSSから要素を指定することができます。

section：文章を構造化

sectionは、HTML文書内のテキストコンテンツを意味的に関連するグループに分割するために使用します。例えば、ブログ記事の各セクションやニュース記事の本文など、文書の構造を明確にするために使用されることが多いです。

sectionタグもdivタグと同様、囲われた箇所の前後に自動的に改行が入ります。また、sectionタグ内には、headerタグ・footerタグ・h1〜h6タグなど、意味的に関連する要素を入れ子にすることができるので、sectionタグで分割することでコードが読みやすくなるでしょう。

divタグはコンテンツを一つのまとまりとして区切るために使われるんだな。CSSでスタイルを充てたいときにも一括で適用できるから便利だな。一方でsectionタグはWebページを各グループごとに分けて、ヘッダーやフッターのようにそれぞれ意味をもたせる役割があるようだな。sectionタグで区切ることでHTMLの可読性も良くなるんだな。