Listas em HTML

Marcadores: HTML Editar postagem

As listas em HTML não são usadas somente para organizar textos de forma numerada ou em tópicos, elas são usadas principalmente para criação de menus de navegação para web sites.
Existem vários tipos de listas em HTML. São eles:

Listas do tipo marcador

Este tipo de lista é o mais usado, possuindo o mesmo efeito dos conhecidos marcadores dos editores de texto mais populares, e também é o tipo de lista utilizado na produção de menus.
Para criar este tipo de lista iremos utilizar a tag <ul>, e para criar cada item que desejarmos ter em nossa lista, iremos utilizar a tag <li>.
Observe abaixo a sintaxe deste tipo de lista:

<ul>
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
      <li>Texto do item 3</li>
      <li>Texto do item 4</li>
      <li>Texto do item 5</li>
</ul>

É importante observar que as listas podem conter um número indefinido de itens.
Você também pode alterar o símbolo do marcador usando o comando type, que pode assumir os seguintes valores: circle (círculo), square (quadrado), disc (padrão dos navegadores).
Exemplo:

<ul type="circle">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
      <li>Texto do item 3</li>
</ul>

Também é possível alterar o símbolo do marcador de forma individual, apenas atribuindo o comando type a cada item.
Exemplo:

<ul>
      <li type="circle">Texto do item 1</li>
      <li type="square">Texto do item 2</li>
      <li type="disc">Texto do item 3</li>
</ul>

Listas ordenadas

Este tipo de lista também é muito usado, ele gera listas ordenadas por números inteiros, números romanos (em maiúsculo ou em minúsculo) e também listas organizadas por letras do alfabeto (em maiúsculo ou em minúsculo).
Exemplo:

<ol>
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
      <li>Texto do item 3</li>
      <li>Texto do item 4</li>
      <li>Texto do item 5</li>
</ol>

Por padrão os navegadores já fazem a ordenação da lista com números inteiros, mas para definir um outro tipo de ordenação para nossa lista, iremos utilizar o comando type, cuja os seus respectivos valores são:
1 - lista ordenada por números inteiros.
Exemplo:

<ol type="1">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
</ol>

a - lista ordenada pelo alfabeto em minúsculo.
Exemplo:

<ol type="a">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
</ol>

A - lista ordenada pelo alfabeto em maiúsculo.
Exemplo:

<ol type="A">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
</ol>

i - lista ordenada por números romanos em minúsculo.
Exemplo:

<ol type="i">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
</ol>

I - lista ordenada por números romanos em maiúsculo.
Exemplo:

<ol type="I">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
</ol>

As listas ordenadas ainda nos permitem escolher a partir de qual número ou letra começará a ordenação, para isso vamos utilizar o comando start, cuja o mesmo aceita valores inteiros.
Exemplo:

<ol type="I" start="5">
      <li>Texto do item 1</li>
      <li>Texto do item 2</li>
      <li>Texto do item 3</li>
      <li>Texto do item 4</li>
</ol>

Note no exemplo acima que definimos uma lista que começará a ser ordenada a partir do número romano cinco, e se neste caso mudássemos o valor do comando type para A a lista começará a ser ordenada pela letra E, que é a quinta letra do alfabeto.

Listas de definição ou listas de glossário

Este tipo de lista recebe estes nomes por ser muito usada para a definição de palavras, nomes, objetos, entre outros.
A tag utilizada para criar uma lista de definição é a tag <dl>, mas como esta lista precisa de um termo a ser definido e também de uma definição, então utilizaremos a tag <dt> para indicar o termo a ser definido e após isso utilizaremos a tag <dd> para indicar a definição.
Exemplo:

<dl>
      <dt>Termo 1</dt>
      <dd>Definição do termo 1</dd>
      <dt>Termo 2</dt>
      <dd>Definição do termo 2</dd>
</dl>

Sub-listas

Como todos os comandos HTML, as listas também podem ser combinadas formando sub-listas.
Exemplo:

<dl>
      <dt>Termo 1</dt>
      <dd>
            <ul type="circle">
                  <li>Texto do item 1</li>
                  <li>Texto do item 2</li>
                  <li>Texto do item 3</li>
            </ul>
      </dd>
      <dt>Termo 2</dt>
      <dd>
            <ol type="A">
                  <li>Texto do item 1</li>
                  <li>Texto do item 2</li>
                  <li>Texto do item 3</li>
            </ol>
      </dd>
</dl>

---

---

Postagens relacionadas: