リストタグの使い分け方

【HTML】リストタグ3種類。ul,ol,dlタグの正しい使い分け方。

SPONSORED LINK

僕はWebの専門学校出身でして、HTMLのマークアップについては「これでもカッ!!」ってくらい厳しく指導されながら勉強してきました。

しかし、いざこうしてブログを書いてみると、リストタグを正しく使い分けている人があまりいないことに気がつきました。

多くの人が「リストだから、どれも似たようなものじゃないの?」と思いながら使ってしまっているのだと思います。

そこで今回は、ul,od,dtタグの3つのタグの正しい使い分け方を詳しく紹介していきます。

SPONSORED LINK

リストタグを使い分ける意味と効果

まず最初に、なぜリストタグを使い分けなくてはいけないのかということですが、これは簡単に説明すると、マークアップをすることによってSEOに優しく、そして読者に見やすく表示させるためです。

例えば、ここに『りんご』と『なし』と『もも』があります。どれも丸い食べ物ですが、それぞれ味も違うし食感だって違いますよね。

りんごと梨と桃のイラスト

しかし、コンピューターはこの3つを正しく認識できません。HTMLで正しくマークアップをしないと、どれも『丸いくだもの』とまでしか分からないのです。

これと同じように、サイト内に「リストで表示させたい」と思ったときであっても、それぞれ用途は異なります。その違いを明確にするために、リストタグは3種類に分けられているのです。

また正しくマークアップをすることによってSEOだけでなく、読者にとってもわかりやすく読みやすい文章になるといった効果もあるのです。

ul,ol,dlタグの正しい使い分け方

ではここからは、リストタグの3種類についてそれぞれ見ていきましょう。

<ul>タグ

<ul>タグは順番のない項目をリストにして表示したいときに使います。例えば、こんな感じです。

<ul>
<li>歯を磨く</li>
<li>朝起きる</li>
<li>夜ご飯を食べる</li>
<li>仕事をする</li>
<li>昼食を食べる</li>
<li>ベッドに横になる</li>
<li>また仕事をする</li>
</ul>

このようにマークアップすると、下のように左側に『・(てん)』がついた状態でリストとなって表示されます。

  • 歯を磨く
  • 朝起きる
  • 夜ご飯を食べる
  • 仕事をする
  • 昼食を食べる
  • ベッドに横になる
  • また仕事をする

これらすべてを横文字テキストで並べてしまうと、とてもじゃないけど読みにくいですよね。

そういった場合に<ul>タグを使いリストにして、見やすく表示させます。

<ol>タグ

<ol>タグは、順番のある項目をリストにして表示するときに使います。

では、先ほどの<ul>タグとは何が違うのか。こちらは、さっきのリストを上から順番に時系列に並び替えてマークアップしたものです。

<ol>
<li>朝起きる</li>
<li>歯を磨く</li>
<li>仕事をする</li>
<li>昼食を食べる</li>
<li>また仕事をする</li>
<li>夜ご飯を食べる</li>
<li>ベッドに横になる</li>
</ol>

<ol>タグを使うと、左側に『①・②・③』といった番号が振られるのが特徴です。下が出力したものです。

  1. 朝起きる
  2. 歯を磨く
  3. 仕事をする
  4. 昼食を食べる
  5. また仕事をする
  6. 夜ご飯を食べる
  7. ベッドに横になる

他にも順位であったり、ランキングや手順などを表すときに活用できます。

また、<ol>タグは数字がつくからという理由だけで使うのは正しくありません。あくまでも“順番のある項目”を表すために使うものです。

WordPressを使うとデフォルトで数字が表示されるので、意味を知らない方はついつい気軽に使ってしまいがちです。

<ul>タグとどっちを使うべきか、しっかり確かめながら使い分けましょう。

<dl>タグ

最後に<dl>タグの使い方ですが、こちらは関連のある項目を定義するために使います。

ちょっとわかりにくいので、実際にサンプルを見てみましょう。

<dl>
 <dt>『1日のスケジュール』</dt>
  <dd>朝起きる</dd>
  <dd>歯を磨く</dd>
  <dd>仕事をする</dd>
  <dd>昼食を食べる</dd>
  <dd>また仕事をする</dd>
  <dd>夜ご飯を食べる</dd>
  <dd>ベッドに横になる</dd>
  <dl>

<dt>タグで囲んでいるのがいわば『親要素』です。そして、それに付随する要素を<dd>タグとして囲みます。

また、よく使われるのは日程やスケジュールをマークアップするときです。

<dl>
<dt>日時</dt>
<dd>2012年10月4日 午前11時30分</dd>
<dd>【雨天時】2012年10月6日 午前11時30分</dd>
<dt>待ち合わせ場所</dt>
<dd>新宿駅の西口</dd>
<dt>持ち物</dt>
<dd>お弁当とおやつ(2000円まで!)</dd>
<dt>目的</dt>
<dd>代々木公園まで歩いてお弁当を食べにいく</dd>
<dl>

出力するとこのように表示されます。

日時
2012年10月4日 午前11時30分
【雨天時】2012年10月6日 午前11時30分
待ち合わせ場所
新宿駅の西口
持ち物
お弁当とおやつ(2000円まで!)
目的
代々木公園まで歩いてお弁当を食べにいく

<dl>タグを使うと、細かい要件を見やすくまとめることができます。

<dd>タグは<li>タグのように、いくつも重ねて表示させることができるので、リストが多くなりそうなときは<dl>タグを活用させましょう。

リストタグは正しくマークアップできなくても大丈夫??

3つのリストタグ

さて、これまで3つのリストタグの使い分け方を紹介してきましたが、厳密にいうと正しくマークアップできていなくても、リストで囲んでいれば大丈夫です。

なぜかというと、マークアップというのは人によってことなるからです。

エンジニアの人でも、ある人は「ここは<ul>タグを使うべきだ!」といい、またある人は「いや、ここは<ol>で順番をだな…」といったり、それぞれ解釈が違うことがよくあります。

ですので、リストタグには厳密なルールがあるものの、誰もが正しく使い分けられていないという現状があるのです。

もし迷ったときは、とりあえず<ul>タグでリスト状に表示させおきましょう。マークアップさえされていれば、SEOや読者にとっても分かりやすくなります。

まとめ

以上、3つのリストタグの正しい使い分け方を紹介してきました。

ただのリストでもHTMLは奥が深いです。意味を理解しながら使い分けられるようになると、HTMLと仲良く楽しく向き合えるようになりますよ。

それでは、お役に立てれば幸いです!

SPONSORED LINK

リストタグの使い分け方