`div` 要素

since: 31st/Aug./2001; last modified: 13th/Sep./2001

div 要素タイプはテキストモジュールに含まれており、 XHTML 1.1 の内容モデルでは、内容セット Block に含まれ、DTD では %Block.mix; に含まれます。従って、例えば body 要素タイプの子要素として定義されています。

名前	`div`
分類	`Block`
意味	division, generic language/style container
日本語	ブロックレベルグループ化要素、言語・スタイルコンテナ

div 要素タイプは、文書の要素の構造化を助けます。内容にはブロックレベルの要素を持つことが可能で、含まれた内容を一つの単位として扱うときに用います。例えば、基準言語が日本語の文書内で、一部分に多言語の要素構造があれば、それらの要素を div 要素の内容として、 xml:lang 属性を与えます。

概念モジュール定義
要素	属性	最小内容モデル
`div`	`Common`	`(PCDATA \| Flow)*`

実装： DTD、モジュール： Block Structural

内容モデル

div 要素タイプに定義されている内容は、ブロックレベルの要素と、テキスト水準の要素です。概念モジュール定義では、内容セット #PCDATA | Flow で定義されています：

Flow: Heading | Block | List | Inline

つまり、ブロックレベルと、テキストレベルの全ての要素タイプが内容に定義されています。DTD では次のように定義されています：

<!ENTITY % Flow.mix
     "%Heading.class;
      | %List.class;
      | %Block.class;
      | %Inline.class;
      %Misc.class;"
>

div 要素タイプの役割は、ブロックレベル要素のグループ化ですから、単なる文字データや、テキスト水準の要素が裸で現れることはあまり好ましくありません。ブロックレベルの要素をグループ化するときに、テキスト水準の要素が含まれてしまうような構造化には問題があるということです。

Heading や p 要素、 address 要素の内容であるテキスト水準の要素をグループ化するためには、 span 要素が用意されています。

属性

Common

基本的な属性の集合
Core + Events + I18N + Style

サンプル

言語の構造化を意識するとき、ブロックレベルの div 要素と、テキストレベルの span 要素は不可欠の重要な要素です。

文書の構造化

XHTML 文書は木構造をしています。ルート要素である html 要素の子ノード（節）として head 要素と body 要素が存在し、その各々の子ノードとして……

このノードの関係を、 div 要素でより適切に構造化することができます。以下の例では、チャプター（章）水準の要素を全体でグループ化し、その内容にセクション（節）水準の要素をグループ化し、その内容にサブセクション（小節）水準の要素をグループ化しています。この文書に複数のセクション、サブセクションが存在していた場合、ひとつのセクションは、一つのノード、即ち一つの div 要素として扱うことができます：

<body>
  <div class="chapter" id="0">
  <h1>XHTML 1.1 とはなんだろうか</h1>
  
    <div class="section" id="1">
    <h2>1. HTML について</h2>
    
    <p>XHTML は HTML を XML 化したものです。最初に、
      HTML の枠組みについて紹介します。</p>
      
      <div class="subsection" id="1.1">
      <h3>1.1 論理デザインと視覚デザイン</h3>
      
      <p>見ながら設計していくことを視覚デザインと呼び、
        仕組みを考えて設計していくことを論理デザインと呼
        びます。</p>
        
      <p>HTML は論理デザイン用の言語ですが、大事なこ
        とは何のためにどうなればよいのか、目的と目標を明
        確にすることです。</p>
      </div>
      <!--subsection end-->
      
    </div>
    <!--section end-->
  
  </div>
  <!--chapter end-->
</body>

このような構造化の厳密化は、 XML 文書としては不可欠なものであり、適切に構造化された文書の情報的価値は高まります。

言語によるグループ化

グループ化は言語の異なる要素のグループ化などにも有効です：

<p>これは日本語文書です。</p>
<div xml:lang="en">
  <p>This is a English paragraph.</p>
  <p>This paragraph is in English.</p>
</div>
<p>この段落は日本語です。</p>

スタイルシートをマッチさせる場合のグループ化

スタイルシートによる見栄えの調整などにも有効です：

<p>ここは普通の段落です。</p>
<div class="caution">
  <p>ここは div 要素の内容である段落です。</p>
  <pre>ここは div 要素の内容である pre 要素です。</pre>
</div>
<p>ここは普通の段落です。</p>

上の例で、 class="caution" を与えられた div 要素と、その子ノードである p 要素と pre 要素に対するスタイルシートは、次のように記述できます：

div.caution { border: 1px solid red }
div.caution p { background: maroon; color: #fcc }
div.caution pre { background: #fcc; color: #300 }