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. videoタグを使って動画を埋め込んでみよう

  3. cssを読み込む

  4. htmlの文字化け

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

  6. メモ帳で書けるhtml

2024年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  
Translate »