O documento discute diferentes tipos de listas em HTML: listas não ordenadas usando <ul> e atributos type como "disc", "circle", "square"; listas ordenadas usando <ol> e tipos numéricos ou alfabéticos; e listas de definição com termos <dt> e definições <dd>. Também mostra como aninhar listas dentro de outras listas.

1. PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva

2. Listas
• Listas não ordenadas
• Listas ordenadas
• Listas de Definições
• Listas Aninhadas

3. Lista não ordenada
• Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets
(tipicamente pequenos círculos pretos).
• Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.
<ul>
<li> Introdução
<li> Dedicatória
<li> Capitulo 1
</ul>
exemplo testado

4. Exemplos de Listas Não Ordenadas
<ul type="disc">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul>
<ul type="circle">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul>
<ul type="square">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul>
exemplos testados

5. Lista Ordenada
• Uma lista ordenada é também uma lista de itens. As listas de itens são
marcadas com números.
• Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a
tag <li>.
Exemplo: Lista Ordenada
<ol>
<li> Introdução
<li> Dedicatória
<li> Capitulo 1
</ol>
exemplo testado

6. Exemplos de Listas Ordenadas
<ol type="I">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>
<ol type="A">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>
exemplos testados

7. Lista de Definições
• Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e
explicações dos termos.
• Uma lista de definições começa com a tag <dl>. Cada termo da lista de
definições começa com a tag <dt>. Cada definição da lista de definições começa
com a tag <dd>.
<dl>
<dt>Café</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>
</dl>
exemplo testado

8. Listas Aninhadas
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
exemplo testado

9. Listas Aninhadas
<ul>
<li>Café</li>
<li>chá
<ul>
<li>Chá preto</li>
<li>Chá verde
<ul>
<li>China</li>
<li>África</li>
</ul>
</li>
</ul>
</li>
<li>Leite</li>
</ul>
exemplo testado