</>Codding
HTML & CSS0/25 lições

Módulo 1 • HTML essencial

Listas e tabelas

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Listas e tabelas com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Listas e tabelas com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Estrutura

Defina o conteúdo e sua hierarquia.

2

Apresentação

Aplique regras visuais sem perder significado.

3

Verificação

Confira em tamanhos de tela e formas de navegação diferentes.

0/6 atividades
1

Entenda o problema

O que é Listas e tabelas

HTML descreve o significado do conteúdo, não a aparência. Escolher a tag certa dá acessibilidade, SEO e navegação por teclado de graça.

Cheque seu entendimento

Para que serve o atributo alt em uma imagem?

1 de 5

O que você aprendeu

  • HTML descreve o significado do conteúdo, não a aparência. Escolher a tag certa dá acessibilidade, SEO e navegação por teclado de graça.
  • Clique no texto do label: o foco vai para o campo. Isso só acontece porque for e id combinam.
  • Evite: Usar <div> para tudo e perder semântica e acessibilidade.
  • Evite: Imagem sem alt ou com alt='imagem'.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Listas e tabelas" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de HTML & CSSCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "HTML essencial".

Quiz rápido

0/2 • 0 certas

1. Para que serve o atributo alt em uma imagem?

2. Qual tag agrupa o conteúdo principal e único da página?

Laboratório

1/4

1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Listas e tabelas" e clique em Rodar para ver o resultado ao vivo.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Listas e tabelas

HTML & CSS • Módulo 1: HTML essencial • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Listas e tabelas com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Listas e tabelas com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Listas e tabelas

HTML descreve o significado do conteúdo, não a aparência. Escolher a tag certa dá acessibilidade, SEO e navegação por teclado de graça.

Checkpoint: Para que serve o atributo alt em uma imagem? — Resposta: Descrever a imagem para leitores de tela e quando ela não carrega

2. Como pensar antes de fazer

Um documento tem uma única <h1> e hierarquia de títulos sem pular níveis. Leitores de tela navegam por esses títulos como se fossem um índice.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Listas e tabelas” resolve.

3. Exemplo completo, do início ao resultado

Tags semânticas (header, nav, main, section, article, footer) substituem a sopa de <div>. Elas não mudam o visual, mudam o que a tecnologia assistiva e o Google entendem.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /><title>Contato</title></head>
  <body style="font-family:system-ui;padding:2rem">
    <header><h1>Fale com a gente</h1></header>
    <main>
      <form>
        <label for="email">Seu e-mail</label>
        <input id="email" type="email" required />
        <button type="submit">Enviar</button>
      </form>
      <img src="https://placehold.co/120" alt="Logotipo da empresa" />
    </main>
  </body>
</html>
TrechoO que faz
<!doctype html>Define uma parte da estrutura visível ou semântica da página.
<html lang="pt-BR">Define uma parte da estrutura visível ou semântica da página.
<head><meta charset="utf-8" /><title>Contato</title></head>Define uma parte da estrutura visível ou semântica da página.
<body style="font-family:system-ui;padding:2rem">Define uma parte da estrutura visível ou semântica da página.
<header><h1>Fale com a gente</h1></header>Define uma parte da estrutura visível ou semântica da página.
<main>Define uma parte da estrutura visível ou semântica da página.
<form>Define uma parte da estrutura visível ou semântica da página.
<label for="email">Seu e-mail</label>Percorre ou transforma uma sequência de valores.

Dica: Clique no texto do label: o foco vai para o campo. Isso só acontece porque for e id combinam.

Checkpoint: Qual tag agrupa o conteúdo principal e único da página? — Resposta: <main>

4. Do detalhe para o todo

Formulários precisam de <label for> ligado ao id do campo, tipos corretos (email, tel, number) e um botão de submit real. Imagem informativa precisa de alt descrevendo o conteúdo; imagem decorativa leva alt vazio.

5. Erros comuns e como corrigi-los

1. Usar <div> para tudo e perder semântica e acessibilidade. 2. Imagem sem alt ou com alt='imagem'. 3. Vários <h1> na mesma página ou títulos escolhidos pelo tamanho da fonte.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Listas e tabelas" e clique em Rodar para ver o resultado ao vivo.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /><title>Contato</title></head>
  <body style="font-family:system-ui;padding:2rem">
    <header><h1>Fale com a gente</h1></header>
    <main>
      <form>
        <label for="email">Seu e-mail</label>
        <input id="email" type="email" required />
        <button type="submit">Enviar</button>
      </form>
      <img src="https://placehold.co/120" alt="Logotipo da empresa" />
    </main>
  </body>
</html>

Dica: Volte ao exemplo resolvido e compare a estrutura. Usar <div> para tudo e perder semântica e acessibilidade.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Listas e tabelas deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Listas e tabelas, identifique um risco citado na aula e registre ou implemente a correção.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /><title>Contato</title></head>
  <body style="font-family:system-ui;padding:2rem">
    <header><h1>Fale com a gente</h1></header>
    <main>
      <form>
        <label for="email">Seu e-mail</label>
        <input id="email" type="email" required />
        <button type="submit">Enviar</button>
      </form>
      <img src="https://placehold.co/120" alt="Logotipo da empresa" />
    </main>
  </body>
</html>

Dica: Usar <div> para tudo e perder semântica e acessibilidade.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Listas e tabelas. Mude os dados ou o cenário e demonstre que o resultado continua correto.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /><title>Contato</title></head>
  <body style="font-family:system-ui;padding:2rem">
    <header><h1>Fale com a gente</h1></header>
    <main>
      <form>
        <label for="email">Seu e-mail</label>
        <input id="email" type="email" required />
        <button type="submit">Enviar</button>
      </form>
      <img src="https://placehold.co/120" alt="Logotipo da empresa" />
    </main>
  </body>
</html>

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • HTML descreve o significado do conteúdo, não a aparência. Escolher a tag certa dá acessibilidade, SEO e navegação por teclado de graça.
  • Clique no texto do label: o foco vai para o campo. Isso só acontece porque for e id combinam.
  • Evite: Usar <div> para tudo e perder semântica e acessibilidade.
  • Evite: Imagem sem alt ou com alt='imagem'.

Exemplo comentado

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /><title>Contato</title></head>
  <body style="font-family:system-ui;padding:2rem">
    <header><h1>Fale com a gente</h1></header>
    <main>
      <form>
        <label for="email">Seu e-mail</label>
        <input id="email" type="email" required />
        <button type="submit">Enviar</button>
      </form>
      <img src="https://placehold.co/120" alt="Logotipo da empresa" />
    </main>
  </body>
</html>

Clique no texto do label: o foco vai para o campo. Isso só acontece porque for e id combinam.

Erros comuns

  • Usar <div> para tudo e perder semântica e acessibilidade.
  • Imagem sem alt ou com alt='imagem'.
  • Vários <h1> na mesma página ou títulos escolhidos pelo tamanho da fonte.

Quiz e gabarito completo

  1. 1. Para que serve o atributo alt em uma imagem?

    • a) Deixar a imagem mais leve
    • b) Descrever a imagem para leitores de tela e quando ela não carrega
    • c) Definir o tamanho
    • d) Melhorar a resolução

    Gabarito: b) Descrever a imagem para leitores de tela e quando ela não carrega — É acessibilidade e também conteúdo indexável.

  2. 2. Qual tag agrupa o conteúdo principal e único da página?

    • a) <section>
    • b) <main>
    • c) <div>
    • d) <article>

    Gabarito: b) <main> — <main> aparece uma vez e marca o conteúdo central.

Codding • HTML & CSS • Listas e tabelas • Prova final e certificado em codding.lovable.app/cursos/html-css/prova