Edit

Page

Page title:

Page body:

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

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

[10] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLe)[div]] <IW:HTML4:"struct/global.html#edef-DIV">
-- 14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element
<IW:HTML4:"present/styles.html#style-group">

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

* 属性

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

- [CODE[toolbar-mode]]

** 意味

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

** Atom での利用

[33] [[Atom 1.0]] の [[Text construct]] や [CODE(XMLe)@en[atom:[[content]]]]
[[要素]]では [CODE(HTMLe)@en[[[div]]]] [[要素]]が用いられています。

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

*** [CODE(XML)@en[type=html]]

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

*** [CODE(XML)@en[type=xhtml]]

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

** レンダリング

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

[PRE(HTML)[
<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>
]PRE]

を表示すると、
[PRE[
aaaaaaaaa
bbbbbbbbb
ccccc
ccccc
]PRE]

つまり、 [[CSS]] で表現すると、
[PRE(CSS)[
div {
  display: block;
}
]PRE]

[8] 非推奨の [CODE(HTMLa)[align]] 属性対応の UA
は、[[既定スタイル]]として
[PRE(CSS)[
div[align] {
  text-align: [VAR[attr(align)]];
}
]PRE]

を持つと考えられます。

[9] 
[PRE(HTML)[
<div align="center">
  <table/>
</div>
]PRE]

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

* 例

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

[PRE(HTML)[
<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>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

[11] スタイル・シートを使って表現を指定する例
[PRE(HTML)[
<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>
]PRE]

[WEAK[(HTML 4 仕様書より、改)]]

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

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

* 歴史

** 誕生

;; [CODE(HTMLe)@en[[[center]]]]、[CODE(HTMLe)@en[[[div[VAR[n]]]]]] の項も参照。

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

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

[61] 
[TIME[1995-03-24]]版 
[[HTML 3.0]]
[[DTD]] 案では次のように宣言されていました。
[PRE(SGML code)[
[CODE(comment)[]]
<!ELEMENT [CODE(HTMLe)[DIV]] - - [VAR[%body.content]]>
<!ATTLIST [CODE(HTMLe)[DIV]]
        [VAR[%attrs;]]
        [VAR[%needs;]] [CODE(comment)[-- for control of text flow --]]
        align   (left|center|right) left [CODE(comment)[-- alignment of following text --]]
        nowrap   (nowrap)  #IMPLIED [CODE(comment)[-- disable wordwrap --]]
        >
]PRE]

また、最初 [WEAK[(で最後)]] の [[HTML 3.0]] 仕様書案
[SRC[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.

と同じ説明があります。

[FIG(data)[ [62] [[HTML要素概説]]

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

- 
[DFN[HTMLScaleJoe]]:
[CITE@en[Re: HTML Scalability]], 
[DATA(.author)[[[Joe English]]]],
[TIME(.published)[Mon, 23 Jan 95 13:17:08 EST][1995-01-23T13:17:08-05:00]],
[TIME[1995-05-08T16:13:39.000Z]], [TIME[2024-08-15T08:41:10.130Z]] <https://ksi.cpsc.ucalgary.ca/archives/HTML-WG/html-wg-95q1.messages/0213.html>

]REFS]

]FIG]

[FIG(data)[ [216] [[HTML要素概説]]

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

]FIG]

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

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

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

[17] 1996年1月には、 [[HTML 3]] [[スタイル・シート]]・モジュールの
[[WD]] に [CODE(HTMLe)[[[div]]]] が追加されました。 
[SRC[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]] [SRC[HTML 3.2 WD]]
が発表されましたが、ここでは

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

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

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

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

[[HTML 4]] [[厳密DTD]] の影響から、 [[ISO-HTML]] の最終版では
[CODE(HTMLe)[[[div]]]] が [CODE(SGML)[%[[flow]]]]
相当、 [CODE(HTMLe)[[[div[VAR[n]]]]]] が [CODE(SGML)[%[[block]]]]
相当の[[内容モデル]]になっています。

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

実例として、次のようなものが示されています [SRC[HTML 4.0 WD1]]。
[PRE(HTML example code)[
<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>
]PRE]

ちなみに、これは次の版で[Q[改良]]されています [SRC[HTML 4.0 WD2]]。
[PRE(HTML example code)[
<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>
]PRE]

更に次の版で表になりました [SRC[HTML 4.0 PR]]。
[PRE(HTML example code)[
<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>
]PRE]

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

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

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

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

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

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

- [JOE] [CITE[html-wg-95q1: Re: HTML Scalability]] 
<http://ksi.cpsc.ucalgary.ca/archives/HTML-WG/html-wg-95q1.messages/0213.html>
- [HTML3 DTD 3/24] 1995年3月24日版 [[HTML 3.0]] [[DTD]] 案
- [HTML 3.0 I-D] [CITE[Divisions]] 
<http://www.w3.org/MarkUp/html3/divisions.html>
- [HTML3 Style WD2] [CITE[HTML3 and Style Sheets]] 
<http://www.w3.org/TR/WD-style-960115.html#divtag>
- [HTML 3.2 WD] [CITE[HTML 3.2 Reference Specification]] 
<http://www.w3.org/TR/WD-html32-960909.html#div>
- [HTML 4.0 WD1] [CITE[The global structure of an HTML document]] 
<http://www.w3.org/TR/WD-html40-970708/struct/global.html#h-7.1.4.2>
- [HTML 4.0 WD2] [CITE[The global structure of an HTML document]] 
<http://www.w3.org/TR/WD-html40-970917/struct/global.html#h-8.4.2>
- [HTML 4.0 PR] [CITE[The global structure of an HTML document]] 
<http://www.w3.org/TR/PR-html40-971107/struct/global.html#h-7.5.4>
- [HTML 4.0 REC1] [CITE[The global structure of an HTML document]] 
<http://www.w3.org/TR/REC-html40-971218/struct/global.html#h-7.5.4>

** 不思議解釈

[23]

> 「div」に囲まれた部分は「ボックス」の意味を持ち、
前後に改行が入ります。一般的には「div」を優先して使用します。
「span」に囲まれた部分には前後に改行が入りませんので、
「テキストのカラー変更」などに使用します。

出典:
[CITE[divとspan、idとclass/アオゾラウェブデザイン[Aozora Web Design][CSS/スタイルシート/style sheets]]] 
<http://www.aozoraweb.com/design/css/cssdiv.shtml>
(2005年4月現在)

[CODE(HTMLe)[[[div]]]] と [CODE(HTMLe)[[[span]]]] では
[CODE(HTMLe)[[[div]]]] が[Q[一般的]]なのだそうな。
比べられるようなものでもなかろうに。

[24]
'''[CODE(HTMLe)@en[div]] と文書構造''':
[Q[[CODE(HTMLe)@en[div]] は文書構造に影響しない]]
と言っている人がいますが、そんなはずはありません。
[CODE(HTMLe)@en[div]] そのものが文書構造の1つの単位です。
[WEAK[(本当に影響しないというのなら存在意義自体が否定されてしまいます。)]]

** 関連

[29] [CODE(HTMLe)@en[[[center]]]] [[要素]]は [CODE(HTMLe)@en[[[div]]]]
[[要素]]の特殊形だと考えられています。

[30] [CODE(HTMLe)@en[[[div]]]] [[要素]]はそれ自体が[[意味]]を持たない[[ブロック水準要素]]と捉えられるのに対し、
[CODE(HTMLe)@en[[[span]]]] [[要素]]は[[意味]]を持たない[[行内要素]]です。

[31] [CODE(HTMLe)@en[[[div]]]] [[要素]]の当初の意図だった「[[章節]]」に相当する[[要素]]として
[CODE(HTMLe)@en[[[section]]]] が後に導入されています。更に、
[CODE(HTMLe)@en[[[article]]]]、[CODE(HTMLe)@en[[[aside]]]]
のように特定の[[意味]]に特化した[[要素]]もあります。

[32] [[ISO-HTML]] の準備用の[[文書型]]には[[見出し]]の[[階数]]に対応した
[CODE(HTMLe)@en[[[div[VAR[n]]]]]] [[要素]]が定義されていました。

[37] [[OOXML]] には [CODE(HTMLe)@en[[[div]]]] [[要素]]を使った [[HTML]] 出力を考慮して 
[CODE(XMLe)@en[[[w:div]]]] に[[表]]の[[行]]を関連付けるための
[CODE(XMLe)@en[[[w:divId]]]] [[要素]]があります。

[1] [[yuu]] は単純に [CODE(HTMLe)[div]] が嫌いなんじゃないかと思った。

[2] [[WinIE]] は、3未満が
[CODE(HTMLe)[div]]
要素型に対応していません。
(タグを無視するので [CODE(CSS)[[[display]]: [[inline]]]] になります。)

[3] [[NN]] は、 2 で既に対応していて
[CODE(CSS)[display: [[block]]]]
になります。 (1 では未確認。)
(独自拡張の [CODE(HTMLa)[[[align]]]] 属性を使うと、文字揃え位置を変更できます。)

[12] [[スタイル・シート]]を使うとおおよそどんな要素にもスタイルを指定できるのですが、
[[ブロック水準要素]]であることを除いては表現上の意味を持たない
[CODE(HTMLe)[div]] 要素型は特に便利です。
特に [CODE(HTMLa)[[[class]]]] 属性や [CODE(HTMLa)[[[id]]]]
属性を使って、 HTML を無限に拡張できます。 [SUP[ [HTML 4] ]]

[25]
[CITE[Markup Maker - Takes a simple list of page ids that you enter and converts it to a valid XHTML document | Developer Tools | Accessify]] <http://accessify.com/tools-and-wizards/developer-tools/markup-maker/>
([[名無しさん]] [WEAK[2006-09-30 23:49:08 +00:00]])

[26]
[CITE[div要素直下にインライン要素:メモランダム]] ([CODE[2007-07-09 20:54:42 +09:00]] 版) <http://mynotes.jp/blog/2007/07/inline_in_div>
([[名無しさん]])

[27]
[CITE[Re: div 要素はなぜ「div」という名前を与えられたのか (agenda)]] ([TIME[2007-12-18 20:32:38 +09:00]] 版) <http://jintrick.net/agenda/2007/12/re-div-div.html>

** [CODE(XMLe)@en[div]] 要素 (XBL)

@@
[38] [[XBL2]] の [DFN[[CODE(XMLe)@en[[[div]]]] [[要素]]]]は、・・・

** [CODE(XMLe)@en[w:div]] 要素 (OOXML)

@@
[39] [[OOXML]] の [DFN[[CODE(XMLe)@en[[[div]]]] [[要素]]]]は、・・・

** [CODE(XMLe)@en[div]] 要素 (SMIL)

[28] [CITE[SMIL 3.0 smilText]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-text.html#edef-textDiv>

** [CODE(SGMLe)[div]] 要素型 (SGML)

[15] [DFN[[CODE(SGMLe)[div]]]] は、[[章節]]のような構造を表す[[共通識別子]]として色々な
[[SGML応用]] (例えば [[TEI]]) で使われています。

** DTBook

[175] [[HTML]] 由来で [[DTBook]] にもありました。
[SRC[>>341]]

[60] 
[CODE[level][<level>]] [[要素]]と関係して 
[CODE[div]] [[要素]]にも [DFN[[CODE[level]]]] [[属性]]がありました。
[SEE[ [CODE[<level>]] ]]

- [341] [CITE@en-US[[[DAISY]] ANSI/NISO Z39.86-2002 - The DAISY Consortium]], [TIME[2023-11-23T08:52:40.000Z]] <https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/>

** HTML5

[FIG(data)[ [63] [[HTML要素概説]]

:[F[要素名]]:[CODE[div]]
:日付:[TIME[2005-12]]
:説明:
[TIME[2005-12]]の [[Google検索]]のデータベースを使った調査によると、
[[要素]]の利用数第14位が
[CODE[div]]
だった。
:出典:
[REFS[

-
[CITE[Google Code: Web Authoring Statistics: Pages and elements]], 
[DATA(.author)[[[Ian Hickson]]]],
[TIME(.published)[2006]],
[TIME[2024-08-24T07:08:22.000Z]], [TIME[2006-02-03T03:49:06.745Z]] <https://web.archive.org/web/20060203033128/http://code.google.com/webstats/2005-12/pages.html>

]REFS]

]FIG]

- [58]  
[CITE@en[inter-element whitespace and comments should not affect algorithms; b…]], [[Hixie]], [TIME[2006-12-22 10:07:05 +09:00]], [TIME[2022-11-13T05:27:11.000Z]] <https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[59] >>58 [CODE[i]], [CODE[b]], [CODE[div]] が同時追加。
[[HTML5]] における立ち位置がよくわかります。
[SEE[ [[i]], [[b]], [[物理要素]] ]]

[FIG(data)[ [64] [[HTML要素概説]]

:[F[要素名]]:[CODE[div]]
:[F[要素名]]:[CODE[i]]
:[F[要素名]]:[CODE[b]]
:日付:[TIME[2006-12-22]]
:説明:
[TIME[2006-12-22]]、
[CITE[HTML5]]
は
[CODE[i]],
[CODE[b]],
[CODE[div]]
を追加した。
[CODE[i]], [CODE[b]] は新たな意味で再定義された。
現行仕様である。
:出典:
[REFS[

- [CITE[HTML5 r456]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2006-12-22 10:07:05 +09:00]], [TIME[2024-09-01T12:35:32.000Z]] <https://github.com/whatwg/html/commit/7f75de99cdef5686b5812ce14c88759aa70ab207>

]REFS]

]FIG]

[40] [CITE@ja[どこまで続く!? 経済産業省の公式サイトに掲載されているページがすごい - はてなブックマークニュース]]
( ([TIME[2010-12-13 23:41:47 +09:00]] 版))
<http://b.hatena.ne.jp/articles/201012/2141>

[41] [CITE['''['''whatwg''']''' wrapper element]]
([TIME[2011-06-09 16:28:26 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/031977.html>

[42] [CITE[CSS Print Profile]]
( ([TIME[2013-03-14 20:50:03 +09:00]] 版))
<http://www.w3.org/TR/2013/NOTE-css-print-20130314/#s.8.1>

[43] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#the-div>

[44] [CITE[Welcome to Netscape Navigator Version 2.0]]
( ([TIME[2014-04-07 08:49:45 +09:00]] 版))
<http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>

** [CODE(HTMLe)@en[di]] 要素

[46] [[XHTML2]] の第7次案で追加されました。

;; [CITE@en[XHTML 2.0 - XHTML List Module]] ([TIME[2005-05-28 06:57:41 +09:00]] 版) <http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-list.html#edef_list_di>

[47] [[HTML5]] に対しても [CODE(HTMLe)@en[[[di]]]] [[要素]]の追加提案は幾度もありました。
特に [[Anne]] が支持していましたが、 [[Ian Hickson]] はグループ構造は既存の[[要素]]で十分表現可能で、
[[スタイル付け]]に関しては [[CSS]] で解決するべきだとして追加を拒否しています。

[48] [CITE['''['''whatwg''']''' Request: Explicit grouping within <dl>]] ([CODE[2007-05-27 03:53:26 +09:00]] 版) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011511.html>

[49] [CITE['''['''whatwg''']''' several messages about the <di> proposal]] ([CODE[2007-03-01 16:31:39 +09:00]] 版) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009712.html>

[50] [CITE[我的春秋: 定義リストの違和感]] ([CODE[2007-05-27 12:04:02 +09:00]] 版) <http://my-chunqiu.cocolog-nifty.com/blog/2007/05/post_d769.html>
([[名無しさん]] [WEAK[2007-05-27 03:06:01 +00:00]])

[51] [CITE@en[XHTML2 lists]] ([[Liorean]] 著, [CODE[2002-10-03 04:06:50 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-html/2002Oct/0009.html>

[52] [CITE[''''''[''''''whatwg'''''']'''''' <di>? Please?]]
( ([TIME[2012-02-04 10:20:15 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-February/034619.html>

[67] 
[CITE@en[FAQ - WHATWG Wiki]], [TIME[2023-10-04T03:59:00.000Z]], [TIME[2024-10-06T07:48:18.207Z]] <https://wiki.whatwg.org/index.php?title=FAQ&oldid=9975#HTML_should_group_.3Cdt.3Es_and_.3Cdd.3Es_together_in_.3Cdi.3Es.21>

[FIG(data)[ [113] [[HTML要素概説]]

:[F[要素名]]:[CODE[di]]
:日付:[TIME[2005-05-27]]
:説明:
[TIME[2005-05-27]]の [CITE[XHTML 2.0]]
[[WD]]
で
[CODE[di]]
が追加された。
[SRC[XHTML2-20050527]]
現在の 
[CODE[div]]
に当たる。
[[名前空間]]は紆余曲折を経て最終版では[[HTML名前空間]]となっていた。

]FIG]

** [CODE[di]] としての [CODE[div]]

[53] 十数年の時を経て[TIME[2016年10月][2016-10]]、ようやく [CODE(HTMLe)@en[div]]
[[要素]]の新用法としてグループ化が実現しました。

[65] 
[CITE@en['''['''whatwg''']''' Presentational safety valves]], [[Anne van Kesteren]], [TIME[2023-08-26T22:10:31.000Z]], [TIME[2024-09-03T13:15:14.685Z]] <https://lists.w3.org/Archives/Public/public-whatwg-archive/2007Jan/0039.html>

[45] [CITE@en[Allow <div> around each <dt><dd> group in <dl> (#1945)]]
([[zcorpan]]著, [TIME[2016-10-31 17:25:43 +09:00]])
<https://github.com/whatwg/html/commit/5454d702e0262749aba55576dda32c48e0e498f0>

[54] [CITE@en[Allow <div> to group <li> inside <ol>/<ul>… · Issue #2007 · whatwg/html]]
([TIME[2016-11-04 15:08:15 +09:00]])
<https://github.com/whatwg/html/issues/2007>

[FIG(quote)[
[FIGCAPTION[
[55] [CITE@en[Minutes '''['''was: Agenda for 971023 HTML WG meeting''']''']]
([[Dan Connolly]]著, [TIME[1997-10-24 03:37:08 +09:00]])
<https://lists.w3.org/Archives/Public/w3c-wai-hc/1997OctDec/0160.html>
]FIGCAPTION]

> 
> some question about <DIV>; for now, stays %block;.
>

]FIG]

[56] [CITE@en[Bring outdated parts of the FAQ up to date]]
([[sideshowbarker]]著, [TIME[2017-09-07 04:38:34 +09:00]])
<https://github.com/whatwg/html/commit/5d512fe6f54a332d13ff2d0fee59f12a8d1701b3>

[57] [CITE@en[Restrict the main element to be used once per document]]
([[annevk]]著, [TIME[2018-01-23 17:10:16 +09:00]])
<https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086>

[68] 
[CITE['''['''Proposal''']''' <e>: an alternative to <div> as a generic element for smaller file sizes]], [TIME[2024-02-24T17:52:16.000Z]], [TIME[2024-11-07T13:59:36.327Z]] <https://discourse.wicg.io/t/proposal-e-an-alternative-to-div-as-a-generic-element-for-smaller-file-sizes/3990/>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)