リスト(list)のulやolについて気を付けなければならないこと

リスト(list)のulやolについての疑問

1.ulやolにpタグは入れてよいか？

• どこにでも入れていいわけではない。
• <li>タグの中に追加する！

<ul>や<ol>の中に<p>を追加する場合は、以下のように記述する

○
<ul>
  <li></li>
  <li><p></p></li>
</ul>

○
<ul>
  <li></li>
  <li></li>
</ul>
<p></p>

×
<ul>
  <li></li>
  <p></p>
</ul>

×
<ul>
  <p></p>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

※<ul>の直下には、<p>タグを追加してはいけない。

　直下に入れられるのは、<li>だけ　
　下記のように追加する。

○
<ul>
  <li>
    <p></p>
  </li>
  <li>
    <br>
  </li>
</ul>

2.リストの入れ子のルール

子リストは、親の<li>の中に記載する

<ul>
  <li>親リストA
    <ul>
      <li>親リストAの子1</li>
      <li>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </li>
    </ul>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

3.他に子リストに追加できるもの
〔ul、ol、dl、div、h1～h6、p、span、img、strong〕

子リストにolを追加

<ul>
  <li>親リストA
    <ol>
      <li>親リストAの子1</li>
      <li>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </li>
    </ol>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

子リストにdlを追加

<ul>
  <li>親リストA
    <dl>
      <dt>親リストAの子1</dt>
      <dd>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </dd>
    </dl>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

その他に子リストに追加できるタグ

<ul>
  <li>親リストA
    <div>子リストにdivを追加</div>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <p>子リストにpを追加</p>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <span>子リストにspanを追加</span>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <img src="" alt="子リストにimgを追加">
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <strong>子リストにstrongを追加</strong>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <p>子リストにpを追加</p>
  </li>
  <li>親リストB</li>
</ul>

4.ulに直接文字を入力してもよいのか？

• ulには、直接文字を入れてはいけない。
• ulタグはlist要素のみしか入れられない。
• 文字を入力したい場合は、<li></li>の中であれば、入力できる。
• ul直下には、直接文字を入力してはならない。

×
<ul>
  テキストテキスト
  <li></li>
  <li></li>
</ul>

○
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

5.liの上にリストの見出しを入れたい場合等、どうするのか。

下記の２つのどちらか使用しています。

1. ulタグの上に、<h×>や<p>タグで見出しを付ける。
2. リストを入れ子にして、親リストに見出しを入れる。

5-1.ulタグの上に、<h×>や<p>タグで見出しを付ける場合

<h×>見出し</h×>
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

<p>見出し</p>
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

5-2.リストを入れ子にして、親リストに見出しを入れる場合

<ul>
  <li>親リストに見出し
    <ul>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
</ul>

リストの子リストに追加できるもの、リストの入れ子のルールについて参考にしたWebサイト

参考にしたWebサイト1

<li>タグ(リスト)を入れ子にして階層化させることについて詳しく書かれている。
親と子で色分けされており、解りやすい、美しい、図付きで解説されている参考サイト！
liの入れ子にできるタグ・入れ子のコードサンプルあり♪

www.dolceproof.jp

参考にしたWebサイト2

入れ子のルールを理解するために必要なインライン要素とブロック要素について、解りやすく説明されている参考になるWebサイト！
※HTML5でマークアップルールの変更は、下記のサイトでは割愛されています。

bellsmarket.hatenablog.com

参考にしたWebサイト3

「犯してはいけないHTMLタグの過ち10個」というタイトル。犯してはいけないHTMLタグの過ちを自分がやってしまっていないか、すぐにチェックしたくなるWebサイト

weboook.blog22.fc2.com