Verschachtelte Listen in HTML erstellen

Wir werden geeignete Methoden zum Erstellen verschachtelter Listen in HTML vorstellen.

Verschachtelte Listen in HTML erstellen

Wir können eine geordnete Liste mit dem Tag ol und eine ungeordnete Liste mit dem Tag ul erstellen. Innerhalb dieser Tags verwenden wir das Tag li, um die Liste der Elemente zu erstellen.

Es wird Fälle geben, in denen wir eine Liste von Elementen in einer anderen Liste von Elementen erstellen müssen. Eine solche Listenstruktur wird als verschachtelte Liste bezeichnet. In diesem Artikel werden wir untersuchen, wie eine verschachtelte Liste richtig geschrieben wird.

Die Struktur der ungeordneten Liste ist wie folgt.

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

Nehmen wir an, wir müssen unter Item 1 einige Listeneinträge hinzufügen. In einem solchen Szenario sollten wir das ul-Tag innerhalb des jeweiligen li-Tags verwenden. Dann können wir die Liste der Elemente in das ul-Tag schreiben, indem wir die li-Tags verwenden.

Erstellen Sie beispielsweise ein ul-Tag und erstellen Sie drei li-Tags innerhalb des ul-Tags. Schreiben Sie die Texte Dogs, Cats und Hamster in die li-Tags wie unten im Beispiel gezeigt.

Erstellen Sie innerhalb des ersten li-Tags ein ul-Tag. Erstellen Sie zwei li-Tags innerhalb der ul-Tags und schreiben Sie die Listenelemente als Siberian Husky und German Shepherd.

Dies ist die richtige Methode, um verschachtelte Listen in HTML zu schreiben.

Beispielcode:

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

Beim Erstellen einer verschachtelten Liste sollten wir vermeiden, das verschachtelte ul-Tag nach dem Schließen der li-Tags zu schreiben. Eine solche Praxis beinhaltet keine verschachtelten Listen.

Die falsche Vorgehensweise beim Schreiben einer verschachtelten Liste wird unten gezeigt.

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

Wir haben das Tag li der Artikelliste Dog geschlossen, bevor wir die Unterlisten geschrieben haben. Dann haben wir ein ul-Tag erstellt, um die Unterlisten hinzuzufügen.

Obwohl das Ergebnis in den beiden obigen Beispielen gleich aussieht, sollten wir dem ersten Ansatz folgen. Wir sollten sicherstellen, dass das Tag ul das Kind des Tags li ist, zu dem es gehört.

Somit können wir verschachtelte Listen in HTML richtig schreiben.