HTMLでは、文を箇条書き(リスト)として表現するために幾つかの方式が用意されています。どのリスト方式であっても、1つ以上のリスト項目が含まれていなければなりません。リスト方式には、次の3つがあります。
上記の箇条書きは、順不同のリストですが、UL要素を用いて次のように記されています。
<UL> <LI>順不同のリスト <LI>番号つきリスト <LI>定義リスト </UL>
番号つきのリストは、OL要素によって記されます。料理のレシピなど手順が重要であるような箇条書きに使われます。
定義リストは、DL要素によって記されます。一般的には「用語・定義」の組が並べられることとなります。(とはいえ定義リストには他の使用法もあります。)商品の広告などに、下記のような定義リストが使われることもあるでしょう。
これはHTMLで次のように記されています。
<DL> <DT><STRONG>低価格</STRONG> <DD>新バージョンは、旧バージョンより大幅に値下げしました! <DT><STRONG>簡単</STRONG> <DD>より操作を易しくしました! <DT><STRONG>お子さまにも安全</STRONG> <DD>お子さまだけが部屋にいる時でも、 お子さまを傷つけるようなことはありません (保証の限りではありませんが)。 </DL>
各リストは、下の例のように、入れ子にすることもできますし、他方式のリストと組み合わせて使うこともできます。この例では定義リストに順不同リスト(材料の表記)と番号つきリスト(手順の表記)を組み合わせています。
3つのリスト方式がどのように表示されるかは、ユーザエージェントによる違いがあります。リストを文章の字下げの目的だけで使うのはやめましょう。字下げは、スタイルシートなどによって記述すべきスタイル指定です。
<!ELEMENT UL - - (LI)+ -- unordered list -->
<!ATTLIST UL
%attrs; -- %coreattrs, %i18n, %events --
>
<!ELEMENT OL - - (LI)+ -- ordered list -->
<!ATTLIST OL
%attrs; -- %coreattrs, %i18n, %events --
>
開始タグ: 必要、終了タグ: 必要
<!ELEMENT %flow;)* -- list item -->
<!ATTLIST LI
%attrs; -- %coreattrs, %i18n, %events --
>
開始タグ: 必要、終了タグ: 省略可能。
属性の定義
他に使用可能な属性
番号つきリストも順不同リストも、視覚系ユーザエージェントによる「順番表示」の部分を除いて、全く同じ方法で表示されます。個々のユーザエージェントにより、順番表示の表現は様々になされます。順不同リストには番号が振られません。
どちらの方式のリスト要素も、LI要素によって指定されるリスト項目を列記するものです。(「LI」要素の終了タグは省略可能。)
基本的なリスト構造の例を下に挙げます。
<UL> <LI> ... 第1項 ... <LI> ... 第2項 ... ... </UL>
非推奨例(DEPRECATED EXAMPLE):
<UL> <LI> ... 大項目の1番目... <OL> <LI> ... 中項目の1番目... <LI> ... 中項目の2番目... <OL start="10"> <LI> ... 小項目の1番目... </OL> <LI> ... 中項目の3番目... </OL> <LI> ... 大項目の2番目... </UL>
番号つきリストの番号指定について。番号つきリストでは、飛び飛びになっているリストに自動的に連続した番号を割り当てたり、ある行の番号を隠したりというようなことはできません。けれども、リスト表記の際にvalue 属性による番号指定を行うことなら可能です。「value」の属性値が与えられた部分以下は、その値から始まる順番の番号が割り当てられます。
<ol> <LI value="30"> 左記の指定でこの項の番号は30番になります。 <LI value="40"> 左記の指定でこの項の番号は40番になります。 <LI> そしてこの項目の番号は41番になります。 </ol>
<!-- definition lists - DT for term, DD for its definition -->
<!ELEMENT DL - - (DT|DD)+ -- definition list -->
<!ATTLIST DL
%attrs; -- %coreattrs, %i18n, %events --
>
開始タグ: 必要、終了タグ: 必要。
<!ELEMENT %inline;)* -- definition term -->
<!ELEMENT %flow;)* -- definition description -->
<!ATTLIST (DT|DD)
%attrs; -- %coreattrs, %i18n, %events --
>
開始タグ: 必要、終了タグ: 省略可能。
他に使用可能な属性
定義リストと他の方式とのほんのちょっとの違いは、リスト項目が2つの部分から成り立っているという部分です。定義対象が、インラインコンテントのみを内容とするDT要素として記述され、叙述部分は、ブロックレベルコンテントを内容とできるDD要素として記述されます。
定義リストの例を示します。
<DL> <DT>Dweeb ドゥイーブ <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM> 熱中しやすい気質で、大きくなると「<EM>Nerd</EM> ナード」や 「<EM>Geek</EM> ギーク」になったりする。 <DT>Cracker クラッカー <DD>hacker on the Internet インターネット上のハッカー。 <DT>Nerd ナード <DD>male so into the Net that he forgets his wife's birthday ネット生活に夢中で妻の誕生日を忘れるような男。 </DL>
複数の用語と叙述を組み合わせる用例は次のようになります。
<DL> <DT>Center センター <DT>Centre センター <DD> A point equidistant from all points on the surface of a sphere. 表面のあらゆる点から等距離にある点。 <DD> In some field sports, the player who holds the middle position on the field, court, or forward line. フィールド競技で、フィールド、コート、前線等の中間に位置する プレイヤー。 </DL>
DL要素の応用として、例えば、対話を表現するのに、DT要素を話し手の名前、DD 要素を話の内容にあてる、というようなものがあります。
注。 以下は現在の視覚系ユーザエージェントがリストの表示をするときにどのような方法を採っているかを参考として記すものです。リストの表示形式をコントロールするにはスタイルシートを使う方がより巧く行くでしょう。(例えば番号付けの方法や、各言語に依存する表記法、字下げ、など。)
視覚系ユーザエージェントは、入れ子リストを表すために、字下げを行っています。
OL要素とUL要素のtype 属性が、リスト項目の目印表示形式を指定するために使われています。
UL要素のtype属性として設定可能な値は、 disc、square、 circleです。無指定の場合の既定値は、リストの階層によって異なります。
指定された属性値をどのように表現するかはユーザエージェントまかせになっています。各ユーザエージェントは、なるべく、値「disc」を黒丸で表示し、「circle」を白丸、「square」を白四角で表すようにしてください。
グラフィック系ユーザエージェントでの表示は、次のようになるでしょう。
値「disc」として
値「circle」として
値「square」として
OL要素が取りうるtype属性値は、次のようになります。(この値は大文字小文字を区別します。)
Type属性値 | 番号の打たれかた | |
---|---|---|
1 | アラビア数字 | 1, 2, 3, ... |
a | アルファベット小文字 | a, b, c, ... |
A | アルファベット大文字 | A, B, C, ... |
i | ローマ数字小文字 | i, ii, iii, ... |
I | ローマ数字大文字 | I, II, III, ... |
ここで、type属性が非推奨であり、 番号の打ちかたはスタイルシートによって指定されるべきであることにご留意下さい。
例えば、「CSS」を使って、ローマ数字による順序づけリストを実現するのに、次のように書くことができます。下の例で、本文に他のOL要素があったとしても、「"withroman"」というクラス指定があるものだけ、リスト番号がローマ数字で打たれることになります。
<STYLE type="text/css"> OL.withroman { list-style-type: lower-roman } </STYLE> <BODY> <OL class="withroman"> <LI> ステップ1 ... <LI> ステップ2 ... </OL> </BODY>
定義リストの表示方法もまた、ユーザエージェントに依存します。例えば、
<DL> <DT>Dweeb ドウィーブ <DD>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM> 熱中しやすい気質で、大きくなると「<EM>Nerd</EM> ナード」や 「<EM>Geek</EM> ギーク」になったりする。 <DT>Cracker クラッカー <DD>hacker on the Internet インターネット上のハッカー。 <DT>Nerd ナード <DD>male so into the Net that he forgets his wife's birthday ネット生活に夢中で妻の誕生日を忘れるような男。 </DL>
のような定義リストは、下記のように表示されるでしょう。
Dweeb ドウィーブ young excitable person who may mature into a Nerd or Geek 熱中しやすい気質で、大きくなると「Nerd ナード」や 「Geek ギーク」になったりする。 Cracker クラッカー hacker on the Internet インターネット上のハッカー。 Nerd ナード male so into the Net that he forgets his wife's birthday ネット生活に夢中で妻の誕生日を忘れるような男。
「DIR」要素も「MENU」要素も非推奨です。
両者の文書型定義についてはTransitional DTDをご覧下さい。
他に使用可能な属性
DIR要素は各項目を1行複数項目で、格子状に掲げるものです。MENU要素は1行1項目という形で掲げます。双方ともUL要素と同じ構造を持ち、表示の仕方だけが異なります。実際のところ、DIR要素やMENU要素をUL要素のリスト表示と同じ形式で表示するユーザエージェントもあります。
本仕様では、この「DIR」要素や「MENU」要素の代わりにUL要素を使うよう、強く求めます。