Passo 1 de 6
Escolha a lista pelo significado
Identifique conjuntos de itens, sequências e associações entre termos e descrições para escolher ul, ol ou dl.
Trilha de aprendizado · Nível 2 · Tutorial 2
Represente sequências, conjuntos de itens e relações entre termos e descrições com o tipo de lista apropriado.
Escolha a lista pelo significado
Identifique conjuntos de itens, sequências e associações entre termos e descrições para escolher ul, ol ou dl. 2 min
Agrupe itens com ul e li
Construa uma lista não ordenada com cada item em seu próprio elemento li, dentro de ul. 2 min
Represente uma sequência com ol
Organize uma sequência com ol e li, preservando a ordem dos passos e deixando a numeração por conta do navegador. 2 min
Associe termos e descrições com dl
Construa uma lista de descrição com dl, marcando termos com dt e suas descrições com dd. 3 min
Crie sublistas dentro do item correspondente
Coloque uma sublista dentro do item ao qual ela pertence e escolha seu tipo conforme o significado dos itens. 3 min
Aplicação final: organize um guia com listas
Monte um guia para um encontro de estudos usando os três tipos de lista e uma sublista, com escolhas justificadas pelo significado. 4 min
Passo 1 de 6
Identifique conjuntos de itens, sequências e associações entre termos e descrições para escolher ul, ol ou dl.
Antes de escrever o código, observe como as informações se relacionam. Cada tipo de lista comunica um significado.
Exemplo
A ordem não é essencial para o significado.
Exemplo: uma lista de compras com arroz, feijão e café. Trocar os produtos de posição não muda o que comprar.
Exemplo
A sequência ou a posição tem significado.
Exemplo: instruções para dobrar um avião de papel. Trocar as etapas de lugar pode mudar o resultado.
Exemplo
Associa termos às suas descrições.
Exemplo: um glossário que relaciona “HTML” à descrição “linguagem de marcação usada para estruturar páginas web”.
Associe cada conteúdo ao tipo de lista mais adequado.
Toque em um item e depois no par correspondente.
Exemplo
Nomes dos participantes de uma corrida, sem classificação: ul.
Classificação da corrida, do primeiro ao terceiro lugar: ol.
As pessoas podem ser as mesmas, mas, na classificação, a posição comunica o resultado.
Dica
Escolha a lista pela relação entre as informações, não apenas por querer bolinhas ou números na tela.
Uma página apresenta termos de culinária e explica cada um. A equipe gosta da aparência de listas numeradas. Qual escolha respeita melhor o conteúdo?
Passo 2 de 6
Construa uma lista não ordenada com cada item em seu próprio elemento li, dentro de ul.
<ul> abre a lista não ordenada e </ul> a fecha. Dentro dela, cada item tem seu próprio par <li>...</li>.
Os elementos li são filhos diretos de ul: ficam dentro dele, sem outro elemento envolvendo os itens.
<ul>
<li>Caderno</li>
<li>Lápis</li>
</ul><ul>
<li>Caderno</li>
<li>Lápis</li>
___
</ul>Substitua a lacuna pela linha completa que adiciona Borracha como terceiro item. Inclua as tags de abertura e fechamento.
Por padrão, o navegador mostra um marcador antes de cada item da lista. Você escreve apenas o conteúdo dentro de li: não precisa digitar bolinhas.
Exemplo
Escreva o HTML de uma lista não ordenada com três itens: Maçã, Banana e Uva.
Coloque cada fruta em seu próprio li, diretamente dentro de ul. Escreva todas as tags de abertura e fechamento e deixe os marcadores por conta do navegador.
Passo 3 de 6
Organize uma sequência com ol e li, preservando a ordem dos passos e deixando a numeração por conta do navegador.
Use <ol> para envolver uma sequência. Os itens continuam sendo elementos <li>, agora filhos diretos de <ol>.
A ordem dos <li> no código determina a ordem dos passos apresentados ao leitor.
<ol>
<li>Editar o arquivo.</li>
<li>Salvar o arquivo.</li>
<li>Atualizar a página no navegador.</li>
</ol>O guia deve orientar: abrir a caixa → colocar o presente → fechar a caixa. Organize os itens que ficarão dentro de <ol>.
Por padrão, o navegador numera os itens de <ol> como 1, 2, 3… Não digite esses números no texto dos <li>.
A lista do exemplo inicial será exibida assim:
Exemplo
Dica
Ao mudar a posição de um <li>, o navegador ajusta sua numeração automaticamente. Você não precisa alterar o texto do item.
O guia pede: escrever a mensagem → revisar o texto → enviar a mensagem. Qual código representa essa sequência e deixa a numeração por conta do navegador?
Passo 4 de 6
Construa uma lista de descrição com dl, marcando termos com dt e suas descrições com dd.
Para escrever uma lista de descrição, use:
dl: contém a lista inteira.dt: identifica o termo.dd: contém a descrição associada ao termo.<dl>
<dt>Idioma</dt>
<dd>Português</dd>
</dl>Dica
Em uma lista de descrição, use dt e dd, não li. No exemplo, “Idioma” é o termo e “Português” é sua descrição.
<dl>
<dt>Formato</dt>
___
</dl>Substitua a lacuna pela descrição “Digital”. Escreva o elemento completo, com tag de abertura, conteúdo e tag de fechamento.
Para acrescentar outra associação, repita o padrão: um dt seguido de um dd, dentro do mesmo dl.
dt e dd são elementos irmãos: ambos são filhos diretos de dl. Feche o dt antes de abrir o dd; a descrição não fica dentro do termo.
<dl>
<dt>Idioma</dt>
<dd>Português</dd>
<dt>Formato</dt>
<dd>Digital</dd>
</dl>Monte uma única lista de descrição. Apresente primeiro o termo “Material” com a descrição “Papel” e depois o termo “Cor” com a descrição “Azul”.
Passo 5 de 6
Coloque uma sublista dentro do item ao qual ela pertence e escolha seu tipo conforme o significado dos itens.
Quando alguns itens pertencem a um item mais amplo, coloque uma sublista dentro dele. Aqui, Maçã e Banana pertencem a Frutas; Arroz continua como outro item da lista principal.
<ul>
<li>Frutas
<ul>
<li>Maçã</li>
<li>Banana</li>
</ul>
</li>
<li>Arroz</li>
</ul>Dica
A sublista inteira fica antes do </li> de Frutas. Os itens internos, Maçã e Banana, têm seus próprios elementos li.
<ul>
<li>Frutas</li>
<ul>
<li>Maçã</li>
<li>Banana</li>
</ul>
<li>Arroz</li>
</ul>Qual alteração coloca a sublista dentro do item Frutas, mantendo Arroz como outro item da lista principal?
A sublista não precisa repetir o tipo da lista principal. Aqui, ol organiza as etapas de uma atividade, enquanto ul reúne materiais cuja ordem não é essencial.
<ol>
<li>Separar materiais
<ul>
<li>Caderno</li>
<li>Lápis</li>
</ul>
</li>
<li>Fazer anotações</li>
</ol>Dica
O inverso também vale: um item de ul pode conter uma sublista ol quando os itens internos formam uma sequência significativa.
Ordene os blocos para criar duas etapas: primeiro Preparar a mesa, depois Desenhar. Papel e Lápis devem formar uma sublista não ordenada dentro de Preparar a mesa. Use todos os blocos.
Passo 6 de 6
Monte um guia para um encontro de estudos usando os três tipos de lista e uma sublista, com escolhas justificadas pelo significado.
Organize os materiais, a preparação e os termos de um encontro de estudos. Use esta base e acrescente as listas dentro de body, após os subtítulos correspondentes. Na próxima tela, você receberá o conteúdo para organizar.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Encontro de estudos</title>
</head>
<body>
<h1>Encontro de estudos</h1>
<h2>Materiais</h2>
<h2>Preparação</h2>
<h2>Termos do encontro</h2>
</body>
</html>Escreva ou cole o conteúdo final de body, sem as próprias tags <body> e </body>, mantendo os títulos da base.
Organize estas informações:
Use ul, ol e dl nos lugares adequados. Depois do código, justifique brevemente cada escolha e explique a qual item a sublista pertence.
Resumo
Revise sua resposta e ajuste o que for necessário.
Parabéns! Você concluiu: Listas ordenadas, não ordenadas e de descrição
Tutorial concluído! Você praticou como escolher e construir listas, associar termos às descrições e colocar sublistas dentro do item correspondente.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
