HTML5における<div>タグの使い方

<div>タグは利用したことがある人も多いと思います。<div>要素は、特に意味を持たない範囲を1つの塊として定義する要素です。他の、例えばheader要素や、footer要素は、「この範囲は、headerです」や「この範囲はfooterです」といったことをコンピュータに伝えています。対して、div要素は「区切りです」ということしか伝えない要素です。

今回は、HTML5における<div>タグの使い方をご紹介します。

HTML5における<div>タグの使い方

上で記したように、div要素以外の要素は、その範囲がどんな意味かをコンピュータに知らせています。これはセマンティックwebと呼ばれるもので、HTML5の記述にはこのセマンティックwebが推奨されています。

つまり、HTML5において、div要素はできるだけ使わないほうが良いものです。div要素を使う場面としては、特定の範囲を1つの塊にして、スタイルシートを使って装飾をしたり、align属性で位置を指定したりする場合が考えられます。

この<div>〜</div>ないの範囲をひとまとめにします。便利ですが、先ほども書いたように、これより適した要素がある場合は、必ずそちらを使います。またdiv要素は多用することでサイトの表示速度も遅くなってしまったりします。

align属性を使用して、位置を指定する場合のサンプルコードです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新