São realmente notáveis as possibilidades que o HTML nos oferece em questão de tratamento de texto. Não se limitam ao que vimos até agora, pois vão ainda mais longe. Vários exemplos disso são as listas, que servem para numerar e definir elementos, os textos pré-formatados e os cabeçalhos ou os títulos.

As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadas correntemente para deslocar o começo da linha para a direita.

Podemos distinguir três tipos de listas:

• Listas desordenadas
• Listas ordenadas
• Listas de definição

Veremos agora detalhadamente uma por uma:

Listas desordenadas

São delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista é citado por meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em colocá-lo). Então, fica assim:

<p>Países do mundo</p>
<ul>
<li>Brasil</li>
<li>Espanha</li>
<li>Austrália</li>
</ul>

O resultado:

Países do mundo

• Brasil
• Espanha
• Austrália

Podemos definir o tipo de marcador empregado para cada elemento. Para isso devemos especificá-lo por meio do atributo type incluído dentro da etiqueta de abertura <ul>, se queremos que o estilo seja válido para toda a lista, ou dentro da etiqueta <li> se queremos especificar um só elemento. A sintaxe é do seguinte tipo:

<ul type="tipo de marcador">

E o tipo de marcador pode ser um dos seguintes:

Circle
Disc
Square

Nota: Em alguns navegadores não funciona a opção de mudar o tipo de marcador e por mais que nos empenhemos, sempre sairá a bolinha preta. Em caso de que não funcione, sempre podemos construir a lista à mão com o marcador que quisermos, utilizando as tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.

Vamos ver um exemplo de lista com um quadrado ao invés de uma bolinha e, no último elemento, colocaremos um círculo. Para isso, vamos colocar o atributo type na etiqueta <ul>, que irá afetar todos os elementos da lista.

<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>

Que tem como resultado:

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4