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. htmlの文字化け

  2. HTMLで見出しをつける

  3. ちょっと複雑なテーブルをHTMLで作ろう

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

  5. cssを読み込む

  6. メモ帳で書けるhtml

2021年1月
 123
45678910
11121314151617
18192021222324
25262728293031