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

[公開日] 2014/4/9　[更新日] 2014/5/12　[SEO]

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

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

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

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




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


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

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

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

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

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

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


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

定義型リスト dlの使い方

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

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


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

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

※追記

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

番外編　入れ子も出来る

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


こんな感じです。

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

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

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

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

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

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

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

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

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




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