【HTML】リストタグとは？特徴と正しい使い方を3分で解説！

記事を読みやすくするために、文章の装飾を工夫していますか。記事を多くの人に読んでもらうためには、少しでも読みやすい文章に装飾することが大切です。

今回は、文章を読みやすくする”箇条書き”を作成するために使用するリストタグの特徴と正しい使い方について徹底的に解説します。この記事は3分で読み終わるので、この機会に必ずマスターしてくださいね。

リストタグとは

リストタグとは、文章を読みやすくするために”箇条書き”を作るHTMLのタグのことです。文字の集まりだったものが、1個のまとまりをもったリストであることを表現することができます。記事を作成するうえでは必須のタグとなり、リストタグを使って箇条書きを正しく記述することができれば、ユーザーとって読みやすくGoogleからも評価される記事が完成します。

リストタグは2種類存在する

リストタグは大きく分けて2種類存在し、それぞれ特徴や目的が違うのでまずはここでしっかりと覚えてください。

順番が関係するリスト（olタグ）

数字で番号が割り振られるリストを作成することができます。例えば、料理の手順や家具の組み立て方法など、順番が大切になる文章に使用します。

例を出すとこんな感じです。

ちなみに、”ol”は「ordered list」の略です。詳しい記述方法は下のセクションで説明しますね。

順番が関係しないリスト（ulタグ）

番号の割り振りはなく、単純に羅列したリストを作成することができます。例えば、商品のラインナップなど、順番にこだわりがない場合に使用します。

例を出すとこんな感じです。

ちなみに、”ul”は「unordered list」の略です。詳しい記述方法は次のセクションで説明します。

リストタグの正しい使い方

ここまで、リストタグの特徴と2種類の違いについて理解できたかと思います。ここからは実際にHTML上でどのように記述するのか、正しい使い方をご紹介していきます。

olタグの使い方

番号を割り振るリストを作成するolタグは、下記のように記述します。

olタグを使うことによって、数字を記述しなくても自動で番号付きのリストが完成します。また、加えたい要素をliタグで囲むことによって、項目の数を自分で調節できます。

ulタグの使い方

順番が関係しないリストを作成するulタグは、下記のように記述します。

ulタグを使うことによって、要素の直前に自動的に黒丸（●）を付けてくれます。リストにしたい文章全体をulタグで囲み、必要な要素をliタグで追加していきます。

以上で、リストタグの基本的な使い方は網羅できましたね。

リストタグの応用を紹介

ここからは、リストタグ応用してデザインを変更する方法を紹介します。あなたのイメージに合うリストタグを見つけてくださいね。

olタグの応用

番号付きリストの番号にアレンジを加える方法をいくつか紹介します。liタグにタイプを指定することで、変更できます。

ローマ字（大文字）：type=”A”

liタグのタイプに”A”を指定することで、大文字のアルファベット付きのリストが完成します。

リストタグをtype=”a”にすると、小文字のアルファベット付きリストが完成しますので一緒に覚えておきましょう。

ローマ数字：type=”I”

liタグのタイプに”I”を指定することで、ローマ数字付きのリストが完成します。

ulタグの応用

黒丸（●）付きリストにアレンジを加える方法をいくつか紹介します。liタグにタイプを指定することで、変更できます。

白丸：type=”circle”

liタグのタイプに”circle”を指定することで、白丸（○）付きリストが完成します。

四角：type=”sqare”

liタグのタイプに”sqare”を指定することで、四角（■）付きリストが完成します。

まとめ

リストタグを活用することで、ユーザーにとって読みやすくGoogleからも適切な評価をうける記事を作成することができます。

よくリストタグを使用せず、見た目に違いがないという理由で数字や黒丸を直接入力して箇条書きしている記事を見かけますが、、Googleのクローラーからすると文章にまとまりがなく、単語が乱雑しているようにとらえられてしまいます。箇条書きをする際は必ずリストタグを使い、サイトのユーザビリティをあげましょう！