HTMLは著者に対して、リスト情報を指定するための幾つかのメカニズムを提供する。どのリストも、1つ以上のリスト要素を含まねばならない。リストには、次の内容が含まれ得る。
例えば、上のリストは、順不同のリストであり、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 -- >
開始タグ: 必須、終了タグ: 必須
開始タグ: 必須、終了タグ: 省略可能
属性定義
別途定義がある属性
序列リストと順不同リストは、視覚系ユーザエージェントによる番号付けを除いて、全く同じ方法でレンダリングされる。ユーザエージェントは、この番号を様々な方法で示すであろう。順不同リストの項目は番号付けされない。
どちらのリストも、LI要素が定めるリスト項目の連なりによって構成される。LI要素の終了タグは省略され得る。
次に、リストの基本構造を例示する。
<UL> <LI> …最初のリスト項目… <LI> …2番目のリスト項目… ... </UL>
推奨しない例:
<UL> <LI> …大項目の第1項目… <OL> <LI> …中項目の第1項目… <LI> …中項目の第2項目… <OL start="10"> <LI> …小項目の第1項目… </OL> <LI> …中項目の第3項目… </OL> <LI> …大項目の第2項目… </UL>
番号順に関する詳細 序列リストにおいて、リストの番号付けを前のリストから自動的に引き継いだり、あるリスト項目の番号を隠したりすることは、できない。 しかし、著者は、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 DT - O (%inline;)* -- definition term --> <!ELEMENT DD - O (%flow;)* -- definition description --> <!ATTLIST (DT|DD) %attrs; -- %coreattrs, %i18n, %events -- >
開始タグ: 必須、終了タグ: 省略可能
別途定義がある属性
定義リストは他の形式のリストとは少しだけ異なり、リスト項目が、用語と記述という2つの部分から構成される。 用語はDT要素で示され、行内内容に制限される。 記述は、ブロックレベル内容を取るDD要素で示される。
次に例を示す。
<DL> <DT>Dweeb ドゥイーブ <DD>熱中しやすい若者で、大きくなると 「<EM>Nerd</EM>」や「<EM>Geek</EM>」になったりする。 <DT>Hacker ハッカー <DD>腕のいいプログラマ <DT>Nerd ナード <DD>技術には詳しいが社会性がない人 </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を使うと、ある番号付きリストの各リスト項目の番号がローマ数字小文字になるよう指定できる。 次の例では、"withroman"クラスのすべてのOL要素で、各リスト項目の冒頭にローマ数字がつく。
<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>熱中しやすい若者で、大きくなると 「<EM>Nerd</EM>」や「<EM>Geek</EM>」になったりする。 <DT>Hacker ハッカー <DD>腕のいいプログラマ <DT>Nerd ナード <DD>技術には詳しいが社会性がない人 </DL>
以下のようにレンダリングされるであろう。
Dweeb ドゥイーブ 熱中しやすい若者で、大きくなるとNerdやGeekに なったりする。 Hacker ハッカー 腕のいいプログラマ Nerd ナード 技術には詳しいが社会性がない人
DIRもMENUも推奨しない。
公式の定義については移行型DTDを参照されたい。
別途定義がある属性
DIR要素は、複数の段から成るディレクトリリストの生成に用いるよう設計された。 MENU要素は、単一の段から成るメニューリストに用いるよう設計された。 どちらもUL要素と同じ構造を持ち、レンダリングだけが異なっている。 実際には、ユーザエージェントはDIRリストやMENUリストを、ULリストと全く同様にレンダリングするであろう。
本仕様では、両要素の代わりに UL要素を用いるよう、強く推奨する。