Listas em HTML

Fazer uma lista em HTML pode facilitar muito a vida do programador. Isso porque muitas das coisas que fazemos são ordenadas dessa forma para que fique de mais fácil entendimento. Existem dois tipos principais de listas em HTML: ordenadas e não ordenadas. Cada uma delas possui sua característica e seu próprio meio de mostrar a informação para o usuário.

Além disso, é possível formatar cada uma delas separadamente para que possa extrair o máximo possível do seu código. Através do uso de CSS é possível, ainda, criar mais funções utilizando a lista como: criação de menus, utilização de bullets personalizados e muito mais.

Mas, aqui, vamos forcar no básico. Afinal todos devem começar aprendendo o básico para, posteriormente, se aperfeiçoar e se tornar um profissional no tema.

como fazer uma lista em html com type

Lista em HTML: não ordenada

Trata-se do formato que não possui ordem, ou seja, é exibido apenas um pontinho que pode ser formatado para que exiba certos tipos. Abaixo pode ver o código sem nenhum tipo de formatação:

<ul>
<li>Feijão</li>
<li>Macarrão</li>
<li>Arroz</li>
</ul>

O resultado que temos pode ser visto mais abaixo:

  • Feijão
  • Macarrão
  • Arroz

Formatação com o atributo type das não ordenadas

Existem quatro tags que podem ser utilizadas para a formatação das listas não ordenadas: disc, circle, square e none. Veja abaixo o uso e o funcionamento de cada uma delas:

<ul>
<li type="disc">Disc</li>
<li type="circle">Circle</li>
<li type="square">Square</li>
<li type="none">None</li>
</ul>

Como ficaria a exibição:

  • Disc
  • Circle
  • Square
  • None

Obs.: utilizamos todos os atributos types em uma única lista para facilitar o entendimento, mas o type pode ser usado apenas uma vez na tag ul e modificar toda a lista que se está criando, como no exemplo abaixo:

<ul type="circle">
<li>Manjericão</li>
<li>Cominho</li>
<li>Molho</li>
</ul>

Aí, nesse caso, a exibição ficaria da seguinte forma:

  • Manjericão
  • Cominho
  • Molho

Bem interessante, não?

Obs.: em alguns sistemas poderá ser preciso utilizar outra formatação para poder identificar o atributo do type e utilizar o seguinte código: style=”list-style-type:circle;” no lugar de type=”circle”.

Lista em HTML: ordenada

Esse tipo já possui uma organização, o ideal de se usar a mesma é para aquelas tarefas que precisam de uma organização. Abaixo pode ver o código sem nenhum tipo de formatação:

<ol>
<li>Arroz</li>
<li>Feijão</li>
<li>Batata</li>
</ol>

Teríamos o seguinte resultado utilizando o código mais acima:

  1. Arroz
  2. Feijão
  3. Batata

Sendo que a contagem vai seguindo infinitamente até que se esgotem os itens.

Formatação com o atributo type das ordenadas

Nesse caso apresenta 5 tipos de types que podem ser usados na hora de criar uma lista ordenada em HTML. Sendo eles:

  • 1 = insere a classificação numérica dos itens;
  • a = insere a classificação dos itens obedecendo a sequencia de letras do alfabeto em minúsculo;
  • A = insere a classificação dos itens obedecendo a sequencia de letras do alfabeto em maiúsculo;
  • i = insere a classificação com números romanos minúsculos dos itens;
  • I = insere a classificação com números romanos maiúsculos dos itens.

A maioria dos temas já utiliza por padrão o type=”1″ como seu principal meio de ordenação, mas é bom saber que existe a possibilidade de modificar isso caso o mesmo não seja o padrão.

Um exemplo usando listas ordenadas em HTML com type pode ser vista abaixo:

<ol type="I">
<li>Arroz</li>
<li>Feijão</li>
<li>Batata</li>
<li>Macarrão</li>
</ol>

Com isso, teremos como exibição nos interpretadores o seguinte resultado:

  1. Arroz
  2. Feijão
  3. Batata
  4. Macarrão

Com cada um dos atributos que podem ser usados no type você terá um resultado um pouco diferente na lista em HTML que será exibida para seu usuário final no site.

Deixe um comentário