Educação e Utilidade Pública Educação e Utilidade Pública

O que são listas ordenadas, não ordenadas e de definição em HTML?

Veja neste artigo o que são as listas ordenadas, não ordenadas e de definição. ul, ol, li,dd, dl e dt que são muito usadas em HTML para a construção de menus de navegação, criação de perguntas e respostas, bem como outras aplicações.

Home » Tecnologia

Índice deste artigo

Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor exemplificação de um determinado assunto. São recursos extremamente usados, inclusive quando nem imaginamos que ele esta sendo usado, como no caso de menus. Hoje, boa parte dos menus em HTML é feito com listas.

Há três tipos de listas:

Listas não ordenadas

As listas não numeradas são usadas para listar itens, sem se preocupar com sua sequência. Chamamos de lista de marcadores apenas.

As tags usadas para criar uma lista não ordenada são <ul> e <li>. A tag <ul> é usada para definir a lista e a tag <li> é usada para cada item da lista.

    <ul>

        <li>Internet Explorer</li>

        <li>Opera</li>

        <li>Firefox</li>

        <li>Safari</li>

    </ul>

Em que situação as listas não ordenadas são usadas?

É o tipo mais comum no HTML portanto ela tem uma aplicação bastante ampla. Um dos casos clássicos de uso de lista não ordenada e para construção de menu de navegação desses que fica na parte superior dos sites ou na parte lateral. Normalmente utiliza-se a lista e faz a formatação dela em CSS e interação em Javascript para dar animação o menu, quando necessário.

Outra aplicação comum é no meio do texto quando você precisa relacionar uma lista de itens sem necessariamente se importar com a ordem delas. É bastante comum também esse tipo de aplicação e você vai encontrar diversos textos na internet.

Listas ordenadas ou numerada

As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou numeração

As tags usadas para criar uma lista não ordenada são <ol> e <li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da lista.

    <ol>

        <li>São Paulo</li>

        <li>Rio de Janeiro</li>

        <li>Belo Horizonte</li>

        <li>Brasília</li>

    </ol>

Quando a lista ordenada é mais usada?

A lista ordenada ela já tem um propósito um pouco mais específico que a colocar os itens da lista numa determinada ordem portanto ela é de uso mais limitado, mas ainda assim você vai encontrar em diversos textos quando há necessidade de fazer uma relação de itens nesse e neste caso a posição de cada item na lista é importante, portanto usa-se a lista ordenada.

Listas de definição

Listas de definição são usadas em assuntos onde há um termo a em sequência a sua definição, estilo perguntas e respostas.

As tags usadas são <dl>, <dt> e <dd>.

<dl>

   <dt>HTML</dt>

   <dd>Linguagem de marcação de texto</dd>

   <dt>CSS</dt>

   <dd>Usado para formatação de documentos</dd>

</dl>

Exemplo:

<!DOCTYPE html">

<html lang="pt-br"> 
<head>

    <title>Listas ordenadas, não ordenadas e de definição</title>

    <link href="estilo_listas.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <h2>Principais browsers</h2>

    <ul>

        <li>Internet Explorer</li>

        <li>Opera</li>

        <li>Firefox</li>

        <li>Safari</li>

    </ul>

    <h2>Principais cidades do Brasil</h2>

    <ol>

        <li>São Paulo</li>

        <li>Rio de Janeiro</li>

        <li>Belo Horizonte</li>

        <li>Brasília</li>

    </ol>

<h2>Linguagens de internet</h2>

<dl>

   <dt>HTML</dt>

   <dd>Linguagem de marcação de texto</dd>

   <dt>CSS</dt>

   <dd>Usado para formatação de documentos</dd>

</dl>

</body>

</html>

Para criar menus de navegação, além de listas, você precisará usar links. Veja o post: Links internos, externos, verticais e de email.

Em que situações as listas de definições são usadas?

Elas não são muito utilizadas e de todas é o tipo menos comum. Talvez a aplicação que faça mais sentido para esse tipo de lista seja uma sessão de perguntas e respostas, as famosas FAQ que encontramos em boa parte do site.

Nesse tipo de página normalmente tem uma pergunta e uma resposta, uma pergunta uma resposta, e assim por diante. Desta forma as listas de definições podem ser úteis para a criação desse tipo de conteúdo.

Formatação da lista

As listas vem com a formatação padrão do HTML, para mudar a formatação  precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_listas.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_listas.css

body{

font-family:  Arial, Verdana, Tahoma, Sans-Serif;

font-size:  12px;

}

ul

{

list-style-type:  square;

}

ul li{

padding:  3px 0px;

color:  #FF0000;

}

ol

{

list-style-type:  lower-roman;

}

ol li{

color:  #666666;

font-family:  Georgia;

}

Analisando o código acima:

list-style-type: Esta prorpiedade é usada para alterar o marcador dos itens da lista. Os valores são diferentes para os tipos de listas. Os valores possíveis para listas ordenadas são:

Há diversos valores para listas numeradas, porém, os mais usados são:

Percebemos que o atributo <li> do HTML é o mesmo para as duas lista, logo teríamos um problema para formatar os itens de uma tabela com cor vermelho e na outra tabela em cinza.

Para resolver este problema, usamos uma estratégia bastante elegante e perfeitamente aceita em CSS, o encadeamento.

ul: formata apenas a lista ordenada

ol: formata apenas a lista numerada

ul li: formata os itens da lista ordenada

ol li: formata os itens da lista numerada

Veja também