HTML - Listas

HTML tem três tipos de listas. <ol> mostra as listas ordenadas, enquanto <ul> , as desordenadas. E para fazer uma lista de definições use <dl>. Use os atributos type e start para fazer a sua lista, dependendo dos seus interesses.

• <ul> - Lista desordenadas, pontos
• <ol> - Lista ordenada, números
• <dl> - Lista de definições

HTML - Listas ordenadas

Use a tag <ol> para iniciar uma lista ordenada. E ponha <li></li> (itens da lista) no meio.

html<h4>Objetivos</h4>

<ol>
	<li>Encontrar um trabalho</li>
	<li>Fazer muito dinheiro</li>
	<li>Mudar para outra cidade</li>
</ol>

Demo

Você pode começar a sua lista com qualquer número que você quises, apenas especifique isso com a ajuda do atributo start .

html<h4>Objetivos</h4>

<ol start="4" >
	<li>Encontrar um trabalho</li>
	<li>Fazer muito dinheiro</li>
	<li>Mudar para outra cidade</li>
</ol>

Demo

Esse elemento não faz nada fora do comum, mas é muito útil às vezes.

HTML -Outros tipos de listas ordenadas

Fora o exemplo acima, há outros quatro tipos de listas ordenadas. Ao invez da numeração normal, você pode usar numerais romanos ou letras, mas em ambos os casos só pode ser usado na forma minúscula ou maiúscula. Use o atributo type se quiser modificar o tipo de numeração.

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Dependendo do caso, a lista parecera com essa:

Lista desordenada

Você pode criar uma lista desordenada com a ajuda da tag <ul> . As listas desordenadas são de três tipos: quadrados, pontos e círculos. O valor padrão que a maioria dos navegadores dão são pontos.

html<h4>Lista de Compras</h4>

<ul>
	<li>Leite</li>
	<li>Queijo</li>
	<li>Ovos</li>
	<li>Açúcar</li>
</ul>

Demo

Você pode ver no próximo exemplo como aparecem todos os tipos de listas desordenadas.

html<ul type="square">
<ul type="disc">
<ul type="circle">

HTML - Listas de definições

Da mesma forma, você pode fazer uma lista de definições usando a tag <dl>; . Essa lista irá dar a palavra, uma definição. A palavra é indicada em negrito, assim que ficará mais evidente.

html<dl>
	<dt>Queso</dt>
	<dd>Palavra espanhola para queijo.</dd>
	
	<dt>Ordenador</dt>
	<dd>Palavra espanhola para computador.</dd>
</dt>

Demo