意味

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

Atom での利用

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

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

レンダリング

[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 はその辺にちゃんと言及していないような気がしますが。

誕生

[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.

と同じ説明があります。

[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文書のアクセス可能性や利用可能性を著しく低下させ、 批判の対象となりました。

• [JOE] 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] Divisions http://www.w3.org/MarkUp/html3/divisions.html
• [HTML3 Style WD2] HTML3 and Style Sheets http://www.w3.org/TR/WD-style-960115.html#divtag
• [HTML 3.2 WD] HTML 3.2 Reference Specification http://www.w3.org/TR/WD-html32-960909.html#div
• [HTML 4.0 WD1] 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] 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] 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] 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」に囲まれた部分には前後に改行が入りませんので、 「テキストのカラー変更」などに使用します。

出典: divとspan、idとclass/アオゾラウェブデザイン[Aozora Web Design] http://www.aozoraweb.com/design/css/cssdiv.shtml (2005年4月現在)

div と span では div が一般的なのだそうな。 比べられるようなものでもなかろうに。

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

関連

[29] center 要素は div 要素の特殊形だと考えられています。

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

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

[32] ISO-HTML の準備用の文書型には見出しの階数に対応した divn 要素が定義されていました。

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

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

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

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

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

[25] 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/ (名無しさん 2006-09-30 23:49:08 +00:00)

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

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

div 要素 (XBL)

w:div 要素 (OOXML)

div 要素 (SMIL)

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

div 要素型 (SGML)

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

DTBook

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

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

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

HTML5

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

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

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

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

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

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

[44] Welcome to Netscape Navigator Version 2.0 ( (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

di 要素

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

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

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

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

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

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

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

[67] FAQ - WHATWG Wiki, 2023-10-04T03:59:00.000Z, 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

di としての div

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

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

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

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

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

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

[68] [Proposal] <e>: an alternative to <div> as a generic element for smaller file sizes, 2024-02-24T17:52:16.000Z, 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/