HTML 4.0のDTD拾い読み
HTML 4.0のDTD (Document Type Definition) が公開されていますので、それを拾い読みしながらHTML 4.0で新しくなった点などを見てみましょう。
DTDなんて見たことないという方は、最初にごくごく簡単なDTDの説明にざっと目を通すと良いかもしれません。
基本属性の整備
ほとんどの要素（タグ）で共通に使われる基本属性が定義されました。主なものはID, CLASS, STYLE, TITLEという%coreattrs;、LANG, DIRという各国の文字を表現するときに使う%i18n;、oncilick, onmouseupなど従来のSCRIPTで使われてきた%events;です。これらの属性はまとめて%attrs;という実体定義が与えられ、ほぼ全てのタグで指定できます。これにより、HTMLドキュメント中においてクラス指定や各国語の混在、スクリプトの起動などが自由にできるようになるわけです。
整理されたコンテント・モデル
従来のHTMLでは、それぞれの要素（タグ）について、関係の記述が複雑で、どのような包含関係が正しいのか理解しにくかったのですが、今回は分類（実体宣言）が整理され、やや分かりやすくなりました。大まかにはBODY内で記述される要素は
- %inline;: 普通の文字、 B, EM, STRONG, A, BR, IMG など、段落の変更を伴わないもの
- %block;: P, Hn, UL, OL, DL, PRE, BLOCKQUOTE, TABLE など、独立した段落を構成するもの
のいずれかに分類されます。一般に、%inline;要素の中に%block;の要素を持つことはできません。DTDを抜粋すると：
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | CENTER |
NOSCRIPT | NOFRAMES | BLOCKQUOTE | FORM | ISINDEX | HR |
TABLE | FIELDSET | ADDRESS">
<!ENTITY % flow "%block; | %inline;">
<!ELEMENT BODY O O (%flow;)* +(INS|DEL)>
となっています。各要素の関係を木構造で表してみましたので、参照してください。
高度なフォーム
フォームの各要素にScriptに対応した属性（onselectなど）が加わったほか、新しい要素としてLABEL, FIELDSET, LEGEND, BUTTONが加わっています。最初の3つは特に障碍を持つ人の使いやすさに配慮したもの。BUTTONはマークしたHTML全体がボタンとして働くので、表現力のあるボタンを用意できるようになります。accept-charsetはフォームに記入する文字セットをRFC2045の方法で指定して、処理可能な文字を限定するものです。
<!ELEMENT FORM - - (%flow;)* -(FORM)> <!ATTLIST FORM %attrs; -- %coreattrs, %i18n, %events -- action %URI; #REQUIRED -- server-side form handler -- method (GET|POST) GET -- HTTP method used to submit the form-- enctype %ContentType; "application/x-www-form-urlencoded" onsubmit %Script; #IMPLIED -- the form was submitted -- onreset %Script; #IMPLIED -- the form was reset -- target %FrameTarget; #IMPLIED -- render in this frame -- accept-charset %Charsets; #IMPLIED -- list of supported charsets -- >
accesskey
LABEL, LEGENDなどの要素に加えられたaccesskey属性は、キーボード・ショートカットを提供するメカニズムです（実際の使い方、例えばAltキー／commandキーと合わせてタイプする、その文字を下線付きで表示するなどは、ブラウザの実装方法によります）。LABEL要素にはforを使って明示的に対象となるフィールド（INPUTなど）のIDを指定する方法と、フィールドをLABEL要素で囲むことで暗黙のうちに対象を指定する方法があります。
<!-- Each label must not contain more than ONE field --> <!ELEMENT LABEL - - (%inline;)* -(LABEL) -- field label text --> <!ATTLIST LABEL %attrs; -- %coreattrs, %i18n, %events -- for IDREF #IMPLIED -- matches field ID value -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- >
FIELDSET
FIELDSET要素はDIVと同じくブロックをまとめるタグですが、LEGEND要素と組み合わせることでブロック全体に名前を付け、accesskey属性でキーボード・ショートカットを設定したりできます。
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*)> <!ATTLIST FIELDSET %attrs; -- %coreattrs, %i18n, %events -- > <!ELEMENT LEGEND - - (%inline;)*> <!ENTITY % LAlign "(top|bottom|left|right)"> <!ATTLIST LEGEND -- fieldset legend -- %attrs; -- %coreattrs, %i18n, %events -- accesskey %Character; #IMPLIED -- accessibility key character -- align %LAlign; #IMPLIED -- relative to fieldset -- >
BUTTON
BUTTON要素は、この要素で囲まれた範囲にボタンの働きを与えます。例えばBUTTON要素の内容にIMG要素を持ってくると、グラフィックボタンを提供できます。これは、INPUT要素のtype属性に新たに加わったimageを利用しても実現可能です。
<!ELEMENT BUTTON - -
(%flow;)* -(A|%formctrl;|FORM|ISINDEX|FIELDSET|IFRAME)
>
<!ATTLIST BUTTON
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED
value CDATA #IMPLIED -- sent to server when submitted --
type (button|submit|reset) submit -- for use as form button --
disabled (disabled) #IMPLIED -- unavailable in this context --
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
%reserved; -- reserved for possible future use --
>
テーブルの強化
TABLEの属性にframeとrulesが追加され、罫線を引く場所を指定できるようになりました。たとえば
<TABLE frame=above rules=rows>
とすると、表の外枠は上部だけ、セルの区切りは行だけ（横の罫線のみ）という具合になります
また、新たな要素としてTHEAD, TFOOT, TBODY, COLGROUP, COLが定義されました。THEAD, TFOOT, TBODYはワープロや表計算のヘッダ、フッタと同様にページをめくっても画面（あるいは紙）の上部、下部に常に表示される領域を指定できます。TFOOTはTBODYより先に記述することになっていますが、これも全データを読み込む前にとりあえず一画面を表示するために、先にフッタを準備しておくためです。
COLGROUP, COLは列の幅やアラインメントをまとめて定義したりするための要素です。これらを指定することにより、大きなテーブルでもデータを読み込みながら順次画面に表示していくことが可能になります（これまではデータを全部ロードしないと列の数が確定できないので、表示を始めることができず、長い間空白の画面で待たされることがあった）。
さらに従来からあるalign属性の値として、文字やオフセットを使うことができるようになりました。たとえば <COL align="char" char="."> のようにすると、小数点で桁揃えができるわけです。
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ELEMENT CAPTION - - (%inline;)+> <!ELEMENT THEAD - O (TR)+> <!ELEMENT TFOOT - O (TR)+> <!ELEMENT TBODY O O (TR)+> <!ELEMENT COLGROUP - O (col)*> <!ELEMENT COL - O EMPTY> <!ELEMENT TR - O (TH|TD)+> <!ELEMENT (TH|TD) - O (%flow;)*> <!ATTLIST TABLE -- table element -- %attrs; -- %coreattrs, %i18n, %events -- summary %Text; #IMPLIED -- purpose/structure for speech output-- width %Length; #IMPLIED -- table width -- border %Pixels; #IMPLIED -- controls frame width around table -- frame %TFrame; #IMPLIED -- which parts of frame to render -- rules %TRules; #IMPLIED -- rulings between rows and cols -- cellspacing %Length; #IMPLIED -- spacing between cells -- cellpadding %Length; #IMPLIED -- spacing within cells -- align %TAlign; #IMPLIED -- table position relative to window -- bgcolor %Color; #IMPLIED -- background color for cells -- %reserved; -- reserved for possible future use -- datapagesize CDATA #IMPLIED -- reserved for possible future use -- > <!ENTITY % cellhalign "align (left|center|right|justify|char) #IMPLIED char %Character; #IMPLIED -- alignment char, e.g. char=':' -- charoff %Length; #IMPLIED -- offset for alignment char --" > <!ATTLIST COLGROUP %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- default number of columns in group -- width %MultiLength; #IMPLIED -- default width for enclosed COLs -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > <!ATTLIST COL -- column groups and properties -- %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- COL attributes affect N columns -- width %MultiLength; #IMPLIED -- column width specification -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- > <!ATTLIST (THEAD|TBODY|TFOOT) -- table section -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
TH, TD要素にはaxis属性が追加されました。これはそれぞれのセルに「カテゴリー」を表すラベル（名札）を設定するもので、音声合成システムや他のデータベース、表計算ソフトとのデータのやりとり、表の中から特定の情報を抽出するアプリケーションなどで利用できるとされています。
<!ATTLIST (TH|TD) -- header or data cell -- %attrs; -- %coreattrs, %i18n, %events -- abbr %Text; #IMPLIED -- abbreviation for header cell -- axis CDATA #IMPLIED -- names groups of related headers-- headers IDREFS #IMPLIED -- list of id's for header cells -- scope %Scope; #IMPLIED -- scope covered by header cells -- rowspan NUMBER 1 -- number of rows spanned by cell -- colspan NUMBER 1 -- number of cols spanned by cell -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- nowrap (nowrap) #IMPLIED -- suppress word wrap -- bgcolor %Color; #IMPLIED -- cell background color -- width %Pixels; #IMPLIED -- width for cell -- height %Pixels; #IMPLIED -- height for cell -- >
なお、単なるレイアウトの目的でテーブル要素を使うべきではない(should not)と改めて仕様書に明記されています。使いたくなる場合もありますが、できるだけ控えるようにすべきです。
フレームの強化
これまではNetscapeやMS-IEの拡張であったフレームがHTMLの定義に取り込まれ、さらにIFRAMEという要素が加わって、HTML文書内にIMGと同様にしてフレームを埋め込むことができるようになりました。
<!ELEMENT IFRAME - - (%flow;)*>
<!ATTLIST IFRAME
%coreattrs; -- id, class, style, title --
longdesc %URI; #IMPLIED -- link to long description
(complements title) --
name CDATA #IMPLIED -- name of frame for targetting --
src %URI; #IMPLIED -- source of frame content --
frameborder (1|0) 1 -- request frame borders? --
marginwidth %Pixels; #IMPLIED -- margin widths in pixels --
marginheight %Pixels; #IMPLIED -- margin height in pixels --
scrolling (yes|no|auto) auto -- scrollbar or none --
align %IAlign; #IMPLIED -- vertical or horizontal alignment --
height %Length; #IMPLIED -- frame height --
width %Length; #IMPLIED -- frame width --
>
IFRAMEは終了タグを必要とします。開始タグと終了タグで囲まれた部分は、IFRAMEをサポートするブラウザでは無視され、古いバージョンではフレームの代わりに表示されるHTML文となります。IFRAMEはIMGと同じく%inline;タイプに属するので、段落の変更は生じず、テキストを周囲に回り込ませることができます。
オブジェクト、スクリプト、スタイル
HTML 3.2では将来バージョンへの予約として要素定義のみされていたSCRIPT要素、STYLE要素が正式にサポートされました。また、外部オブジェクトを文書に埋め込むためのOBJECT要素が導入されました。これまでSchockwaveなどのプラグインを埋め込むために使われていたEMBED要素に代わるものです（MS-IEではActiveXを使うためにこのOBJECTをサポートしている）。4.0ではJavaアプレットのためのAPPLET要素は残されていますが、将来はこのOBJECTで統一してマルチメディア・オブジェクトを扱う方向のようです。
<!ELEMENT OBJECT - - (PARAM | %flow;)*> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- declare but don't instantiate flag -- classid %URI; #IMPLIED -- identifies an implementation -- codebase %URI; #IMPLIED -- base URI for classid, data, archive-- data %URI; #IMPLIED -- reference to object's data -- type %ContentType; #IMPLIED -- content type for data -- codetype %ContentType; #IMPLIED -- content type for code -- archive %URI; #IMPLIED -- space separated archive list -- standby %Text; #IMPLIED -- message to show while loading -- height %Length; #IMPLIED -- override height -- width %Length; #IMPLIED -- override width -- usemap %URI; #IMPLIED -- use client-side image map -- name CDATA #IMPLIED -- submit as part of form -- tabindex NUMBER #IMPLIED -- position in tabbing order -- align %IAlign; #IMPLIED -- vertical or horizontal alignment -- border %Length; #IMPLIED -- link border width -- hspace %Pixels; #IMPLIED -- horizontal gutter -- vspace %Pixels; #IMPLIED -- vertical gutter -- %reserved; -- reserved for possible future use -- >
なお、このusemap属性と合わせてA要素にshape, coordsという属性が追加されました。DTDだけではよくわかりませんが、これはクライアント・サイドのイメージマップを実現するための属性です。
<OBJECT data="navbar.gif" type="image/gif" usemap="#map1"> <MAP name="map1" id="map1"> <A href=guide.html shape=rect coords="0,0,118,28">Access Guide</A> | <A href=shortcut.html shape=rect coords="118,0,184,28">Go</A> | <A href=search.html shape=rect coords="184,0,276,28">Search</A> | <A href=top10.html shape=rect coords="276,0,373,28">Top Ten</A> </MAP> </OBJECT>
この方法により、OBJECTをサポートしないブラウザでは<A>タグで囲まれた文字ベースのリンクが、HTML 4.0のブラウザではnavbar.gifの画像がクリッカブルマップとして表示されます。
国際化
LANG, DIR属性
ほとんど全ての要素で使える属性として、lang, dirの2つが導入されました。langはRFC1766で定義されている方法で言語コード（日本語ならja）を指定します。dirは文字の方向を示し、アラビア語のように右から左に記述するものはdir="rtl"と指定します。
文字の方向を一時的に変えるBDO要素
ある局面で、強制的に文字の方向を指定するためにBDO要素を用います。BDOとはBiDirectional Overrideを示します。
範囲を示すSPAN
特に他のタグでマークアップされない部分にlang, dir, styleなどの属性を付加するために、SPAN要素で対象範囲を指定できます。たとえば
Document is <SPAN>文書</SPAN> in Jpanaese
という具合です。これはDIV要素のinline版と考えることができます。
<!ELEMENT SPAN - - (%inline;)* -- generic language/style container --> <!ATTLIST SPAN %attrs; -- %coreattrs, %i18n, %events -- %reserved; -- reserved for possible future use -- >
その他
変更履歴を示すINS/DEL
文書に対する追加、削除を示す要素が導入されます。
<!ELEMENT (INS|DEL) - - (%flow;)* -- inserted/deleted text --> <!ATTLIST (INS|DEL) %attrs; -- %coreattrs, %i18n, %events -- cite %URI; #IMPLIED -- info on reason for change -- datetime %Datetime; #IMPLIED -- date and time of change -- >
短い引用を示すQ
あるまとまった範囲の引用を示すBLOCKQUOTE要素のほかに、本文中に短い引用を埋め込むためのQ要素が用意されます。BLOCKQUOTEと違って段落の変更を伴いません。
<!ELEMENT Q - - (%inline;)*> <!ATTLIST Q %attrs; -- %coreattrs;, %i18n;, %events; -- cite %URI #IMPLIED -- URL for source document or msg -- >
略語を示すABBRとACRONYM
ACRONYMは "WWW" のような略語（頭字語）であることを、ABBRは "Mr." のような省略形の表記を示す要素です。スペルチェッカーや音声合成機能などが単語を判断するときに役立ちます。フルスペルはtitle属性を用いて記述します。（この両者は、仕様書でもちょっと混乱して用いられています）
<ACRONYM title="World Wide Web">WWW</ACRONYM>