div要素 -- 汎用ブロックレベル要素

基本データ

div要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ インライン要素 ブロックレベル要素 必須 必須 ブロックレベル要素
Transitional ○
Frameset ○

属性

解説

汎用ブロックレベル要素と呼ばれ、様々な目的に利用できる要素です。複数のブロックレベル要素をグループにまとめ、id属性やclass属性を割り振るなどして、文章に構造を与えることができます。

<h1>HTML入門</h1>
<div class="section">
  <h2>1. HTMLの概要</h2>
  <div class="section">
    <h3>1.1. ハイパーテキストとしてのHTML</h3>
    <p>HTMLとはHyperText Markup Languageの略で…</p>
  </div>
  <div class="section">
    <h3>1.2. マークアップ言語としてのHTML</h3>
    <p>マークアップとは文章上の機能を…</p>
  </div>
</div>
<div class="section">
  <h2>2. HTMLの文法規則</h2>
  <div class="section">
    <h3>2.1. 要素とタグ</h3>
    <p>「&lt;element&gt;」のような記号をタグと言い…</p>
  </div>
  <div class="section">
    <h3>2.2. 属性</h3>
    <p>タグの中には属性を持つものがあります。…</p>
  </div>
</div>

div要素にスタイルを設定することで、利用者に対し視覚的に構造を示すことができます。

div.section {
  border: solid 1px green;
  margin: 10px;
}
div.section div.section {
  border: dotted 1px green;
  margin: 10px;
}

HTML入門

1. HTMLの概要

1.1. ハイパーテキストとしてのHTML

HTMLとはHyperText Markup Languageの略で…

1.2. マークアップ言語としてのHTML

マークアップとは文章上の機能を…

2. HTMLの文法規則

2.1. 要素とタグ

「<element>」のような記号をタグと言い…

2.2. 属性

タグの中には属性を持つものがあります。…

div要素の使いすぎに注意

div要素自体は「段落」「見出し」「リスト」といった、文章上の意味のある要素を表すことはできません。ただ、<div>〜</div>で囲まれた部分がグループになっていることを示すだけです。ですから、次の例のようにdiv要素直下に文章を書いてしまうと、コンピュータにそれが見出しであるのか段落であるのかを伝えることができません。

<div class="text">何でもかんでもdiv要素にしてしまう症状を俗に「div病」と言います。</div>

これは段落を表すp要素としてマークアップするべきです。

<p>何でもかんでもdiv要素にしてしまう症状を俗に「div病」と言います。</p>

class="text"と指定しても、コンピュータにはそれが段落であるとは理解できません。HTMLのclass属性はCSSでスタイルを指定するためのセレクタであり、意味づけをすることはできないと思ってください。

次の例も同じことです。class="list"と書いても、コンピュータはそれがリストであるとは分かりません。

<div class="list">
・Internet Explorer<br>
・Netscape<br>
・Opera<br>
・Mozilla<br>
・Firefox<br>
・Safari<br>
</div>

リストを表すul要素としてマークアップします。

<ul>
  <li>Internet Explorer</li>
  <li>Netscape</li>
  <li>Opera</li>
  <li>Mozilla</li>
  <li>Firefox</li>
  <li>Safari</li>
</ul>

div要素の乱用は避け、見出し(h1?h6要素)、段落(p要素)、リスト(ul要素、ol要素)など、文章上の役割をあらわす要素を使うようにしましょう。。

参考サイト

Strict DTDの定義

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Information