div

div 要素 (HTML)

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

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

[10] 仕様書:

[5]

分類
流れ内容
XML名前空間
http://www.w3.org/1999/xhtml
開始タグ
必須
終了タグ
必須
文脈
流れ内容が認められる場所、 typexhtmlText constructatom:content 要素子要素として
内容モデル
透過
属性
属性名属性値既定値説明状態出典
align[HTML4] 非推奨
anticache非標準
apply非標準
class[HTML4] %coreattr
bv:ca標準
bv:cat標準
bv:closebox1標準
bv:closeboxtooltip%Text;標準
uicontact:cid標準
bv:cns標準
bv:commentcountNUMBER標準
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
movableTrue非標準Windows Live Spaces
multiinstanceFalse非標準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
placementMustBeFirst非標準Windows Live Spaces
bv:prevtooltip%Text;標準
v:shapeVML 形状
sizemin非標準Dojo
sizeshare非標準Dojo
spellcheck非標準Firefox 2
src非標準
styleスタイル情報[HTML4] %coreattr
templatecsspath非標準Dojo
title注釈的題[HTML4] %coreattr
toggle非標準Dojo
toggleduration非標準Dojo
valigntop標準
width非標準
wraptag非標準
xmlnshttp://www.w3.org/1999/xhtml 固定名前空間名W3C 勧告XHTML m12n

意味

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

Atom での利用

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

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

type=html

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

type=xhtml

[35] typexhtml の場合、 Text constructatom: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) の章で文字が両端で揃えるようにと指定しています。

歴史

誕生

centerdivn の項も参照。

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

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

3月24日版 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.

と同じ説明があります。

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

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

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

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

[19] ISO-HTML: ところで HTML 3 とほぼ同時期に進行していた ISO-HTML では、紆余曲折を経て div (規定) と divn (参考) が用意されています。 divHTML 3div に由来するもので、 divnISO-HTML の当初の案の bn に由来するものです。 HTML 3div の誕生のきっかけとなった 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。 以前の見出しや段落などをまとめて章節に という意味より拡大していることに注意して下さい。 ここに divspan と合わせて HTML の語彙の拡張の手段という意味が与えられたのです。 まあ実世界 (>>21) に幾分譲歩したと取れなくもありません。 なお、当初 div内容モデル%block とされています HTML 4.0 WD1 が、当時の HTMLDTD%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 においては bodyblockquote と同様に %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 を知り、次に divalign を知りました。 CSS が実装されるのはまだ先の話で、 1995年〜1996年頃の多くの人達にとって div は文章を右寄せにするためのタグでしかありませんでした。

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

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

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

不思議解釈

[23]

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

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

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

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

関連

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

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

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

[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) ( 版) <http://jintrick.net/agenda/2007/12/re-div-div.html>

div 要素 (XBL)

[38] XBL2div 要素は、・・・

w:div 要素 (OOXML)

[39] OOXMLdiv 要素は、・・・

div 要素 (SMIL)

[28] SMIL 3.0 smilText ( 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-text.html#edef-textDiv>

div 要素型 (SGML)

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

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

[41] [whatwg] wrapper element ( 版) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/031977.html>

[42] CSS Print Profile ( ( 版)) <http://www.w3.org/TR/2013/NOTE-css-print-20130314/#s.8.1>

[43] XML Binding Language (XBL) 2.0 ( ( 版)) <http://www.w3.org/TR/2007/CR-xbl-20070316/#the-div>

[44] Welcome to Netscape Navigator Version 2.0 ( ( 版)) <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? ( ( 版)) <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-February/034619.html>

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

[45] Allow <div> around each <dt><dd> group in <dl> (#1945) (zcorpan著, ) <https://github.com/whatwg/html/commit/5454d702e0262749aba55576dda32c48e0e498f0>

[54] Allow <div> to group <li> inside <ol>/<ul>… · Issue #2007 · whatwg/html () <https://github.com/whatwg/html/issues/2007>

[55] Minutes [was: Agenda for 971023 HTML WG meeting] (Dan Connolly著, ) <https://lists.w3.org/Archives/Public/w3c-wai-hc/1997OctDec/0160.html>

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

[56] Bring outdated parts of the FAQ up to date (sideshowbarker著, ) <https://github.com/whatwg/html/commit/5d512fe6f54a332d13ff2d0fee59f12a8d1701b3>

[57] Restrict the main element to be used once per document (annevk著, ) <https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086>