文章をリスト化して説明するときには箇条書きの要素や説明リストの要素が利用できます。
箇条書きには2種類あり、順番のあるものはol、ないものはulタグを使用します。
また、用語集のような、用途と解説のペアをリストで表現するときにはdlタグを使用します。

これらのタグの関係を箇条書きで表すと以下のような表現になります。

  • 箇条書き
    • ol(順番のない箇条書き)
    • ul(順番のない箇条書き)
  • 説明リスト
    • dl(説明リスト)

タグ一覧

ul(Unordered List)
順序を持たないリストです。好きな和菓子の一覧を作るときなどに使います。
リスト内の項目はli(List Item)要素で定義します。

ol(Ordered List)
順序を持つリストです。人気の和菓子ランキングを作るときなどに使います。
リスト内の項目はli(List Item)要素で定義します。

dl(Description List)
「用語」と「解説」のようなペアをリスト化する要素です。和菓子と説明文を記述するときなどに使います。
リスト内の用語はdt(Description Term)要素、解説はdd要素で定義します。

使用例


<ul>
    <li>最中(もなか)</li>
    <li>羊羹(ようかん)</li>
    <li>素甘(すあま)</li>
</ul>
<ol>
    <li>最中(もなか)</li>
    <li>羊羹(ようかん)</li>
    <li>素甘(すあま)</li>
</ol>
<dl>
    <dt>最中(もなか)とは</dt>
    <dd>皮であんこを包んだ和菓子。</dd>
    <dt>羊羹(ようかん)とは</dt>
    <dd>あんこを寒天で固めた和菓子。</dd>
    <dt>素甘(すあま)とは</dt>
    <dd>あんこの入っていない餅の和菓子。寿甘とも書く。</dd>
</dl>

表示例

和菓子のススメ

和菓子を例に、リスト表現の使い方を紹介します。

所長の好きな和菓子一覧

  • 最中(もなか)
  • 羊羹(ようかん)
  • 素甘(すあま)

人気の和菓子ランキング

  1. 最中(もなか)
  2. 素甘(すあま)
  3. 羊羹(ようかん)

和菓子の用語解説

最中(もなか)とは
皮であんこを包んだ和菓子です。
羊羹(ようかん)とは
あんこを寒天で固めた和菓子です。
素甘(すあま)とは
あんこの入っていない餅の和菓子です。寿甘とも書きます。