HTMLの書き方講座②

みなさんこんにちは さくちゃん です。

前回はタグを使って「見出し」「本文」を書いていきました。
今回はリストタグについて色々見ていきましょう。

<li>タグ（リストタグ）

箇条書きや番号を付けたい場合には、「リストタグ」を使っていきます。
リストタグは、

<li>ここにテキストを入力</li>

のように書いてきます。

<li>タグは、<li>タグだけで書いていくのではなく、<li>タグの親要素と一緒に書いていきます。

<ul>タグと<ol>タグ

箇条書きリスト

箇条書きリストを書きたいときは、親要素に<ul>タグを指定します。

ulは、Unordered Listの略です。

書き方は

<ul>
  <li>テキスト１</li>
  <li>テキスト２</li>
  <li>テキスト３</li>
</ul>

このように書いていきます。

実際にはこのように表示されます。

番号付きリスト書き

次に、番号付きのリストを書きたいときは、親要素に<ol>タグ指定します。

olは、Ordered  Listの略です。

書き方は

<ol>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

このように書いていきます。

実際にはこのように表示されます。

注意点

<ul>タグ、<ol>タグの中には必ず<li>タグのみを書いていきます。
例えば

<ol>
  <p>テキスト</p>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

と書いてしまうと、リストと認識してくれず、下のようになります。

なので<ul>タグ、<ol>タグの中には必ず<li>タグのみを書きましょう！

まとめ

リストとして書きたい場合は、<li>タグを使います！

<li>タグを書くときは、親要素である<ul>タグ、<ol>タグを指定してあげましょう！

<ul>タグ、<ol>タグの中には必ず<li>タグを書います。
リストとして認識されないので注意しましょう！