※超初心者向けの内容です。
##なぜli要素にはul要素が必要なのか
###結論から言うと、必要です。HTMLでリストを作成した際に、そのレイアウトを変更する為です。
私がHTMLの学習を始めて間もない頃の話です。
『リスト表示をするためには、ul要素とli要素を用います。』とだけ教えられました。
さらにそれぞれの説明として、以下の通りでした。
ul要素・・・順序のないリストを示すブロックレベル要素です。li要素と組み合わせて使用します。
li要素・・・リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。
リストはul要素とli要素を組み合わせて使う
<ul class="lists">
<li class="list">いちご</li>
<li class="list">みかん</li>
<li class="list">りんご</li>
</ul>
私は、この説明では、日本語としては言葉はわかるけど、頭の中に内容が入ってきませんでした。
好奇心旺盛で、思いついたことはすぐに実行してしまう方ならわかるかもしれませんが
実は単にナカグロのリスト作成をするだけならば、
ul要素を書かなくても以下のように実装されるのです。
- いちご
- みかん
- りんご
（厳密には、多少見え方が異なります。）
よって、ul要素を記述することに合理性必要性を感じませんでした。
「単に“こういうものだから”っていう理由で、よくみんな勉強できるよな」
と、本気で思っていました。
##リスト作成には、ul要素, li要素, そして ”ol要素”
HTMLでリストを作成するときは、ul要素、ol要素、li要素を使います。
（ol要素が無い時点で、説明不足だと個人的には思います）
- ul要素
- ulは「Unordered List」の略です。「順序のないリスト」を意味して、ナカグロのリストを作成します。Disc型と呼ばれます。
- ol要素
- olは「Ordered List」の略です。「順序のあるリスト」を意味して、数字のリストを作成します。Decimal型と呼ばれます。
- li要素
- liは「List Item」の略です。「リストの項目」を意味して、ulタグまたはolタグを親要素として、それらで挟むことによって、項目を箇条書きできます。
<ul class="lists">
<li class="list">いちご</li>
<li class="list">みかん</li>
<li class="list">りんご</li>
</ul>
次のようになります。
- いちご
- みかん
- りんご
<ol class="lists">
<li class="list">いちご</li>
<li class="list">みかん</li>
<li class="list">りんご</li>
</ol>
次のようになります。
- いちご
- みかん
- りんご
##まとめ
HTMLでリストを作成する際に、そのレイアウトを変更する為、ul要素は必要です。
HTMLでリストを作成するには、ul要素、ol要素、li要素を使います。
ul要素・・・li要素の親要素となり、ナカグロのリスト（Disc型）を作成します。
ol要素・・・li要素の親要素となり、数字のリスト（Decimal型）を作成します。
li要素・・・ul要素、ol要素の子要素となり、項目を箇条書きできます。