Como criar uma lista em HTML? (OL, UL e DL)

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Ao criar seu site ou página web com HTML, vários tipos de elementos podem ser adicionados, como imagens, vídeos, títulos e também listas.

Você pode usar uma lista HTML para agrupar e exibir itens relacionados. Por exemplo, você pode criar uma lista com um passo a passo para executar alguma tarefa, ou uma lista de ingredientes para fazer um bolo.

Hoje temos no HTML as listas não ordenadas, ordenadas e de descrição. Confira esses três tipos de listas renderizadas no navegador:

Quais os tipos de listas do HTML?

Vamos usar aqui uma lista não ordenada, pois não queremos colocar os itens em sequência e nem colocar descrição para cada um, apenas dizer seus nomes.

• Não ordenadas
• Ordenadas
• Descrição

Como criar uma lista não ordenada no HTML <ul>

A tag HTML <ul> é utilizada para criar uma lista não ordenada, ou seja, com elementos que não precisam aparecer em sequência. Para criar cada elemento utilize a tag <li>.

<ul>
	<li>Não ordenadas</li>
	<li>Ordenadas</li>
	<li>Descrição</li>
</ul>

Como criar uma lista ordenada no HTML <ol>

A tag HTML <ol> é utilizada para criar uma lista ordenada, ou seja, com elementos que precisam aparecer em sequência. Para criar cada elemento utilize a tag <li>.

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

Como criar uma lista de Descrição no HTML <dl>

A tag HTML <dl> é utilizada para criar uma lista com elementos que não precisam aparecer em sequência, mas que precisam de uma descrição. Para criar cada elemento utilize a tag <dt>, e para cada descrição a tag <dd>.

<dl>
	<dt>Coffee</dt>
	<dd>- black hot drink</dd>
	<dt>Milk</dt>
	<dd>- white cold drink</dd>
</dl>

Tags de lista do HTML

Tag	Descrição
<ul>	Define uma lista não ordenada
<ol>	Define uma lista ordenada
<li>	Define um item de lista ordenada ou não ordenada
<dl>	Define uma lista de descrição
<dt>	Define um termo da lista de descrição
<dd>	Descreve um termo da lista de descrição

Como formatar uma lista HTML com CSS

Uma lista HTML pode ser formatada visualmente de diversas formas com regras CSS. Não é o objetivo deste post mostrar essas formas, mas vamos conferir um exemplo básico de como trocar o ícone da lista não ordenada para quadrado:

<style>
	li {
		list-style: square;
	}
</style>

Se você conhece pelo menos o básico de CSS, agora é com você pesquisar regras para aplicar em suas listas HTML. Se não conhece, comece estudando Como criar seu primeiro site do zero com HTML e CSS e depois estude Seletores CSS.