Lists

De vez em quando uma lista pode ser muito útil. Você pode usá-la para apresentar os ingredientes de uma receita ou como um sumário para um texto. O HTML tem dois tipos diferentes de listas - as ordenadas e as não ordenadas.

Listas não ordenadas começam com a tag de abertura <ul> (abreviação de "unordered list" - lista não ordenada) e cada item da lista fica dentro da tag <li> (li significa "list item" - item de lista)

<ul>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ul>

Esse HTML vai resultar em uma lista não ordenada que fica assim:

• Item nº1 da lista
• Item nº2 da lista
• Item nº3 da lista

Geralmente a lista não ordenada tem círculos pretos como marcadores - mas você pode mudar a aparência dos marcadores, usando CSS.

A lista ordenada fica assim:

1. Primeiro item da lista
2. Segundo item da lista
3. Terceiro item da lista

E em vez da tag <ul>, você usa a <ol> (abreviação de "ordered list" - lista ordenada)

<ol>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ol>

Além do motivo óbvio para o uso da lista (quando você realmente quer uma lista) muitos webdesigners usam uma lista para criar menus e navegação - já que a navegação frequentemente é um conjunto de links relacionados. Usar uma lista para marcar a navegação também significa que se a estilização do CSS der problema, os links ainda assim estarão semanticamente relacionados.

O que você aprendeu

• Há dois tipos diferentes de listas - listas ordenadas e listas não ordenadas
• A tag para uma lista ordenada é <ol>
• A tag para uma lista não ordenada é <ul>
• Cada item de uma lista é marcado com o elemento <li>
• A lista é uma escolha óbvia para criar navegação