Passo 1 de 7
Reconhecer as funções das regiões
Identifique a função dos blocos de uma página pelo conteúdo, sem depender da posição visual.
Trilha de aprendizado · Nível 3 · Tutorial 1
Organizar o conteúdo de uma página em regiões com header, nav, main, aside e footer, escolhendo cada elemento pela função do conteúdo, não pela posição visual.
Reconhecer as funções das regiões
Identifique a função dos blocos de uma página pelo conteúdo, sem depender da posição visual. 2 min
Apresentar a página com header
Use header para agrupar a apresentação da página, preservando títulos e parágrafos e deixando o desenvolvimento do assunto fora desse bloco. 2 min
Marcar a navegação importante com nav
Identifique blocos importantes de navegação e agrupe seus links com nav, preservando a marcação existente. 3 min
Delimitar o conteúdo principal com main
Reúna os tópicos principais em uma única região main e mantenha os blocos globais do site fora dela. 3 min
Marcar conteúdo complementar com aside
Reconheça o que complementa o assunto principal e use aside sem depender da posição visual do bloco. 2 min
Reunir informações de encerramento com footer
Agrupe créditos, direitos autorais e contato em footer, sem confundir essas informações com a conclusão do conteúdo principal. 2 min
Organizar e revisar uma página completa
Organize o HTML de uma página de biblioteca com as cinco regiões estudadas e revise suas escolhas pela função do conteúdo. 4 min
Passo 1 de 7
Identifique a função dos blocos de uma página pelo conteúdo, sem depender da posição visual.
Uma região semântica agrupa conteúdo e comunica sua função na página. Antes de escolher como marcar um bloco, pergunte: “Para que ele serve?”
Associe cada bloco à função que ele desempenha nessa página.
Toque em um item e depois no par correspondente.
Exemplo
Uma curiosidade extra sobre uma obra continua sendo conteúdo complementar tanto ao lado do texto quanto abaixo dele. Mudar o lugar não muda sua função.
Dica
Não é preciso incluir todas as regiões em toda página. Se não existe conteúdo complementar, não invente um bloco só para preencher esse papel.
Os créditos do site passam a ser conteúdo principal se aparecerem no centro da tela.
Passo 2 de 7
Use header para agrupar a apresentação da página, preservando títulos e parágrafos e deixando o desenvolvimento do assunto fora desse bloco.
Use <header> para agrupar o conteúdo que apresenta a página. Esse bloco pode reunir o nome do site, um título que identifica a página e uma breve apresentação. Não é necessário ter todos esses conteúdos: agrupe o que fizer parte da introdução.
Dica
O elemento <header> identifica a apresentação. Por si só, ele não cria uma faixa visual nem mantém o cabeçalho preso ao topo da tela durante a rolagem.
Uma página tem o nome do site “Oficina de Papel”, o título “Origami para começar”, uma frase de apresentação e as etapas de uma dobradura. Qual conjunto reúne o conteúdo introdutório em um header?
No trecho abaixo, dentro de body, <header> envolve a apresentação. Os títulos e parágrafos mantêm suas próprias tags. O fechamento </header> vem antes das instruções da dobradura.
<header>
<p>Oficina de Papel</p>
<h1>Origami para começar</h1>
<p>Aprenda sua primeira dobradura.</p>
</header>
<h2>Etapas da dobradura</h2>
<p>Dobre o papel ao meio e depois abra novamente.</p><header>
<p>Biblioteca do Bairro</p>
<h1>Como pegar livros emprestados</h1>
<p>Conheça as orientações para o empréstimo.</p>
____
<h2>Prazo de devolução</h2>
<p>Devolva cada livro em até 14 dias.</p>Substitua a lacuna pela tag completa que encerra a região introdutória, deixando as informações sobre o prazo fora dela.
Passo 3 de 7
Identifique blocos importantes de navegação e agrupe seus links com nav, preservando a marcação existente.
Use <nav> para identificar um bloco importante de navegação entre páginas ou entre partes da mesma página. A escolha depende da finalidade do bloco, não da quantidade de links.
Exemplo
<nav>.<nav>.<nav> apenas por serem links.Uma página tem dois blocos:
A. O menu principal do site, com dois links: Acervo e Atividades.
B. Um parágrafo de uma resenha, com quatro links para livros citados.
Qual escolha faz mais sentido?
Se o menu já usa uma lista, coloque <nav> antes de <ul> e </nav> depois de </ul>. Os elementos <ul>, <li> e <a> continuam com suas funções.
<header>
<h1>Biblioteca do bairro</h1>
<nav>
<ul>
<li><a href="acervo.html">Acervo</a></li>
<li><a href="atividades.html">Atividades</a></li>
</ul>
</nav>
</header>Dica
A navegação global pode fazer parte do <header>, como no exemplo, ou ficar em uma região separada, fora dele. As duas organizações são possíveis: <nav> identifica a função de navegação, não uma posição visual.
Ordene os trechos para marcar o menu importante de um site com nav, preservando a lista e seus links.
Passo 4 de 7
Reúna os tópicos principais em uma única região main e mantenha os blocos globais do site fora dela.
Use <main> para reunir o conteúdo dominante e específico da página: aquilo que desenvolve seu assunto principal.
Nas páginas deste tutorial, coloque main dentro de body, separado do header e da navegação global que se repetem pelo site.
<main>
<h1>Atividades da biblioteca</h1>
<h2>Clube de leitura</h2>
<p>Encontros aos sábados para conversar sobre livros.</p>
<h2>Oficinas de escrita</h2>
<p>Atividades às quartas para criar histórias.</p>
</main>Dica
Clube de leitura e oficinas pertencem ao mesmo assunto da página. Nas páginas simples deste tutorial, use uma única região main, mesmo quando houver vários tópicos. A escolha depende da função do conteúdo, não de onde ele aparece na tela.
Na página “Visite a biblioteca”, horários e localização são informações principais. O header e o nav são os mesmos nas demais páginas do site. Observe o problema na divisão dos tópicos:
<body>
<header>
<p>Biblioteca do Bairro</p>
</header>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="acervo.html">Acervo</a></li>
</ul>
</nav>
<main>
<h1>Visite a biblioteca</h1>
<h2>Horários</h2>
<p>De segunda a sexta, das 9h às 18h.</p>
</main>
<main>
<h2>Localização</h2>
<p>Rua das Flores, 120.</p>
</main>
</body>Reescreva o trecho com uma única região main envolvendo o título da página e os dois tópicos. Mantenha header e nav fora dela e preserve os títulos, parágrafos, lista e links.
Escreva pelo menos 50 caracteres (0/50).
Resumo
Ao organizar o conteúdo principal, confira:
Passo 5 de 7
Reconheça o que complementa o assunto principal e use aside sem depender da posição visual do bloco.
Use <aside> para agrupar conteúdo complementar, relacionado de maneira secundária ao conteúdo ao redor. Estar ao lado do texto, por si só, não torna um bloco complementar.
Exemplo
As instruções para fazer a dobradura são essenciais ao objetivo da página. Já uma curiosidade sobre a história das dobraduras acrescenta contexto, mas não é necessária para seguir as instruções: ela pode formar um <aside>.
Em um guia de dobradura, as medidas necessárias para cortar a folha aparecem ao lado das instruções. Por estarem nessa posição, devem ser agrupadas em <aside>.
Neste trecho do body, o passo a passo fica em <main>. O bloco sobre outras dobraduras fica em <aside>, preservando o título e o parágrafo dentro dele.
<main>
<h1>Como fazer um leque de papel</h1>
<ol>
<li>Dobre uma folha em tiras, alternando para a frente e para trás.</li>
<li>Prenda uma das extremidades com fita adesiva.</li>
<li>Abra a outra extremidade para formar o leque.</li>
</ol>
</main>
<aside>
<h2>Outras dobraduras</h2>
<p>Barcos e flores também podem ser criados com dobraduras de papel.</p>
</aside>Dica
Aqui, o complemento da página está separado de <main>. Um <aside> também pode estar dentro de <main>, complementando parte do conteúdo principal. Em nenhum dos casos ele cria, por si só, uma barra lateral.
Uma curiosidade sobre a história das dobraduras aparece abaixo do passo a passo. Por que <aside> é uma boa escolha para esse bloco?
Passo 6 de 7
Agrupe créditos, direitos autorais e contato em footer, sem confundir essas informações com a conclusão do conteúdo principal.
Use <footer> para reunir informações de encerramento referentes à página ou ao site, como créditos, direitos autorais e informações de contato. Dentro dele, mantenha os parágrafos e links que apresentam esses dados.
Dica
O elemento <footer> não prende o conteúdo à parte inferior da tela. Ele comunica a função dessas informações, não sua posição visual.
Uma página curta tem os créditos dentro de <footer>, mas sobra espaço vazio abaixo deles na tela. Isso, por si só, prova que o elemento foi usado incorretamente.
O último parágrafo de um guia ainda faz parte do assunto principal: ele permanece em <main>. Neste trecho do body, o <footer> começa depois de </main> e reúne os dados do site.
<main>
<h1>Organize seus livros</h1>
<p>Separe os livros por tema e ordene cada grupo pelo título.</p>
<p>Assim, você encontra os títulos com mais facilidade.</p>
</main>
<footer>
<p>© 2026 Estante Aberta. Texto: equipe editorial.</p>
<p><a href="contato.html">Contato com a equipe</a></p>
</footer>Dica
O contato é um link ocasional. Ele pode continuar em um parágrafo do <footer>, sem criar um <nav> só por haver um link.
Associe cada conteúdo à decisão de marcação correspondente.
Toque em um item e depois no par correspondente.
Passo 7 de 7
Organize o HTML de uma página de biblioteca com as cinco regiões estudadas e revise suas escolhas pela função do conteúdo.
Agora você vai organizar o body de uma página sobre empréstimo de livros. A base já contém textos, títulos, lista e links. Sua tarefa é acrescentar as regiões semânticas sem alterar essa marcação interna.
Exemplo
Copie este trecho e acrescente as regiões ao redor dos blocos existentes.
<body>
<p>Biblioteca do Bairro</p>
<p>Livros e encontros para a comunidade.</p>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="catalogo.html">Catálogo</a></li>
<li><a href="agenda.html">Agenda</a></li>
</ul>
<h1>Como pegar livros emprestados</h1>
<h2>Cadastro</h2>
<p>Faça seu cadastro no balcão da biblioteca.</p>
<h2>Prazo</h2>
<p>Devolva os livros em até 14 dias.</p>
<p>Consulte as <a href="regras.html">regras de empréstimo</a>.</p>
<h2>Dica de leitura</h2>
<p>Experimente também os contos do nosso acervo.</p>
<p>© Biblioteca do Bairro</p>
<p><a href="contato.html">Fale com a equipe</a>.</p>
</body>Organize a base com header, nav, main, aside e footer. Preserve os conteúdos e use uma única região principal. Confira o aninhamento e os limites de cada região.
Depois do código, justifique em duas frases: por que o menu recebe nav e por que a dica de leitura recebe aside?
Escreva pelo menos 120 caracteres (0/120).
Na página exibida, a dica de leitura aparece abaixo das regras de empréstimo, não na lateral. O encerramento contém apenas um link de contato. Qual decisão respeita a função desses blocos?
Resumo
Nesta página, há conteúdo para as cinco regiões. Em outras páginas, não crie regiões sem uma função correspondente.
Parabéns! Você concluiu: Organizar as regiões da página com HTML semântico
Você concluiu “Organizar as regiões da página com HTML semântico”. Use os critérios praticados para organizar e revisar as regiões das suas próximas páginas.
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
