Rullst AcademyRullst Academy/Lição
HTML semântico e acessibilidade · Lição 02 / 10

Um mapa para se orientar

Quem chega à oficina precisa encontrar o programa sem percorrer tudo de novo.

Trilhas de aprendizado14 min

Vamos descobrir juntos

  1. 1

    Use header para a introdução, nav para uma navegação importante, main para o conteúdo principal e footer para informações finais. Neste projeto mantenha um main visível e um h1 que descreva a página. Esses elementos ajudam tecnologias assistivas a localizar regiões.

  2. 2

    Pense em um sumário: h1 Oficina de ideias; h2 Programa; h3 Atividade com papel; h2 Perguntas. Escolha o nível pela relação entre assuntos, não pelo tamanho da letra. CSS cuidará da aparência em outra trilha.

  3. 3

    Uma section reúne um tema e normalmente tem título; article faz sentido para conteúdo independente, como uma notícia. Div continua útil quando nenhum elemento semântico específico serve. Não transforme cada parágrafo em uma nova região.

  4. 4

    Na prévia, leia apenas a lista de títulos da revisão. Ela explica a página? Troque um h2 por h4 e observe a pista; restaure-o. A verificação de sequência é uma ajuda, não entende sozinha a relação entre as suas ideias.

Oficina de HTML: escrever, observar, revisar

Edite o HTML em “Meus arquivos e GitHub” e atualize a prévia. Ela usa elementos de estudo e estilos de leitura: scripts, CSS próprio e navegação externa ficam desativados. Apenas route.svg do kit é exibida como imagem.

Ir ao meu HTML

Estas verificações simples não são uma validação completa de HTML nem uma auditoria WCAG. Confira conteúdo, teclado, zoom e tecnologias assistivas; registre o que ainda não testou.

Links oficiais e próximo passo

✦
SUA MISSÃO

Organizar títulos e regiões de uma página pela função.

Agora é a sua vez

Oficina de descobertas

Leia, preveja, experimente

O programa tem duas atividades que pertencem a ele. A página começa com h1, depois h2 Programa.
Monte suas respostas e confira quando estiver pronto.
Uma pausa para entender

Um h2 grande deve virar h4 só para diminuir?

Preciso de uma pista

Compare a intenção com o significado dos elementos; aparência sozinha não demonstra acessibilidade.

Carregando sua jornada…

Leve com você

Escreva o sumário de uma oficina diferente. Monte header, main e footer e dê títulos claros a duas seções.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Rullstpetbot

A IA pode errar. Confira no material da lição.