3 tipos de listas HTML e como utilizá-las

Principais lições

listas ordenadas, não ordenadas e descritivas.

As listas ordenadas são um elemento comum em HTML que pode ser organizado usando valores numéricos ou não numéricos conhecidos como “tipos de listas ordenadas”. Além disso, estas listas podem ser ainda mais adaptadas com a ajuda de vários atributos, como o atributo “type”, que permite opções de formatação personalizadas, enquanto os atributos “start” e “reversed” permitem ajustes à colocação inicial do item e à direção da lista, respetivamente.

As listas não ordenadas fornecem um meio de organizar e apresentar informações de uma forma concisa, agrupando itens que estão vagamente ligados ou que não têm uma ordem de importância específica. O aspeto destas listas pode ser aperfeiçoado através da utilização de folhas de estilo em cascata (CSS) para modificar o estilo dos marcadores, o que pode incluir a alteração do seu tamanho, forma, cor e posição no item da lista. Esta funcionalidade permite aos designers e programadores adaptarem as listas não ordenadas a vários designs visuais, mantendo um formato de fácil leitura para os utilizadores.

Uma lista HTML serve como um componente estrutural fundamental para qualquer conjunto de informações correlacionadas numa página da Web. Independentemente de se estar a construir um menu de navegação, a organizar produtos em oferta especial ou a tentar apresentar dados complexos num formato mais digerível, estas listas provam ser ferramentas indispensáveis para realizar a tarefa em questão.

Existem três variedades principais de listas HTML, que se destinam a funções arquitectónicas distintas no âmbito do design e desenvolvimento da Web.

Lista ordenada

A lista ordenada HTML é um meio eficaz de organizar uma série de elementos inter-relacionados numa determinada sequência. Para construir uma lista deste tipo, é necessário utilizar o código

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Este código apresenta a seguinte vista:

É importante ter em conta que, por defeito, uma lista ordenada segue uma sequência numérica. No entanto, existe a flexibilidade de alterar esta disposição através da utilização do atributo “type”. Este atributo permite ao utilizador controlar o fator que determina a organização da listagem. Existem várias opções disponíveis para escolher o método de ordenação, incluindo caracteres alfabéticos (maiúsculos e minúsculos), valores numéricos ou mesmo números romanos em maiúsculas ou minúsculas.

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

A incorporação do atributo “type” no elemento da lista ordenada (" “) produz uma apresentação visual revista, conforme demonstrado abaixo:

“start”, que determina o número de itens a serem exibidos no início da lista; e “reversed”, que inverte a ordem da lista para que ela seja exibida a partir do último item.

O atributo start permite iniciar a organização dos elementos a partir de qualquer posição, utilizando um valor inteiro. A título de exemplo, ao incorporar start="3" no elemento , sem especificar um tipo específico , começará a organizar a lista a partir do numeral três. Caso se especifique type="a" ou type="I" , começará a ordenar a partir de ‘c’ ou ‘I’, respetivamente.

 <!-- Ordered list -->
<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 apresenta a seguinte vista:

O atributo “reversed” permite reordenar os elementos de uma lista alterando o seu valor booleano, com uma predefinição de false.

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

O código fornecido, quando executado, resulta na exibição de uma tabela no navegador web com características e conteúdo específicos, conforme descrito abaixo:html Table Title

Lista não ordenada

Uma lista não ordenada serve como um meio eficiente de organizar e apresentar vários itens que estão concetualmente ligados, mas que não necessitam de uma sequência ou classificação específica. Normalmente, os navegadores Web utilizam pontos com marcadores para indicar cada elemento de uma tal coleção.

Para criar um quadro de avisos não estruturado composto por uma série de itens, é necessário utilizar os elementos HTML (para indicar o contentor) e (para cada listagem), respetivamente.

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

Este código apresenta a seguinte vista:

A aparência convencional de uma lista não ordenada é denotada por uma forma circular conhecida como “disco”. Historicamente, era possível utilizar um atributo “type” para determinar a representação visual de uma lista não ordenada.Infelizmente, este atributo específico foi considerado desatualizado e já não é suportado. Em vez disso, é altamente recomendável utilizar a propriedade “CSS list-style-type”, amplamente aplicável, para obter as personalizações desejadas relativamente a listas não ordenadas.

 <style>
ul { list-style-type: square; }
 </style> 

O código acima referido altera a representação visual das informações fornecidas, gerando uma estrutura HTML com vários elementos div, em que cada elemento tem vários atributos e contém um conteúdo específico.

A propriedade CSS list-style-type permite a utilização de vários estilos de marcadores, como formas circulares, imagens personalizadas, ícones e símbolos. Ao utilizar CSS que altera a disposição dos itens da lista, é possível utilizar listas não ordenadas para criar menus de navegação.

Listas aninhadas

Uma lista aninhada, em essência, consiste em um elemento de uma lista mais ampla englobado nela. A formação de uma estrutura deste tipo pode ser conseguida através de uma mistura harmoniosa de itens de listas ordenadas e não ordenadas. Estas configurações são capazes de representar sistemas hierárquicos complexos com maior sofisticação.

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol> 

Este código apresenta a seguinte vista:

Lista de descrições

A etiqueta HTML é utilizada para definir uma lista de descrições, constituída por termos descritivos ( ) e pormenores correspondentes ( ). Este formato estruturado proporciona uma organização clara para apresentar a informação de forma hierárquica, melhorando a legibilidade e a compreensão.

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl> 

O código acima apresenta a seguinte vista:

Organize o seu conteúdo com a lista HTML correcta

A seleção da lista HTML utilizada num projeto de desenvolvimento Web deve basear-se na informação que se pretende transmitir ao utilizador. A título de exemplo, quando se pretende gerar uma apresentação em série, como as etapas envolvidas na preparação de um prato ou na realização de uma tarefa, uma lista ordenada seria a mais adequada.

Quando se considera a organização de conteúdos que não necessitam de um processo ou sequência passo-a-passo, tais como dados factuais ou definições, a utilização de uma lista não estruturada pode revelar-se uma alternativa mais prática. Além disso, nos casos em que se pretende apresentar um compêndio de termos e as respectivas explicações, ou uma compilação de perguntas e respostas, a utilização de um formato de lista de definições produzirá óptimos resultados.