Listas não ordenadas HTML
A tag HTML <ul>define uma lista não ordenada (com marcadores).
Lista HTML não ordenada
Uma lista não ordenada começa com a <ul>tag. Cada item da lista começa com a
<li>tag.
Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão:
Exemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lista HTML não ordenada - Escolher marcador de item de lista
A propriedade CSS list-style-typeé usada para definir o estilo do marcador de item da lista. Pode ter um dos seguintes valores:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Exemplo - Disco
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemplo - Círculo
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemplo - Quadrado
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemplo - Nenhum
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Listas HTML aninhadas
As listas podem ser aninhadas (lista dentro da lista):
Exemplo
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Nota: Um item de lista ( <li>) pode conter uma nova lista e outros elementos HTML, como imagens e links, etc.
Lista horizontal com CSS
As listas HTML podem ser estilizadas de muitas maneiras diferentes com CSS.
Uma maneira popular é estilizar uma lista horizontalmente, para criar um menu de navegação:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Dica: Você pode aprender muito mais sobre CSS em nosso Tutorial de CSS .
Resumo do capítulo
- Use o elemento HTML
<ul>para definir uma lista não ordenada - Use a propriedade CSS
list-style-typepara definir o marcador de item de lista - Use o elemento HTML
<li>para definir um item de lista - As listas podem ser aninhadas
- Os itens da lista podem conter outros elementos HTML
- Use a propriedade CSS
float:leftpara exibir uma lista horizontalmente
Tags de lista HTML
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .