グループ化要素(2/3)
ol要素(順序付きリスト)
カテゴリ | フロー・コンテンツ |
---|---|
コンテンツモデル | 0個以上のli要素 |
利用可能な場所 | フロー・コンテンツが期待される場所 |
開始タグ | 必須 |
終了タグ | 必須 |
要素固有のコンテンツ属性 | reversed(指定があれば降順、指定がなければ昇順) start(最初の項目の順番を表され、指定の番号から順に各項目に番号を付与) |
デフォルトスタイル | ol{ display:block; margin-top:1em; margin-bottome:1em; padding-left:40px; list-style-type:decimal; } |
ol要素は、順序に意味を持つリストを表します。もし、リストの順序が変わってしまうと、意味が変わってしまいます。もし、順序に意味のないリストであれば、ol要素を使います。
リストの項目は、li要素を使ってマークアップします。
■利用例
<h3>オリンピックメダル獲得数(2008年まで)</h3> <ol> <li>アメリカ</li> <li>ドイツ</li> <li>ロシア</li> </ol>
利用例をブラウザで表示すると次の図のようになります。

ol要素の順序は1番から順番に表示されます。もし、途中の番号から始めたいのであれば、start属性を使って番号を指定します。次の利用例がサンプルコードです。
■利用例
<h3>オリンピックのメダル獲得数4位以降</h3> <ol start="4"> <li>フランス</li> <li>イギリス</li> <li>イタリア</li> </ol>

start属性の値は、負の値も利用できます。もし、start="-3"と指定した場合は、-3、-2、-1、0、1・・と表示されます。
また、論理属性であるreversed属性を使うと、項目の表示順は変わりませんが、順番を降順にすることができます。しかし、現時点(2011年7月)でreversed属性をサポートしているブラウザはありません。
ul要素(非順序リスト)
カテゴリ | フロー・コンテンツ |
---|---|
コンテンツモデル | 0個以上のli要素 |
利用可能な場所 | フロー・コンテンツが期待される場所 |
開始タグ | 必須 |
終了タグ | 必須 |
要素固有のコンテンツ属性 | なし |
デフォルトスタイル | ul{ display:block; margin-top:1em; margin-bottome:1em; padding-left:40px; list-style-type:disc; } |
ul要素は項目のリストを表します。この要素は、項目の順序を変えても、意味が変わらないようなリストに使います。
■利用例
<h3>日本の中心都市</h3> <ul> <li>東京</li> <li>名古屋</li> <li>大阪</li> </ul>
利用例でいうと、どの都市が先になろうとも、後になろうとも特に構わないリストとなります。順序に意味を持たない箇条書きリストとして使います。
li要素(リスト項目)
カテゴリ | なし |
---|---|
コンテンツモデル | フロー・コンテンツ |
利用可能な場所 | ol要素、ul要素、menu要素の中 |
開始タグ | 必須 |
終了タグ | 該当のli要素の次に別のli要素が続く場合、または該当のli要素がその親要素の最後の子要素となる場合に省略できます。 |
要素固有のコンテンツ属性 | この要素がol要素の中にある場合だけ、value属性を使えます。 |
デフォルトスタイル | li{ display:list-item; } |
li要素は、リストの項目を表します。
この要素は、ol要素の中にある場合は、valueコンテンツ属性を使うことができます。次の利用例のように使えます。
■利用例
<h3>ボーリング大会結果</h3> <ol> <li>田中 仁</li> <li>森田 さやか</li> <li value="2">砂山 道人</li> <li value="4">佐藤 優華</li> <li>森 晃志郎</li> </ol>
利用例をみると、2位が二人いるような場合の使い方になります。結果は次のようにブラウザ上に表示されます。

valueコンテンツ属性を使うことによって、順番の値を変えることができますが、これはol要素内にあるli要素だけに利用できます。
dl要素(記述リスト)
カテゴリ | フロー・コンテンツ |
---|---|
コンテンツモデル | 0個以上のdt、およびdd要素のグループ |
利用可能な場所 | フロー・コンテンツが期待される場所 |
開始タグ | 必須 |
終了タグ | 必須 |
要素固有のコンテンツ属性 | なし |
デフォルトスタイル | dl{ display:block; margin-top:1em; margin-bottom:1em; } |
dl要素は、名前と値がセットになったリストを表します。dl要素の項目として使う名前と値は、それぞれ対応付けられたものでなければいけません。なお、名前と値は1対1である必要はなく、1対多、多対1、多対多でも良いです。
■利用例
<dl> <dt>本のタイトル</dt> <dd>初心者入門HTML</dd> <dt>出版社</dt> <dd>日本印刷JP</dd> <dt>著者名</dt> <dd>名無しの権兵衛</dd> </dl>
利用例をブラウザで表示すると次の図ようになります。

もし、出版社名が分からなくて、そのdd要素をマークアップしなかったら、その記述方法は誤ったものになります。不明であれば、dd要素内に「不明」と表示されるように内容を書くようにします。
dt要素(用語)
カテゴリ | なし |
---|---|
コンテンツモデル | フレージング・コンテンツ |
利用可能な場所 | dl要素の中に記述するが、dd要素より前に来る必要がある。 |
開始タグ | 必須 |
終了タグ | 該当のdt要素の次にdt要素またはdd要素が来るなら省略できる。 |
要素固有のコンテンツ属性 | なし |
デフォルトスタイル | dt{ display:block; } |
dt要素は、dl要素の中で使い、その記述リストの項目名を表します。なお、用語定義の用語にdt要素を使うことがありますが、dt要素だけでは用語定義の用語を表すわけでなく、dfn要素を使う必要があります。
dd要素(用語の説明)
カテゴリ | なし |
---|---|
コンテンツモデル | フロー・コンテンツ |
利用可能な場所 | dl要素の中に記述するが、dt要素またはdd要素より後に来る必要がある。 |
開始タグ | 必須 |
終了タグ | 該当のdd要素の次にdt要素またはdd要素が来るなら省略できる。 |
要素固有のコンテンツ属性 | なし |
デフォルトスタイル | dd{ display:block; margin-start:40px; } |
dd要素は、dl要素の中で使い、その記述リストの項目の値を表します。
【各要素のリファレンス6】