tutoriais mais recente desenvolvimento web

Listas de HTML

❮ Anterior Próxima Capítulo ❯

HTML Listas Descrição

Uma lista descrição, que consiste em grupos nome de valor, e era conhecida como uma lista de definições anteriores para HTML5. Inscrição listas são destinados a grupos de "termos e definições, temas de metadados e valores, perguntas e respostas, ou quaisquer outros grupos de dados nome-valor".

DL existia em HTML Tags, e foi padronizada em HTML 2.0; ainda atual.

Exemplo de uma lista desordenada e uma lista ordenada em HTML:

Lista desordenada:

  • Item
  • Item
  • Item
  • Item

Lista ordenada:

  1. primeiro item
  2. segundo item
  3. terceiro item
  4. quarto item

Listas de HTML não ordenadas

Uma lista não ordenada começa com o <ul> tag. Cada item da lista começa com o <li> tag.

Os itens da lista será marcado com balas (small black circles) :

Exemplo

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Tente você mesmo "

Listas de HTML não ordenada - O Style Atributo

Um style atributo podem ser adicionados a uma lista não ordenada, para definir o modelo do marcador:

Estilo Descrição
list-style-type:disc Os itens da lista será marcado com balas (default)
list-style-type:circle Os itens da lista serão marcadas com círculos
list-style-type:square Os itens da lista será marcada com quadrados
list-style-type:none Os itens da lista não serão marcadas

Disc :

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Tente você mesmo "

Circle :

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Tente você mesmo "

Square :

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Tente você mesmo "

None :

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Tente você mesmo "

Listas HTML ordenadas

Uma lista ordenada começa com o <ol> tag. Cada item da lista começa com o <li> tag.

Os itens da lista serão marcados com números:

Exemplo

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

Listas HTML ordenadas - O Type Atributo

Um type atributo podem ser adicionados a uma lista ordenada, para definir o tipo de marcador:

Tipo Descrição
type="1" Os itens da lista serão numeradas com números (default)
type="A" Os itens da lista serão numerados com letras maiúsculas
type="a" Os itens da lista serão numerados com letras minúsculas
type="I" Os itens da lista serão numeradas com números romanos maiúsculos
type="i" Os itens da lista serão numeradas com números romanos em minúsculas

Números:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

Letras maiúsculas:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

Letras minúsculas:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

Números maiúsculas romanas:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

Números romanos minúsculas:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Tente você mesmo "

HTML Descrição Lista

HTML também suporta descrição listas.

A lista de descrição é uma lista de termos, com uma descrição de cada termo.

A <dl> etiqueta define a lista de descrição, o <dt> tag define o termo (name) , e o <dd> tag descreve cada termo:

Exemplo

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Tente você mesmo "

Listas HTML aninhadas

Lista podem ser aninhadas (lists inside lists) :

Exemplo

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Tente você mesmo "

Os itens da lista pode conter nova lista, e outros elementos HTML, como imagens e links, etc.

As listas horizontais

listas HTML pode ser denominado de várias maneiras diferentes com CSS.

Uma forma popular, é ao estilo de uma lista a ser exibido horizontalmente:

Exemplo

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
Tente você mesmo "

Com um pouco de estilo extra, você pode fazer com que pareça um menu:

Exemplo

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
Tente você mesmo "

Resumo do capítulo

  • Use o HTML <ul> elemento para definir uma lista não ordenada
  • Use o HTML style atributo para definir o estilo de marcador
  • Use o HTML <ol> elemento para definir uma lista ordenada
  • Use o HTML type atributo para definir o tipo de numeração
  • Use o HTML <li> elemento para definir um item da lista
  • Use o HTML <dl> elemento para definir uma lista de inscrição
  • Use o HTML <dt> elemento para definir o termo descrição
  • Use o HTML <dd> elemento para definir os dados descrição
  • As listas podem ser aninhadas dentro de listas
  • Os itens da lista pode conter outros elementos HTML
  • Use a exibição de propriedades CSS: inline para exibir uma lista horizontal

Teste-se com exercícios!

Exercício 1 » exercício 2» exercício 3 » exercício 4» exercício 5 » exercício 6»

HTML lista de tags

etiqueta Descrição
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item da lista
<dl> Define uma lista descrição
<dt> Define o termo em uma lista de inscrição
<dd> Define a descrição em uma lista descrição

❮ Anterior Próxima Capítulo ❯