【簡潔】リストのタグについて~~

リストのタグの種類

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

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

タグの解説

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

<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.<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>とセットで覚えるといい感じです。

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