Principais Pontos
- As listas em HTML são ferramentas cruciais para organizar informações em páginas web, com três formatos principais: ordenadas, não ordenadas e de descrição.
- Listas ordenadas empregam números ou outros símbolos para sequenciar itens, permitindo personalização com o atributo ‘type’, além de ajustar a ordem e ponto de partida com ‘start’ e ‘reversed’.
- Listas não ordenadas reúnem itens relacionados sem necessidade de sequência, oferecendo flexibilidade na aparência dos marcadores via CSS.
Listas HTML são elementos estruturais fundamentais na apresentação de dados relacionados em páginas web. Seja para criar menus de navegação, catalogar produtos ou apresentar informações complexas de forma clara, o uso de listas é indispensável.
Existem três tipos básicos de listas HTML, cada um com sua função específica no desenvolvimento web.
1. Listas Ordenadas
Listas ordenadas em HTML permitem agrupar itens com uma ordem específica. Utilize a tag <ol>
para iniciar uma lista ordenada, que conterá as tags <li>
para cada item individual.
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
Este código resulta na seguinte apresentação:
O padrão de ordenação é numérico, mas é possível alterá-lo com o atributo ‘type’, que permite usar letras (maiúsculas ou minúsculas), números ou algarismos romanos (maiúsculos ou minúsculos).
<ol type="a"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
Ao adicionar o atributo ‘type’, a lista será apresentada da seguinte forma:
Além do ‘type’, os atributos ‘start’ e ‘reversed’ também podem ser usados com a tag <ol>
.
O atributo ‘start’ possibilita iniciar a numeração a partir de qualquer valor inteiro. Por exemplo, start="3"
fará a lista começar do número três, ou da letra ‘c’ se type="a"
, ou ‘III’ se type="I"
.
<ol type="I" start="3"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
O código acima gera a seguinte visualização:
O atributo ‘reversed’ inverte a ordem da lista, com valor padrão ‘false’.
<ol reversed="true"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol>
Este código apresenta a lista na ordem inversa:
2. Listas Não Ordenadas
Listas não ordenadas são usadas para agrupar itens sem uma ordem específica. Elas são marcadas com um marcador padrão, geralmente um disco.
Para criar uma lista não ordenada, use a tag <ul>
como elemento pai e a tag <li>
para cada item:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
Este código gera a seguinte visualização:
O estilo padrão para listas não ordenadas é um disco. O atributo ‘type’ para definir o estilo do marcador foi descontinuado, sendo substituído pela propriedade CSS ‘list-style-type’.
<style> ul { list-style-type: square; } </style>
O código acima altera os marcadores para quadrados, como mostrado abaixo:
A propriedade CSS ‘list-style-type’ permite usar diversos estilos de marcadores, incluindo círculos, imagens, ícones ou símbolos personalizados. Com CSS, listas não ordenadas também podem ser usadas para criar barras de navegação.
Listas Aninhadas
Listas aninhadas são listas dentro de outras listas, usadas para representar hierarquias complexas. Elas podem combinar listas ordenadas e não ordenadas.
<h3>Instruções para Massa com Frango</h3> <ol> <li>Ferva a massa.</li> <li> Tempere o peito de frango. <ul> <li>sal e pimenta</li> <li>páprica</li> <li>alho em pó</li> <li>tempero italiano</li> </ul> </li> <li>Aqueça azeite em uma panela em fogo médio-alto.</li> <li>Adicione o peito de frango e cozinhe por 5 minutos.</li> <li>Adicione creme de leite e queijo parmesão à panela vazia.</li> <li>Adicione a massa e o frango em fatias ao molho.</li> </ol>
Este código gera a seguinte visualização:
3. Listas de Descrição
Listas de descrição permitem criar listas de termos com suas descrições. A tag <dl>
inicia a lista, usando <dt>
para o termo e <dd>
para a descrição.
<h3>Laptops Populares</h3> <dl> <dt>MacBook Pro</dt> <dd> Oferece até 22 horas de bateria, câmera avançada e teclado mágico com Touch ID. </dd> <dt>MSI GS76 Stealth</dt> <dd> Um poderoso laptop para jogos com gráficos avançados e teclas personalizadas. </dd> </dl>
O código acima gera a seguinte apresentação:
Organize seu Conteúdo com a Lista HTML Correta
A escolha da lista HTML correta deve ser guiada pelo conteúdo que se pretende apresentar. Se você precisa apresentar uma sequência de passos, como um preparo de refeição, a lista ordenada é ideal.
Se o objetivo é agrupar informações relacionadas sem necessidade de sequência (como itens de uma lista de verificação), uma lista não ordenada é mais adequada. Listas de descrição são ótimas para glossários ou FAQs.