HTML箇条書きを書く

はじめに

HTMLで箇条書きをしたいのですが、どうすればいいですか。
HTMLで箇条書きをするためには、ol,ul,liなどのタグを使います。
3つもあるんですね。どういった違いがあるんですか?
そうですね。このol,ul,liを説明をサンプルを使いながら行っていきましょうか。

箇条書きをする

箇条書きをするには、ol,ul,liタグを使用します。基本的に [ ol , li ] , [ ul , li ]の2つの組み合わせを使うことが多いです。[ ol , li ]を使う際には、箇条書きとして書く要素に順序がある場合に使用します。一方 [ ul , li ]を使う際には、箇条書きとして書く要素に順序がない場合に使用します。

サンプルコード

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>箇条書きを書く</title>
 </head>
 <body>
   <p>順序のある箇条書き</p>
   <ol>
     <li>リストA</li>
     <li>リストB</li>
     <li>リストC</li>
   </ol>
   <p>順序のない箇条書き</p>
   <ul>
     <li>リストA</li>
     <li>リストB</li>
     <li>リストC</li>
   </ul>
 </body>
</html>

サンプルコード動作例

順序のある箇条書き

  1. リストA
  2. リストB
  3. リストC

順序のない箇条書き

  • リストA
  • リストB
  • リストC

上記のようにolで囲むのかulで囲むのかで使用用途が変わってきます。

関連記事

  1. リンクの貼り方

  2. HTMLでAタグに電話番号を設定しよう

  3. HTMLで見出しをつける

  4. HTMLでラジオボタン を作ってみよう

  5. htmlで番号付きのリストを作ろう

  6. ラジオボタン の文字を押したら選択できるようにしよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930