2022/06/20

2023/08/06

【初心者向け】HTMLの基本！divタグについて解説

「複数のタグをまとめるだけの、意味はないけど意味があるタグが欲しい」

そんな願いを叶えてくれるのが、HTMLで用意されている<div>というタグです。今回は、そんなdivを使うメリット・デメリットを、実際の使用例を交えつつ解説します。

まず「div」って何？

divは、HTMLで使用されるタグの一種です。このタグには、以下のような特徴があります。

文書構造的な意味合いを持たない
既定のスタイルなどが基本的に存在しない
ブロック要素（次のコンテンツが次の行に表示される）

要するに、「特に意味を持たないタグ」というのが大きな特徴です。

では、それぞれの項目について詳細を軽く見ていきましょう。

文書構造的な意味合いを持たない

divタグの最大の特徴と言えるのが、文書構造的な意味合いがないところです。

ここでいう”文書構造的な意味合い”というのは、そのタグがHTML文書の中で持つ役割・解釈の在り方を指します。

逆に、文書構造的な意味を持つタグは、以下の通りです。

h1~h6（見出し）
p（段落）
ul , ol（リスト、箇条書き）
strong（重要部分）
figure（画像などのメディアコンテンツ）

上記はあくまで一例であり、非推奨のものも含めるとさまざまなタグが文書構造のにおける役割を持っています。

まだ少し意味がわかりにくいかもしれませんが、ブラウザのWEBページで確認してみると言っていることが理解できるかもしれません。

例えば、以下のようなHTMLのコードがあるとしましょう。

<h1>H1見出し</h1>

<p>
    ここに段落が入っています。
    上下に余白が追加されていて、
    独立した文章であることがわかります。
</p>

<ul>
    <li>これが</li>
    <li>リスト</li>
    <li>ですよ</li>
</ul>

<h2>H2見出し</h2>

<p>
    らららーらららー<strong>あははははは</strong>
</p>

これをブラウザのページに読み込ませ、表示させてみると・・・

上の画像のようになります。

目に見えてわかるのが、h1とh2タグで囲んだ部分の文字が、それぞれ太字になっており、大きさも他の文字より一回り大きくなっています。

また、h1の方がよりサイズが大きく、重要な情報だとわかりますよね。

HTMLにおける文書構造的な意味合いというのは、HTMLのコードを解釈する際、どれがどういった内容を持つ要素なのか、判断しやすくするために非常に重要な要素なのです。

既定のスタイルが存在しない

前述の通り、HTML文書において、意味を持つタグはブラウザで表示する際に、ブラウザで設定されているスタイルが割り当てられます。

strongタグの場合は、太字で表示されていたり、pタグは上下に外部余白が追加されていたりします。

では、そういった意味合いを持たないdivタグはどうかというと、何のスタイルもブラウザ側で定義されていません。

例えば、先ほど紹介したコードのタグを、全てdivに置き換えてみましょう。

<div>H1見出し</div>

<div>
    ここに段落が入っています。
    上下に余白が追加されていて、
    独立した文章であることがわかります。
</div>

<div>
    <div>これが</div>
    <div>リスト</div>
    <div>ですよ</div>
</div>

<div>H2見出し</div>

<div>
    らららーらららー<div>あははははは</div>
</div>

これをブラウザ上で表示すると、以下のように何もスタイルが割り当てられていない文字列群が表示されます。

既定のスタイルが存在しないことには、意図しないレイアウトミスが起きないというメリットがあります。

divタグは数あるタグの中でも、非常に自由度の高い汎用的なタグだと言えるでしょう。

divタグのメリット

divタグを使うことには多くのメリットがありますが、中でも特筆すべきと言えるのが以下の2点です。

SEOなどを気にせずデザインできる
ブラウザの仕様に左右されない

SEOなどを気にせずデザインできる

divタグは、文書構造における特別な意味を持ちません。このことから、「SEOを気にせずデザインできる」というメリットがあると言えます。

SEOというのは、検索エンジン最適化というもので、WEBサイトの内容を検索エンジンが評価し、検索結果の順番を決めるシステムです。

基本的にWEBサイトはこのSEOで高い評価を得られるよう、正しい文書構造でサイトを設計する必要があります。

しかし、pタグは段落、ulタグはリストというように、それぞれのタグが構造上の意味を持ってしまっており、これらのタグは正しく配置しなければ、SEO上の評価が著しく下がります。

要するに、SEOの評価に配慮すると、文書構造を正しく整理しなければならなくなり、WEBデザインの多様性がゼロに等しくなってしまうわけです。

そこで救世主になるのが、一切何の意味も持たないdivタグ君。適当なオブジェクトを配置したい、複数の要素を束ねる箱ものが欲しい、というように、WEBデザインの幅を押し広げてくれます。

SEOを気にせずデザインができるのは、divの最大の特長であり、人気が高い要因です。

ブラウザの仕様に左右されない

divタグは自由度が高く扱いやすいだけでなく、ブラウザの仕様に左右されにくいというメリットもあります。

現在では各ブラウザにおけるタグの仕様も共通化されつつあるものの、やはりブラウザによってタグの扱いやデザインが多少異なることがあります。

ではdivタグはどうかというと、実はdivタグの扱いはどのブラウザも絶対的に共通しているのです。

全てのブラウザにおいて「まとまりを示す意味のない要素」として扱われるため、divタグを中心にHTMLを構成すれば、各ブラウザでデザインがバラバラになる事故を未然に防ぐこともできます。

divタグのデメリット

divタグを扱うデメリットは、その便利な特性が故に、HTMLの文書構造を無視して乱用してしまいがちなところです。

div要素が乱用されているHTMLの例として、以下のようなコードがあります。

<div>
    <div>
        <div>
            <div>みかん</div>
            <div>りんご</div>
            <div>ばなな</div>
        </div>

        <div>
            <div>好き</div>
            <div>嫌い</div>
            <div>好き</div>
        </div>
    </div>
</div>

このコードで私が何を作りたいのか、何となくイメージできる方はいるかもしれませんが、このコードを見せられても首をかしげる方がほとんどでしょう。

上記のコードをdivタグでなく、私の意図に合わせた形で記述すると、以下のようになります。

<table>
    <tbody>
        <tr>
            <th>みかん</th>
            <th>りんご</th>
            <th>ばなな</th>
        </tr>

        <tr>
            <td>好き</td>
            <td>嫌い</td>
            <td>好き</td>
        </tr>
    </tbody>
</table>

divの代わりに設置されているtableやtrというのは、表の構造を示すタグです。このコードを見れば、HTMLについて知っている方なら「ああ、表を作りたかったんだな」と理解できますよね。

実はdivだけでもCSSのスタイル次第で見た目上は表を作成できてしまうため、「divタグだけで良くない？」と初心者はなるのですが、やはり各種タグを用いて正しい書式で構造を示してくれる方が、SEO的にも、人間的にも見やすいのです。

しかし、div要素があまりにも便利で使い勝手が良いことから、この事実に気づくまでに時間がかかる方も決して少なくはありません。

使い方次第ではHTMLの文書構造を正しく理解できなくなくなる可能性がある、divタグを扱う上で留意すべきデメリットだと言えるでしょう。

まとめ

divタグはSEOの評価に関係せず、使い放題な要素のため、WEB制作において無くてはならない存在だと言えます。

その一方、使い勝手が良すぎるあまり、初心者が正しくHTMLの文書構造を記述できなくなってしまうことも。

これからHTMLを学習しようと思っている方は、この記事を参考に、divタグを適切に扱っていくことを意識してみてください。