基本的なHTMLタグ~その5 リスト(ul-li、ol-li、dl-dt-dd)

リストはホームページをキレイに見せるためにも役立つし、訪問者にもわかりやすいサイトだと認識させることができるHTMLタグです。一般的にリストタグを使用するとSEO効果も高いといわれていますので、できるだけ使うようにするといいと思います。

目次

マークつきのリストを作る(<ul>~</ul> <li>~</li>)

リストの基本形です。

マークつきのリストを作りたい場合はこちらのタグを使用します。

<ul>タグで全体を囲い、項目ごとに<li>タグを使用します。

リストはWeb上キレイに表示されますので、積極的に使っていくことをオススメします。

※例(イメージです)

<ul>

<li>リスト1</li>

<li>リスト2</li>

<li>リスト3</li>

<li>リスト4</li>

<li>リスト5</li>

</ul>

↓↓↓

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

番号つきのリストを作る(<ol>~</ol> <li>~</li>)

番号つきのリストを作るときに使用します。

こちらは<ol>タグで全体を囲い、項目ごとに<li>タグを使用します。

※例(イメージです)

<ol>

<li>リスト1</li>

<li>リスト2</li>

<li>リスト3</li>

<li>リスト4</li>

<li>リスト5</li>

</ol>

↓↓↓

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5

用語と説明のリストを作る(<dl>~</dl> <dt>~</dt> <dd>~</dd>)

用語と説明をリスト化するときに使用します。

使い方は全体を<dl>タグで囲い、用語を<dt>、説明を<dd>という形で使用します。

こちらのタグを使うとHTMLがとってもスッキリしますので、検索エンジンにも優しいサイトになります!

また、用語<dt>と説明<dd>は必ずしも1対1になる必要はなく、例えば用語<dt>1つに対して、説明<dd>が6つで構成されていても構いません。

※例(イメージです)

<dl>

<dt>MENU</dt>

<dd>TOP</dd>

<dd>htmlとは</dd>

<dd>CSSとは</dd>

<dd>テンプレート</dd>

<dd>練習問題</dd>

<dd>Q&A</dd>

<dd>お問い合わせ</dd>

</dl>

↓↓↓

MENU

TOP

htmlとは

CSSとは

テンプレート

練習問題

Q&A

お問い合わせ

よかったらシェアしてね!
目次