2022-08-14

HTML: リスト要素（ul, ol, dl）の違いについて

HTML にはリストを表す要素として、ul 要素、ol 要素、dl 要素があります。 それぞれを一言で言うと、「ul 要素は順不同リスト」、「ol 要素は番号付きリスト」、 「dl 要素は用語定義リスト」です。

ul 要素はリスト項目の順序が重要ではなく、順不同のリスト（箇条書き）を作成する場合に使用します。

ol 要素はリスト項目の順序が重要であり、番号付きのリストを作成する場合に使用します。

dl 要素は用語の定義リストで、定義する用語と、用語の説明のセットからなります。 定義する用語を dt 要素、用語の説明を dd 要素に記述します。

ul 要素、ol 要素、dl 要素のサンプル

ul 要素（順不同リスト）の表示例とコード

<ul>
    <li>みかん</li>
    <li>リンゴ</li>
    <li>バナナ</li>
</ul>

表示結果：デフォルトでは、先頭に黒丸の付いたリストが作成されます。

ol 要素（番号付きリスト）の表示例とコード

<ol>
    <li>手を洗う</li>
    <li>おやつを食べる</li>
    <li>歯を磨く</li>
</ol>

表示結果：デフォルトでは、先頭に数値の付いたリストが作成されます。

dl 要素（番号付きリスト）の表示例とコード

<dl>
    <dt>HTML</dt>
    <dd>Hyper Text Markup Languageの略で、Webページを作るためのマークアップ言語</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略で、Webページのスタイルを指定するための言語</dd>
</dl>

表示結果：用語とその説明のセットとして表示されます。