この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
リストタグとは
リストタグとは「箇条書き」を表示するためのHTMLタグです。
バラバラの項目だったものを箇条書きに整理して、まとまった一つのリストであると表現できます。
リストタグの必要性
リストタグにおいて重要なのは、正しい文書構造を作り検索エンジンに認識させやすくなる点です。
コンテンツの作成者が箇条書きにする項目は、伝えたい内容の要点、要約であり強調したい部分かと思います。ユーザーにとっては、文章の見た目が箇条書きになっていればどのようなタグで記述しても同じです。しかし検索エンジンは内容をHTML通りに読みますので、作成者の意図をHTMLで記述する必要があります。そこでリストタグで記述して、検索エンジンに箇条書きであるとことを認識させます。
リストタグは2種類存在する
リストタグは、「ol」と「ul」の2種類あり、それぞれの意味が異なります。正しい使い方は以下のとおりです。
並び順に意味があるリストにはolタグを使う
olタグは「ordered list」の略で、項目の順番に意味があるリストを作成できます。手順を示すときなど順番が大切になる文章に最適です。
例えば以下のように使います。
【ネットショッピングの商品購入手順】
- 商品をカートに入れる
- お客様情報を入力する
- 送付先情報を入力する
- お支払い方法を入力する
- 入力内容を確認する
- 購入完了
順番が関係しないリストにはulタグを使う
一方、ulタグは「unordered list」の略で、並び順に意味なく、単純な箇条書きリストを作成する際に使用します。品物の紹介など、順番にこだわりがない並列関係の項目の箇条書きに向いています。
例えば以下のように使います。
【海外旅行の持ち物リスト】
- パスポート
- ビザ（VISA、査証）
- 航空券
- 通貨
- クレジットカード
- 海外旅行保険保険証
- 服・カバン
- 日用品
Webサイトのグローバルメニューにはliタグを使うのが正しいです。グローバルメニューはリンクのリストであるという考え方であるためです。
リストタグの書き方
それでは実際にHTML上でどのように記述するのかリストタグの使い方を説明します。
olタグの使い方
順番に意味がある箇条書きリストを作成するolタグの使い方は、以下の通りです。
【HTMLでの記述例】
<ol>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ol>
【ブラウザ上での表示例】
- リストアイテム1
- リストアイテム2
- リストアイテム3
リストにしたい文章全体をolタグで囲い、さらにそれぞれの項目をliタグで囲います。
olタグは基本的に、要素内に数字を記述しなくても自動的に番号付きのリストが作成されます。
ulタグの使い方
並び順に意味がない順不同リストを作成するulタグの使い方は、以下のとおりです。
【HTMLでの記述例】
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
【ブラウザ上での表示例】
- リストアイテム1
- リストアイテム2
- リストアイテム3
リストにしたい文章全体をulタグで囲い、さらにそれぞれの項目をliタグで囲います。ulタグは基本的に、自動で要素の直前に（●）等の印が付きます。
リストタグは入れ子構造にできる
HTMLではpタグでhタグを入れ子に出来ないなどのルールがありますが、リストタグは入れ子構造にすることができます。入れ子とは本来、「似たような形状で大きさが異なる入れ物を、順番に繰り返し中に入れること」で、入れ子人形やマトリョーシカのようなものを指します。HTMLにおける入れ子構造とは、タグの中にタグが入っている状態です。リストタグでは「<li></li>」の中にさらにulやolを入れることができます。
具体的には、
【HTMLでの記述例】
<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<ul>
<li>リストアイテム3-1</li>
<li>リストアイテム3-2</li>
<li>リストアイテム3-3</li>
</ul>
</li>
</ul>
【ブラウザ上での表示例】
- リストアイテム1
- リストアイテム2
- リストアイテム3
- リストアイテム3-1
- リストアイテム3-2
- リストアイテム3-3
必ずliタグの中にul olタグを設置してください。ul olタグの直後にul olタグを入れることは出来ません。
まとめ
リストタグを使用すれば、ユーザーにも検索エンジンにも読みやすいコンテンツを作成することができます。
リストタグを使わなくても、箇条書き項目にドットや数字を書き足せば見た目は同じになりますが、HTML構造的にはまとまりが無く、検索エンジンに優しい文章とはいえません。リストタグを活用して、ユーザービリティとクローラビリティを同時に高めてはいかがでしょうか。
