div 要素 (HTML)

[4] div 要素型は、 class 属性や id 属性と併用することで、文書に構造を与えるための一般的な仕組みとして用意されました。

div はブロック水準要素ではありますが、それ以外に表現上の制約はありません。著者は、スタイルシートや lang 属性を使って要求を満たすことができます。

[10] 仕様書:

HTML 4
- div IW:HTML4:"struct/global.html#edef-DIV"
- 14.2.3 Header style information: the STYLE element IW:HTML4:"present/styles.html#style-group"

分類: 流れ内容
XML名前空間: http://www.w3.org/1999/xhtml
開始タグ: 必須
終了タグ: 必須
文脈: 流れ内容が認められる場所、 type が xhtml な Text construct や atom:content 要素の子要素として
内容モデル: 透過

属性

`align`				[HTML4] 非推奨
`anticache`				非標準
`apply`				非標準
`class`			級	[HTML4] %coreattr
`bv:ca`				非標準
`bv:cat`				非標準
`bv:closebox`	`1`			非標準
`bv:closeboxtooltip`	`%Text;`			非標準
`uicontact:cid`				非標準
`bv:cns`				非標準
`bv:commentcount`	`NUMBER`			非標準
`compact`				非標準
`uicontact:contactsize`				非標準
`containernodeclass`				非標準	Dojo
`datafld`			欄名	[HTML4] 予約
`dataformat`			データ書式	[HTML4] 予約
`datasrc`			データ源	[HTML4] 予約
`dir`			書字方向	[HTML4] %i18n
`dojoattachevent`				非標準	Dojo
`dojoattachpoint`				非標準	Dojo
`dojotype`				非標準	Dojo
`id`			一意識別子	[HTML4] %coreattr
`label`				非標準	Dojo
`labelclass`				非標準	Dojo
`labelnodeclass`				非標準	Dojo
`lang`			自然言語	[HTML4] %i18n
`xml:lang`			自然言語	[XHTML1]
`bv:lastcns`				非標準
`layoutalign`				非標準	Dojo
`listeners`				非標準	Dojo
`metype`				非標準	Windows Live Spaces
`movable`	`True`			非標準	Windows Live Spaces
`multiinstance`	`False`			非標準	Windows Live Spaces
`name`				非標準	Windows Live Spaces
`bv:nexttooltip`	`%Text;`			非標準
`nodedoctype`				非標準	Dojo
`nowrap`				非標準
`onclick`				[HTML4] %events
`ondblclick`				[HTML4] %events
`onkeydown`				[HTML4] %events
`onkeypress`				[HTML4] %events
`onkeyup`				[HTML4] %events
`onmousedown`				[HTML4] %events
`onmouseout`				[HTML4] %events
`onmouseover`				[HTML4] %events
`onmouseup`				[HTML4] %events
`orientation`				非標準	Dojo
`orientationpreference`				非標準	Windows Live Spaces
`placement`	`MustBeFirst`			非標準	Windows Live Spaces
`bv:prevtooltip`	`%Text;`			非標準
`v:shape`			VML 形状
`sizemin`				非標準	Dojo
`sizeshare`				非標準	Dojo
`spellcheck`				非標準	Firefox 2
`src`				非標準
`style`			スタイル情報	[HTML4] %coreattr
`templatecsspath`				非標準	Dojo
`title`			注釈的題	[HTML4] %coreattr
`toggle`				非標準	Dojo
`toggleduration`				非標準	Dojo
`valign`	`top`			非標準
`width`				非標準
`wraptag`				非標準
`xmlns`	`http://www.w3.org/1999/xhtml` 固定	名前空間名	W3C 勧告	XHTML m12n

toolbar-mode

意味

[13] HTML 4 の DTD の注釈は generic language/style container (共通言語・様式包含子) と説明しています。

Atom での利用

[33] Atom 1.0 の Text construct や atom:content 要素では div 要素が用いられています。

[36] div を使ったのは、内容モデルがブロック要素も行内要素も使える %flow; なので色々面倒から逃れられるからでしょうかね。でも atom:title に p を使ったりするのはおかしい気がします。

`type=html`

[34] type が html の場合、 div 要素は直接は用いられないのですが、 escaped markup を unescape したものは HTML 4.01 div 要素の内容として適切であるべきだと規定されています Atom 1.0 3.1.1.2.。

`type=xhtml`

[35] type が xhtml の場合、 Text construct や atom:content 要素の内容は XHTML m12n 1.0 div 要素 1つだけでなければならず、妥当であるべきだと規定されています。ただし、 div 要素自体はその内容の一部ではないとされています。 Atom 1.0 3.1.1.3.

レンダリング

[7] HTML 4 仕様書は、視覚的利用者エージェントの通常のレンダリング例として、次のものを挙げています。

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

を表示すると、

aaaaaaaaa
bbbbbbbbb
ccccc
ccccc

つまり、 CSS で表現すると、

div {
  display: block;
}

[8] 非推奨の align 属性対応の UA は、既定スタイルとして

div[align] {
  text-align: attr(align);
}

を持つと考えられます。

[9]

<div align="center">
  <table/>
</div>

だと表は真ん中に表示されるのでしょうか。 HTML 4 はその辺にちゃんと言及していないような気がしますが。

例

[6] 次の例は、顧客データベースに基づく HTML 文書において、 HTML 4 に存在しない「顧客」という情報をマーク付けするために div を用いています。

<DIV id="CLIENT-BOYERA" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>
<DIV id="CLIENT-LAFON" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

(HTML 4 仕様書より、改)

[11] スタイル・シートを使って表現を指定する例

<HEAD>
 <TITLE>DIV and Style Sheet Example</TITLE>
 <STYLE type="text/css">
   DIV.Abstract { text-align: justify }
 </STYLE>
</HEAD>
<BODY>
 <DIV class="Abstract">
   <P>The Chieftain product range is our market winner for
     the coming year. This report sets out how to position
     Chieftain against competing products.
   <P>Chieftain replaces the Commander range, which will
     remain on the price list until further notice.
 </DIV>
</BODY>

(HTML 4 仕様書より、改)

div の既定レンダリングでは display: block としか決められていませんが、 CSS などを使って具体的な表現を指定できます。

この例では、要約 (abstract) の章で文字が両端で揃えるようにと指定しています。

歴史

誕生

center、divn の項も参照。

[14] 1995年1月、章節のような見出し付き区分構造のために Dave Raggett が hn および本体の親となる divn を提案したのに対して、 Joe English は面倒が無いように n を取って div とすることを提案しました。更に内容モデルも見出し無し, 非階層的構造も扱えるように hn を必須でない方が良いとしました。 JOE

[16] 1995年2月9日、 HTML 3.0 DTD 案に div が追加されました。 HTML3 DTD 3/24

[61] 1995-03-24版 HTML 3.0 DTD 案では次のように宣言されていました。

<!--
  DIV can be used with the CLASS attribute to represent different
  kinds of container, e.g. chapter, section, abstract, appendix.
-->
<!ELEMENT DIV - - %body.content>
<!ATTLIST DIV
        %attrs;
        %needs; -- for control of text flow --
        align   (left|center|right) left -- alignment of following text --
        nowrap   (nowrap)  #IMPLIED -- disable wordwrap --
        >

また、最初 (で最後) の HTML 3.0 仕様書案 HTML 3.0 I-D にも

The DIV element is used with the CLASS attribute to represent different kinds of containers, e.g. chapter, section, abstract, or appendix.

と同じ説明があります。

div

div1

section

日付

1995-01-23

説明

1995-01-12、 Joe English は ietf-html メーリングリストで、 div1 方式や section 方式と比較しつつ、 HTML にはより柔軟な div 方式がよいと提案した。章節構造から出発しつつも、見出しを必須としないことで、 center の用法もカバーできるものという。

出典

HTMLScaleJoe: Re: HTML Scalability, Joe English, Mon, 23 Jan 95 13:17:08 EST, 1995-05-08T16:13:39.000Z, 2024-08-15T08:41:10.130Z https://ksi.cpsc.ucalgary.ca/archives/HTML-WG/html-wg-95q1.messages/0213.html

[216] HTML要素概説

要素名: div
日付: 1995-03-01
説明: 1995-02-09、 HTML 3.0 DTD に div が追加された。章節、概要、付録の他、 banner の意味にも使える。 HTML3-19950301

[102] draft-ietf-html-style-00, 2024-09-28T04:41:08.000Z https://datatracker.ietf.org/doc/html/draft-ietf-html-style-00

[103] draft-ietf-html-style-01, 2024-09-28T04:41:21.000Z https://datatracker.ietf.org/doc/html/draft-ietf-html-style-01

[66] >>102 には c (現在の span) だけで div はなかった。 >>103 には span と div がある。

[17] 1996年1月には、 HTML 3 スタイル・シート・モジュールの WD に div が追加されました。 HTML3 Style WD2 こんな風に説明されています。

HTML lacks an element that can group paragraphs, headers, etc. into a chapter, a section, an abstract, etc. The DIV element is added to deal with this situation. It can enclose elements so that they can be given a distinctive style as a group.

[18] 1996年9月には HTML 3.2 の WD HTML 3.2 WD が発表されましたが、ここでは

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

と説明されています。また、 HTML 3.2 は center も取り入れていますが、以前の ietf-html での議論の通り div で align が center と指定することの省略形が center であるとされました。

その後1997年1月に HTML 3.2 は勧告となりました。

[19] ISO-HTML: ところで HTML 3 とほぼ同時期に進行していた ISO-HTML では、紆余曲折を経て div (規定) と divn (参考) が用意されています。 div は HTML 3 の div に由来するもので、 divn は ISO-HTML の当初の案の bn に由来するものです。 HTML 3 の div の誕生のきっかけとなった divn (>>14) とは異なり、見出し (hn) 以外の部分が bn になります。 (旧 divn = hn + bn)

HTML 4 厳密DTD の影響から、 ISO-HTML の最終版では div が %flow 相当、 divn が %block 相当の内容モデルになっています。

[20] HTML 4: 1997年に W3C は亡き HTML 3.0 以来の HTML 3 モジュール群と HTML 3.2 を引き継ぐ HTML 4 を発表しました。その中で div は、offer a generic mechanism for adding structure to documents と紹介されています HTML 4.0 WD1。以前の見出しや段落などをまとめて章節にという意味より拡大していることに注意して下さい。ここに div は span と合わせて HTML の語彙の拡張の手段という意味が与えられたのです。まあ実世界 (>>21) に幾分譲歩したと取れなくもありません。なお、当初 div の内容モデルは %block とされています HTML 4.0 WD1 が、当時の HTML の DTD で %block は現在の %flow に当たるものでした。

実例として、次のようなものが示されています HTML 4.0 WD1。

<DIV id="client-boyera" class="client">
<SPAN class="client-last-name">Last name:</SPAN> Boyera,
<SPAN class="client-first-name">First name:</SPAN> Stephane
<SPAN class="client-tel">Telephone:</SPAN> (212) 555-1212
<SPAN class="client-email">Email:</SPAN> sb@foo.org
</DIV>

ちなみに、これは次の版で改良されています HTML 4.0 WD2。

<DIV id="client-boyera" class="client">
Last name: <SPAN class="client-last-name">Boyera</SPAN>,
First name: <SPAN class="client-first-name">Stephane</SPAN>,
Tel: <SPAN class="client-tel">(212) 555-1212</SPAN>,
Email: <SPAN class="client-email">sb@foo.org:</SPAN>,
</DIV>

更に次の版で表になりました HTML 4.0 PR。

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

反動(謎)で本来の semantics の方向に戻ったようにも見えます:)

[22] 誕生の経緯や HTML 3 当時の semantics を鑑みれば、 div の内容モデルは HTML 4 厳密DTD においては body や blockquote と同様に %block にするべきでした。実際 DTD が複数化された1997年9月の原案 HTML 4.0 WD2 と11月の勧告案 HTML 4.0 PR では %block とされましたが、12月の勧告 HTML 4.0 REC1 では %flow に戻されてしまいました。

[21] 実世界: HTML の仕様策定に興味がない人の多くは、まずはじめに Netscape Navigator に実装された center を知り、次に div と align を知りました。 CSS が実装されるのはまだ先の話で、 1995年〜1996年頃の多くの人達にとって div は文章を右寄せにするためのタグでしかありませんでした。

その後 WinIE 3 と NC4 に CSS が実装されると、 div は層 (レイヤー) などと称して HTML文書の任意の一部分を表示領域の好きな場所に配置したり、背景色を指定したり、その他 CSS によって表示効果を与えるためのタグとみなされるようになりました。

このような所謂 div厨的レイアウト手法は、かつて (1990年代後半) は単独あるいは table layout と併用してフレームの代替として、その後 (2000年代前半) は table layout の代替として、批判を浴びた旧時代のレイアウト手法をエミュレートするために使われています。

[22] CSS の実装が進むにつれて旧来の HTML によるレンダリングの指定は徐々に使われなくなり、代わりに div が使われるようになりました。しかし div の濫用と見出し (hn) や段落 (p) などの本来 HTML が持つ意味的要素型の不使用は HTML文書のアクセス可能性や利用可能性を著しく低下させ、批判の対象となりました。