HTML でネストされたリストを作成する

HTML でネストされたリストを作成するための適切な方法を紹介します。

HTML でネストされたリストを作成する

ol タグを使用して順序付きリストを作成し、ul タグを使用して順序なしリストを作成できます。これらのタグ内で、li タグを使用してアイテムのリストを作成します。

別のアイテムリスト内にアイテムリストを作成しなければならない場合があります。このようなリスト構造はネストされたリストと呼ばれ、この記事では、ネストされたリストを作成する適切な方法について説明します。

順不同リストの構成は次のとおりです。

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

アイテム 1 の下にいくつかのリストアイテムを追加する必要があるとしましょう。このようなシナリオでは、特定の li タグ内で ul タグを使用する必要があります。次に、li タグを使用して、ul タグ内にアイテムのリストを書き込むことができます。

たとえば、ul タグを作成し、ul タグ内に 3つの li タグを作成します。以下の例に示すように、li タグ内に Dogs、Cats、および Hamsters というテキストを記述します。

最初の li タグ内に、ul タグを作成します。ul タグ内に 2つの li タグを作成し、リストアイテムを Siberian Husky および German Shepherd として書き込みます。

これは、ネストされたリストを HTML で記述する正しい方法です。

サンプルコード：

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

ネストされたリストを作成するときは、li タグを閉じた後にネストされた ul タグを記述しないようにする必要があります。このような方法には、ネストされたリストは含まれません。

ネストされたリストを作成する誤った方法を以下に示します。

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

サブリストを作成する前に、Dog アイテムリストの li タグを閉じました。次に、サブリストを追加するための ul タグを作成しました。

上記の 2つの例でも結果は同じように見えますが、最初のアプローチに従う必要があります。ul タグが、それが属する li タグの子であることを確認する必要があります。

したがって、ネストされたリストを HTML で適切に記述できます。