【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>

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

  1. 手を洗う
  2. おやつを食べる
  3. 歯を磨く

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


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

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

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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト