Crie listas aninhadas em HTML

Apresentaremos métodos adequados para criar listas aninhadas em HTML.

Criação de listas aninhadas em HTML

Podemos criar uma lista ordenada com a tag ol e uma lista não ordenada com a tag ul. Dentro dessas tags, usamos a tag li para criar a lista de itens.

Haverá casos em que teremos que fazer uma lista de itens dentro de outra lista de itens. Essa estrutura de lista é chamada de lista aninhada e, neste artigo, exploraremos a maneira adequada de escrever uma lista aninhada.

A estrutura da lista não ordenada é a seguinte.

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

Vamos supor que tenhamos que adicionar alguns itens de lista sob o Item 1. Nesse cenário, devemos usar a tag ul dentro da tag li particular. Então, podemos escrever a lista de itens dentro da tag ul usando as tags li.

Por exemplo, crie uma tag ul e crie três tags li dentro da tag ul. Escreva os textos Dogs, Cats e Hamsters dentro das etiquetas li como mostrado abaixo no exemplo.

Dentro da primeira tag li, crie uma tag ul. Crie duas marcas li dentro das marcas ul e escreva os itens da lista como Siberian Husky e German Shepherd.

Esta é a maneira correta de escrever listas aninhadas em HTML.

Código de exemplo:

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

Ao criar uma lista aninhada, devemos evitar escrever a tag ul aninhada depois de fechar as tags li. Essa prática não envolve nenhuma lista aninhada.

A prática errada de escrever uma lista aninhada é mostrada abaixo.

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

Fechamos a tag li da lista de itens Dog antes de escrever as sublistas. Então, criamos uma tag ul para adicionar as sublistas.

Embora o resultado pareça o mesmo nos dois exemplos acima, devemos seguir a primeira abordagem. Devemos garantir que a tag ul seja filha da tag li à qual pertence.

Assim, podemos escrever listas aninhadas corretamente em HTML.