ul ol dlタグの使い方|ブログ記事の箇条書きはリストタグで

  • 0
  • 1
  • 0
  • 29


ブログ記事を書く時に箇条書きをすることがよくあります。要点をまとめてある箇条書きは見る人にとって理解しやすいですよね。

箇条書きをするときには、ul、ol、dlといったリストを表すhtmlタグを使った方が良いです。ということで、今回はリストタグの使い方を説明していきます。




リストを正しく記述することの意味


<例.1>
・ひとつめ
・ふたつめ
・みっつめ

<例.2>
  • ひとつめ
  • ふたつめ
  • みっつめ

上の2つの箇条書きは似たような感じに見えますが、<例.1>は「・」が書いてあるだけで、<例.2>はちゃんとリスト形式のhtmlタグを使用して記述しています。



<例.1>
・ひとつめ
・ふたつめ
・みっつめ

<例.2>
<ul>
<li>ひとつめ</li>
<li>ふたつめ</li>
<li>みっつめ</li>
</ul>

このように書いています。


私も面倒なときは<例.1>の方法で書いてしまうことがあるのですが、見た目には良くても、クローラーに対してはアピールが失敗していると言えます。

クローラーに「ん。単語の羅列じゃん。スパムかな?」と判断されるかもしれないということですね。(まあ、少し単語の羅列がある程度ではスパム判定にはなりませんけど)

要するに、リストを正しく記述しているかどうかということは、単語の羅列として受け取られるか、きちんとリストを提示していると認識されるか、クローラーに対しての主張に違いを生むわけです。




ulとol、それとliの使い方

ulは番号無しのリスト、olは番号付きのリストを表すタグになります。

liは「list item(リストアイテム)」の略で、ulやolの中に入れる物を示します。リストのliなので、覚えやすいのではないでしょうか。

<番号無しのリスト>

<ul>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ul>



  • りんご
  • バナナ
  • いちご



<番号付きのリスト>

<ol>
<li>水をやる</li>
<li>芽が出る</li>
<li>花が咲く</li>
</ol>



  1. 水をやる
  2. 芽が出る
  3. 花が咲く

このように違いがあります。シーンに合わせて使い分けましょう。




定義型リスト dlの使い方

dlは、ulやolとちょっと違っていて、箇条書きの内容に対して説明文を付けることができるリストです。イメージとしては、辞書に近い感じですね。

dlは中身がliではなく、dtとddになります。dtは辞書で言うと単語にあたり、ddがその説明文や定義文になります。

<dl>
 <dt>日の出</dt>
  <dd>太陽が地平線から出てくること</dd>
  <dd>元旦は特に注目される</dd>
 <dt>日の入り</dt>
  <dd>太陽が地平線に沈むこと</dd>
 <dt>初日の出</dt>
 <dt>日増し</dt>
</dl>

日の出
太陽が地平線から出てくること
元旦は特に注目される
日の入り
太陽が地平線に沈むこと
初日の出
日増し

中身のタグとして使うdtとddは必ずしもセットで使う必要はなくて、dtのみの使用でもOKです。また、dtの後のddが連続することも問題ありません。

まあ、そもそもdlタグはあまり使われてない感じがします。賢威でもデフォルトではたいしたデザインが設定されてません。人気が無いタグと言えます(笑)



※追記

賢威6.1ではdl要素に対して、あらかじめ2つのCSSがclass指定で用意されています。
dl-style01とdl-style02です。

<dl class="dl-style01">
<dt>犬</dt>
<dd>吠える</dd>
<dt>猫</dt>
<dd>舐める</dd>
</dl>
↓<表示結果>
吠える
舐める

<dl class="dl-style02">
<dt>うさぎ</dt>
<dd>最初は早いけれど、途中で居眠りしてしまう。</dd>
<dt>亀</dt>
<dd>最初は遅いけれど、少しずつ確かに進んでいく。</dd>
</dl>

↓<表示結果>
うさぎ
最初は早いけれど、途中で居眠りしてしまう。
最初は遅いけれど、少しずつ確かに進んでいく。




番外編 入れ子も出来る

ulとolとdl(dd内のみ)は、「入れ子」を作ることができます。「入れ子」というのは、リスト項目の中に、さらにリストタグを入れる、ということです。

<ul>
 <li>好きな食べ物ベスト3
  <ol>
    <li>焼き肉</li>
    <li>カレー</li>
    <li>ラーメン</li>
  </ol> 
 </li>
 <li>嫌いな食べ物ワースト3
  <ol>
    <li>ピーマン</li>
    <li>人参</li>
    <li>ナス</li>
  </ol> 
 </li>
</ul> 



  • 好きな食べ物ベスト3
    1. 焼き肉
    2. カレー
    3. ラーメン
  • 嫌いな食べ物ワースト3
    1. ピーマン
    2. 人参
    3. ナス

こんな感じです。

ulとolとdlは互いに入れ替えても良いですし、同じものでも大丈夫です。ただし、必ずliやddなど、中身を入れるタグの中に入れ子を作る必要があります。

あまり複雑に作ると混乱するので気をつけて下さい。タグはきちんと終了しなければなりません。せっかくクローラーにアピールしようとしてタグを使ったのに、間違えてしまったら悲しいです。

「入れ子」も普通にブログ記事を書くときにはあんまり使い方が思い浮かばないかもしれませんね。




リストタグについてのまとめ

現在では一つの記事が多数のブラウザで読まれることが頻繁にあります。PCとタブレットで表示した時にデザインが違うことはよくあることです。

そういうときにも、きちんとしたhtml構文で記述してあると、そのテンプレートのデザインを使用することができます。もちろんテンプレートを変更した時も同じことが言えます。

また、前述のようにhtml構文を正しく書くと、クローラーにも主張できます。

「そこにある単語がある程度主張したい言葉で、意図してリスト形式で書かれている」とクローラーに伝わるのですから、正しく書いておけば検索結果の順位とかでいいことがいっぱいある(かもしれない)ということです。

箇条書する時はぜひこれらのリストタグを利用して、SEO対策をしていきましょう。




他にも、正しい内部リンクの貼り方をすることでSEO対策ができます。
正しい内部リンクの張り方でサイト構造を最適化!



  • 0
  • 1
  • 0
  • 29




コメントを残す

コメントは承認制です。日本語が含まれない投稿は無視されます。(スパム対策)

サブコンテンツ

このページの先頭へ