【HTML5】div 要素。

Ads by Google

HTML5 ロゴ

<div>タグは、ひとかたまりの範囲として定義する際に使用します。
このタグには特別な意味はありませんが、<div>~</div>で囲まれた範囲を1つのグループとしてまとめることができます。
ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。

大変便利なタグですが、他に適切な要素が無い場合の最終手段として使用することが強く推奨されています。
これは、より適切な要素があるにも関わらず<div>を使用するとウェブページのアクセシビリティやメンテナンス性が低下してしまうからです。

例えば、ブログの投稿には<article>、章の区切りには<section>、ページのナビゲーションには<nav>、フォームグループには<fieldset>、というように、HTML5ではそれぞれの要素に適したタグがあらかじめ用意されていますから、<div>タグを使うのは最終手段的なマークアップとして扱うとよいでしょう。

一方で、<div>はスタイリング目的の場合や、class属性・lang属性・title属性などの、属性で複数の要素に同じ値をまとめて指定する場合に便利す。
以下の使用例は、2つの段落を<div>で括って CSS によるスタイリングをまとめて指定しています。

HTML5未満からのバージョンアップによる変更点

HTML4.01では、div要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。HTML5では、div要素のalign属性は廃止されています。揃え位置の指定にはCSSを使用してください。

また、HTML5では <article>・<aside>・<nav>・<section> などの新しい要素が追加されているので、これらの新しい要素のほうが <div> よりも適切なケースが多々あります。

使用例

<article>
<h1>我が家の猫たち</h1>
<p>うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。</p>
<div style=" background-color:black; color:white;">
<p>シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。</p>
<p>クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。</p>
</div>
<p>二匹ともご飯の時間にはすり寄ってきます。</p>
</article>

参考:HTML5 タグ一覧

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です