Etiqueta <ul> HTML

  • Página anterior <u>
  • Próxima página <var>

Definição e uso

<ul> etiqueta para definir listas não ordenadas (com marcadores).

Use <ul> etiquetas e <li> para criar listas não ordenadas.

Dica:Use CSS paraDefinir o estilo da lista.

Dica:Para listas ordenadas, use Etiqueta <ol>.

Veja também:

Tutorial de HTML:Lista HTML

Manual de Referência do DOM HTML:Objeto Ul

Tutorial de CSS:Definir o estilo da lista

Exemplo

Exemplo 1

Uma lista HTML não ordenada:

<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 2

Definir diferentes tipos de estilos de lista (usando CSS):

<ul style="list-style-type:circle">
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>
<ul style="list-style-type:disc">
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>
<ul style="list-style-type:square">
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 3

Aumentar e diminuir a altura das linhas na lista (usando CSS):

<ul style="line-height:180%">
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>
<ul style="line-height:80%">
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 4

Criar outra lista dentro da lista (lista aninhada):

<ul>
  <li>Café</li>
  <li>Chá</li>
    <ul>
      <li>Pu'er</li>
      <li>Chá verde</li>
    </ul>
  </li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 5

Criar uma lista aninhada mais complexa:

<ul>
  <li>Café</li>
  <li>Chá</li>
    <ul>
      <li>Pu'er</li>
      <li>Chá verde</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Atributos globais

<ul> A tag também suporta Atributos globais no HTML.

Atributos de evento

<ul> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <ul> Elemento:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Experimente você mesmo

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte
  • Página anterior <u>
  • Próxima página <var>