リストを作るタグ
HTMLではリストを作るときに利用できるタグが3種類あり、それぞれを適切に使用していかなければいけません。
ここでは、その3種類のタグとルールを紹介します
箇条書きリストを作るulタグ
ulタグは順番の関係がないリストを作るときに使うタグで、箇条書きリストの範囲を示します。
- 中にはliタグしか入れることができません。
- liタグはリストの項目一つ一つを表すタグで、項目の数だけ入れることができます。
- ulタグに囲まれたliは各項目の先頭に「●」が付きます。
|
1 2 3 4 5 6 7 |
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> |
順番付きリストを作るolタグ
olタグは、順番付きのリストを作るときにを使うタグで順番付きのリストの範囲を示します。
- 中にはliタグしか入れることができません。
- 各項目の先頭に１から順番で数字が付く
|
1 2 3 4 5 6 7 |
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ol> |
liタグ
liタグはリストの範囲のul要素とol要素の中でしか使えません
ですが、li要素の中には様々なタグが使えるため、色々な表現が可能です。 例えばli要素の中にul要素を入れてリストの中にリストを作ったり、img要素を使って画像を表示することも可能です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li>リスト1 <ul> <li>リスト1-1</li> <li>リスト1-2</li> <li>リスト1-3</li> </ul> </li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> |
説明リスト
上記で紹介したのは単純なリストです。
何かを説明しつつリスト化するならば説明リストが便利です。
説明リストの範囲を示すdlタグ
その範囲が、説明リスト(Description List)であることを示します。
説明リストとは、『何か（dt）』に対して「その内容（dd）』がセットになっているリストを意味します。 dl要素の中にはdt要素とdd要素、divタグしか使えないのでこのルールも一緒に覚えましょう。
説明するものの設定をするdtタグ
項目名(Description Term)を設定するタグ
dd要素で説明したい用語や文章を囲んで使う。
dt要素の中にはインライン要素しか入れることができないので注意！
説明や定義の設定をするddタグ
説明や定義(Description Definition)を設定をするタグ
dt要素の中身に関する説明の詳細文を囲んで使う。
dd要素の中にはインライン要素以外の要素も入れることができるので様々な表現が可能
|
1 2 3 4 |
<dl> <dt>項目名</dt> <dd>説明文</dd> </dl> |
HTML5以前の話
HTML4.01からHTML5へのバージョンアップによる変更点が存在し、若干意味合いが変わっています
| HTML4.01 | HTML5 | |
|---|---|---|
| dl | definition list（定義リスト） | description list（説明リスト） |
| dt | definition term（定義される言葉） | description term（説明される言葉） |
| dd | definition description（定義の説明） | description, definition（説明や定義） |
