【簡潔】リストのタグについて~<ul> <ol> <li> <dl> <dt> <dd>~

リストのタグの種類

この記事はHTMLの基礎文法について学習できます。今回取り扱うタグは
1.<ul>
2.<ol>
3.<li>
4.<dl>
5.<dt>
6.<dd>
の6つです。

それでは見ていきましょう。

---

タグの解説

この記事では５つのタグをまとめて解説していこうと思います。

index.html

<ul>
  <li>ポケモン</li>
  <li>デジモン</li>
  <li>ホリエモン</li>
</ul>

<ol>
  <li>ポケモン</li>
  <li>デジモン</li>
  <li>ホリエモン</li>
</ol>

<dl>
  <dt>ポケモン</dt>
  <dd>ピカチュウが有名</dd>
  <dt>デジモン</dt>
  <dd>Butterflyが有名</dd>
  <dt>ホリエモン</dt>
  <dd>ロケットの人</dd>
</dl>

上記のようにコードを書くとブラウザでは下記のように表示されます。

ブラウザ表示はここをクリック

• ポケモン
• デジモン
• ホリエモン

1. ポケモン
2. デジモン
3. ホリエモン

ポケモン

ピカチュウが有名

デジモン

Butterflyが有名

ホリエモン

ロケットの人

1.<ul>は箇条書きのリストを表示させる時に使います。

2.<ol>は順序月のリストを表示させる時に使います。

3.<li>にはリストの項目を囲ってあげます。<ul>と<ol>の中で使います。

4.<dl>説明リストを表示させる時に使います。

5.<dt>は<dl>の中で使い、項目を囲ってあげます。

6.<dd>は<dt>で囲った項目の説明を書くタグです。インデント下げされて表示されます。

覚え方

・<ul>と<ol>と<dl>を混同してしまいそうな時

<ul>は unordered list の略です。項目が順序付いてないリストなので un が何もつかないと言う意味で想像できると思います。

<ol>は ordered list の略です。なんとなく順序付いてるリストなので orderの o かなと想像できると思います。

<dl>は description list の略です。聴き慣れない英単語なので覚えにくいですが、<ul>と<ol>をしっかり覚えていれば大丈夫です。あまり聴き慣れないので逆に覚えてしまうかもしれません。

・<dl>と<dt>と<dd>を混同してしまいそうな時

<dl>は description list の略です。リストなので d に続くのが l ということが想像できますね。

<dt>は description term の略です。 termはあまり馴染みがないですが項目を囲むのは童貞=dt と覚えておけばバッチリです。

<dd>は description definition の略です。こちらも馴染みがない英単語ですが、項目の説明は、誰でも大好き=dd で覚えればバッチリです。なんだかオタク用語が出てきてしまいましたが。
<dt>とセットで覚えるといい感じです。

この記事を読んでいただきありがとうございました。