Listas Não Ordenadas
Listas não ordenadas são usadas para agrupar itens sem uma sequência hierárquica definida. Cada item é tipicamente marcado com um marcador, como um ponto ou círculo.
- Tag principal:
<ul> - Cada item da lista é definido com a tag
<li>.
Exemplo de Lista Não Ordenada
<html>
<head>
<title>Exemplo de Lista</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
</body>
</html>
Visualização no navegador:
- Café
- Leite
Listas Ordenadas
Listas ordenadas exibem itens em uma sequência específica, geralmente numerada ou com marcadores alfabéticos. São ideais para passos, instruções ou qualquer conteúdo onde a ordem seja importante.
- Tag principal:
<ol> - Cada item da lista é definido com a tag
<li>. - Atributos como
type(e.g., 'A', 'a', 'I', 'i') podem alterar o estilo do marcador.
Exemplo de Lista Ordenada
<html>
<head>
<title>Exemplo de Lista Ordenada</title>
<meta charset="UTF-8">
</head>
<body>
<ol type="A">
<li>Primeiro passo</li>
<li>Segundo passo</li>
<li>Terceiro passo</li>
</ol>
</body>
</html>
Visuailzação no navegador:
- Primeiro passo
- Segundo passo
- Terceiro passo
Listas de Definição
Listas de definição (ou listas personalizadas) são estruturadas para apresentar termos e suas respectivas descrições. São úteis para glossários ou para associar um termo a uma explicação detalhada.
- Tag principle:
<dl> - Termos são definidso com a tag
<dt>. - Descrições ou definições são definidas com a tag
<dd>. - Uma tag
<dt>pode ter múltiplas<dd>, e vice-versa.
Exemplo de Lista de Definição
<html>
<head>
<title>Exemplo de Lista de Definição</title>
<meta charset="UTF-8">
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Linguagem de marcação para criar páginas web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - Linguagem para estilizar documentos web.</dd>
<dd>Também define a apresentação visual dos elementos HTML.</dd>
</dl>
</body>
</html>
Visualização no navegador:
Os itens de lista (<li>) podem conter outros elementos HTML, como parágrafos, imagens, links e até mesmo outras listas, permitindo a criação de estruturas complexas e aninhadas.
A combinação correta dessas tags permite organizar o conteúdo de forma semântica e acessível.