Passo 1 de 7
Reconhecer uma unidade independente com article
Identifique conteúdos que fazem sentido como unidades independentes e justificam o uso de article, sem se guiar pelo tamanho ou pela aparência.
Trilha de aprendizado · Nível 3 · Tutorial 2
Estruturar o conteúdo dentro das regiões da página, distinguindo unidades independentes, seções temáticas e agrupamentos genéricos, com títulos coerentes com essa organização.
Reconhecer uma unidade independente com article
Identifique conteúdos que fazem sentido como unidades independentes e justificam o uso de article, sem se guiar pelo tamanho ou pela aparência. 2 min
Identificar um agrupamento temático com section
Diferencie uma divisão temática da página de uma composição independente, sem decidir apenas pela presença de um título. 3 min
Usar div quando o agrupamento é genérico
Escolha um contêiner pela finalidade do agrupamento e reconheça quando não é necessário acrescentar nenhum. 3 min
Aninhar artigos e seções pelo conteúdo
Organize coleções de conteúdos independentes e subdivisões temáticas usando article e section. 3 min
Integrar os títulos à hierarquia da página
Escolha níveis explícitos de título conforme a relação entre os assuntos, sem reiniciar a hierarquia em cada article ou section. 3 min
Distinguir cabeçalhos e rodapés locais
Identifique a que conteúdo pertencem header e footer, inclusive quando há uma div intermediária. 2 min
Revisar e justificar a estrutura completa
Revise uma página editorial e justifique os contêineres, o aninhamento, os títulos e o escopo dos cabeçalhos e rodapés. 4 min
Passo 1 de 7
Identifique conteúdos que fazem sentido como unidades independentes e justificam o uso de article, sem se guiar pelo tamanho ou pela aparência.
Dentro das regiões da página, article representa uma composição autocontida: um conteúdo que faz sentido como unidade independente.
Para avaliar um trecho, pergunte: “Se eu o apresentasse separado do restante da página, ele ainda seria uma publicação compreensível, com assunto e conteúdo próprios?”
Dica
Imaginar esse conteúdo em outro contexto ajuda a reconhecer sua autonomia. Mas ele não precisa ser publicado em outro lugar para justificar article.
Um site sobre livros apresenta os conteúdos abaixo. Qual deles constitui uma unidade independente adequada a article?
Resenhas e publicações em um mural também podem ser articles. Veja este comunicado da biblioteca: ele identifica o assunto e transmite a informação completa, mesmo sendo curto.
<article>
<h2>Clube de leitura: encontros às 18h</h2>
<p>Em agosto, o clube de leitura da Biblioteca Central
se reunirá às quartas-feiras, às 18h, na sala de leitura.
A participação é gratuita e aberta ao público.</p>
</article>Dica
Não há um tamanho mínimo que determine o uso de article. Exibir um trecho como cartão também não o torna independente: a decisão vem do conteúdo.
Um cartão destaca apenas a frase “Por esses motivos, não recomendo a compra”. O livro e os motivos são explicados fora dele.
Afirmação: esse trecho constitui uma unidade independente adequada a article porque aparece em um cartão.
Passo 2 de 7
Diferencie uma divisão temática da página de uma composição independente, sem decidir apenas pela presença de um título.
O elemento section representa um agrupamento temático dentro do documento. Geralmente, um título identifica o assunto desse agrupamento.
Na página de apresentação de um curso, por exemplo, os objetivos de aprendizagem formam uma divisão temática: explicam um aspecto do curso apresentado ali.
O título expressa o tema compartilhado pelos itens da lista.
<section>
<h2>O que você vai aprender</h2>
<ul>
<li>Controlar a exposição da fotografia.</li>
<li>Compor imagens com luz natural.</li>
</ul>
</section>Na apresentação do curso, “Pré-requisitos” reúne os conhecimentos necessários para acompanhar as aulas. Esse trecho complementa a descrição do curso, sem constituir uma publicação independente.
Complete com article ou section: o elemento mais adequado é ____.
Tanto section quanto article podem ter título. O título identifica o assunto; a relação do conteúdo com o restante da página orienta a escolha.
Exemplo
O nome é o mesmo. A autonomia da composição é diferente.
Todos os trechos têm título. Associe cada descrição ao elemento e à justificativa mais adequados.
Toque em um item e depois no par correspondente.
Passo 3 de 7
Escolha um contêiner pela finalidade do agrupamento e reconheça quando não é necessário acrescentar nenhum.
A div é um contêiner genérico, sem significado semântico próprio. Use quando houver necessidade de agrupar elementos, mas nenhum elemento semântico mais específico representar essa finalidade.
Agrupar trechos apenas para apresentação visual não transforma o conjunto em uma seção temática.
Neste caso, o projeto exige agrupar estes dois avisos para apresentação conjunta, sem criar uma divisão temática do conteúdo.
<div>
<p><strong>Atenção:</strong> a biblioteca fecha às 16h hoje.</p>
<p>O site também está disponível em espanhol.</p>
</div>Dica
A neutralidade da div não apaga o significado dos elementos internos: p continua sendo um parágrafo, e strong continua indicando importância.
Qual sequência atende melhor aos casos abaixo?
Se os elementos já estão no contexto adequado e não existe uma necessidade concreta de agrupá-los, não acrescente um contêiner só porque aparecem em sequência.
Exemplo
Uma lista de materiais já está marcada com ul. Não há necessidade de agrupá-la com outros elementos nem de acrescentar um contêiner para apresentação. Nesse caso, não é preciso envolver a lista em uma div: a própria ul já representa a lista.
Uma div agrupa dois trechos apenas para apresentação visual. Esse agrupamento não corresponde a uma divisão temática do conteúdo.
Uma pessoa sugere trocar div por section porque “toda caixa deveria ser semântica”. Você aceita? Justifique e diga o que faria se a necessidade desse contêiner deixasse de existir.
Escreva pelo menos 30 caracteres (0/30).
Passo 4 de 7
Organize coleções de conteúdos independentes e subdivisões temáticas usando article e section.
A área “Resenhas de ficção” reúne textos sobre um mesmo tema. Cada resenha é uma composição independente. Por isso, uma section pode organizar a coleção, contendo um article para cada resenha.
Nos exemplos, os títulos já estão definidos. O foco aqui é decidir quem contém quem.
<section>
<h2>Resenhas de ficção</h2>
<article>
<h3>Resenha: Mar de Papel</h3>
<p>Mar de Papel combina personagens cativantes com um final previsível.</p>
</article>
<article>
<h3>Resenha: A Cidade Azul</h3>
<p>A Cidade Azul se destaca pelos diálogos, apesar do ritmo lento.</p>
</article>
</section>Uma página tem a área “Críticas de comédias”, com duas críticas completas de filmes diferentes. Cada crítica faz sentido sozinha. Qual estrutura representa melhor essa organização?
Em uma resenha detalhada, a relação muda: o article representa a composição inteira, e as sections dividem seu conteúdo em “Enredo” e “Estilo”.
Uma section também pode conter subseções: dentro de “Estilo”, “Narrador” e “Ritmo” representam subdivisões temáticas reais.
<article>
<h2>Resenha: Mar de Papel</h2>
<section>
<h3>Enredo</h3>
<p>A busca por uma carta perdida conduz a trama.</p>
</section>
<section>
<h3>Estilo</h3>
<section>
<h4>Narrador</h4>
<p>A voz da protagonista aproxima o leitor de seus conflitos.</p>
</section>
<section>
<h4>Ritmo</h4>
<p>Os capítulos curtos mantêm a leitura ágil.</p>
</section>
</section>
</article>Dica
Não existe uma regra que coloque article sempre dentro ou sempre fora de section. Aninhe para representar uma coleção ou uma subdivisão real, não apenas para acrescentar contêineres.
Proponha o aninhamento para estes dois casos:
A) “Relatos de intercâmbio” reúne dois relatos completos e independentes: “Um semestre em Lima” e “Um ano em Recife”.
B) O relato “Um semestre em Lima” tem as partes “Estudos” e “Cotidiano”. Dentro de “Cotidiano”, há os subtemas “Moradia” e “Alimentação”.
Use nomes e tags em uma árvore ou descreva quem contém quem. Explique a diferença entre A e B em uma frase. Não é necessário escolher níveis de título.
Escreva pelo menos 40 caracteres (0/40).
Passo 5 de 7
Escolha níveis explícitos de título conforme a relação entre os assuntos, sem reiniciar a hierarquia em cada article ou section.
Abrir um article ou uma section não ajusta automaticamente os níveis de h1 a h6. Um h1 continua sendo de nível 1, mesmo dentro desses elementos. Escolha cada tag conforme a posição do assunto na organização da página.
<main>
<h1>Caderno de leitura</h1>
<section>
<h2>Resenhas</h2>
<article>
<h3>Resenha de A ilha</h3>
<p>Uma aventura sobre amizade e descobertas.</p>
<section>
<h4>Personagens</h4>
<p>A protagonista aprende a confiar na equipe.</p>
</section>
</article>
</section>
</main>Dica
Aqui, “Resenhas” é uma divisão da página; a resenha pertence a essa coleção; “Personagens” subdivide a resenha. Subdivisões usam o nível seguinte, enquanto assuntos equivalentes usam o mesmo nível.
Na página “Caderno de leitura” (h1), a seção “Resenhas” tem título h2. Os dois artigos abaixo pertencem a essa seção e têm o mesmo papel na coleção.
<article>
<h3>Resenha de A ilha</h3>
<p>Uma aventura sobre amizade e descobertas.</p>
</article>
<article>
<___>Resenha de O farol</___>
<p>Um mistério com ritmo ágil.</p>
</article>Digite apenas o nome da tag, sem os sinais < e >.
Em outra página, a mesma resenha pode ser um tópico diretamente subordinado ao título principal. Nesse contexto, seu título usa h2, não h3. As duas divs usadas para apresentação no exemplo não criam níveis adicionais de assunto.
<main>
<h1>Destaques de leitura</h1>
<div>
<div>
<article>
<h2>Resenha de A ilha</h2>
<p>Uma aventura sobre amizade e descobertas.</p>
</article>
</div>
</div>
</main>Dica
A qual assunto este título está subordinado? Quais outros títulos têm o mesmo papel? Essas relações orientam o nível — não a quantidade de tags ao redor do título.
A resenha abaixo pertence à coleção “Ficção”. “Enredo” e “Estilo” são subdivisões equivalentes da resenha. A div serve apenas à apresentação. Os três títulos dentro do article precisam de correção.
<main>
<h1>Caderno de leitura</h1>
<section>
<h2>Ficção</h2>
<div>
<article>
<h1>Resenha de O farol</h1>
<section>
<h2>Enredo</h2>
<p>Um mistério à beira-mar.</p>
</section>
<section>
<h2>Estilo</h2>
<p>Descrições curtas e ritmo ágil.</p>
</section>
</article>
</div>
</section>
</main>Escolha, nesta ordem, as tags para “Resenha de O farol”, “Enredo” e “Estilo”. Mantenha os títulos da página e da coleção como estão.
Passo 6 de 7
Identifique a que conteúdo pertencem header e footer, inclusive quando há uma div intermediária.
header pode reunir o conteúdo introdutório de um article ou de uma section, como título e apresentação. footer pode reunir autoria ou outras informações de encerramento relativas a esse conteúdo.
O aninhamento indica a quem eles pertencem. Um header diretamente dentro de uma section apresenta essa seção, mesmo quando ela está dentro de um article.
Dica
Na estrutura article > div > footer, o rodapé continua pertencendo ao artigo. A div intermediária não o transforma em rodapé da página.
Considere este conteúdo dentro de body. Observe onde cada article e section começa e termina.
<header><h1>Revista de leitura</h1></header>
<main>
<section>
<header><h2>Resenhas</h2></header>
<article>
<header><h3>O jardim secreto</h3></header>
<p>A história destaca a amizade.</p>
<div>
<footer><p>Resenha de Lia.</p></footer>
</div>
</article>
<footer><p>Seleção atualizada em maio.</p></footer>
</section>
</main>
<footer><p>Equipe da revista.</p></footer>Associe cada ocorrência ao conteúdo que ela apresenta ou encerra.
Toque em um item e depois no par correspondente.
Artigos e seções não precisam ter header e footer. Um título pode ficar diretamente dentro de article ou section, e não é necessário inventar um rodapé.
Use esses elementos quando fizer sentido agrupar conteúdo introdutório ou informações de encerramento.
Em uma página de resenhas, esta seção pode ser estruturada assim:
<section>
<h2>Critérios de avaliação</h2>
<p>Analisamos o enredo, os personagens e a linguagem.</p>
</section>
Passo 7 de 7
Revise uma página editorial e justifique os contêineres, o aninhamento, os títulos e o escopo dos cabeçalhos e rodapés.
A página Revista do bairro precisa representar estas relações:
Na próxima tela, revise uma proposta de marcação que ainda não expressa bem essa organização.
Este é o conteúdo de body. Mantenha os textos, o agrupamento solicitado e os cabeçalhos e rodapés existentes.
<header><h1>Revista do bairro</h1></header>
<main>
<div>
<h2>Cultura</h2>
<section>
<section>
<header><h1>Cinema na praça</h1></header>
<p>O Cine Praça exibirá filmes brasileiros na Praça Central em julho.</p>
<div>
<h2>Programação</h2>
<p>As sessões ocorrerão aos sábados, às 18h.</p>
</div>
<footer><p>Por Ana Lima</p></footer>
</section>
<section>
<h1>Biblioteca ampliada</h1>
<p>A Biblioteca Central inaugurou uma sala de leitura aberta diariamente.</p>
</section>
</section>
</div>
</main>
<footer><p>Revista do bairro — equipe editorial</p></footer>Responda em tópicos, sem precisar reescrever todo o HTML:
Escreva pelo menos 80 caracteres (0/80).
Compare com sua proposta: a coleção contém notícias independentes, e só a primeira notícia contém Programação.
<header><h1>Revista do bairro</h1></header>
<main>
<section>
<h2>Cultura</h2>
<div>
<article>
<header><h3>Cinema na praça</h3></header>
<p>O Cine Praça exibirá filmes brasileiros na Praça Central em julho.</p>
<section>
<h4>Programação</h4>
<p>As sessões ocorrerão aos sábados, às 18h.</p>
</section>
<footer><p>Por Ana Lima</p></footer>
</article>
<article>
<h3>Biblioteca ampliada</h3>
<p>A Biblioteca Central inaugurou uma sala de leitura aberta diariamente.</p>
</article>
</div>
</section>
</main>
<footer><p>Revista do bairro — equipe editorial</p></footer>Dica
Sem a exigência do agrupamento visual, a div intermediária poderia ser removida. Os articles continuariam dentro de Cultura, com títulos h3. E a segunda notícia não precisa ganhar header e footer apenas para imitar a primeira.
Resumo
Antes de escolher as tags, identifique as relações entre os conteúdos.
Parabéns! Você concluiu: Escolher entre article, section e div
Você praticou a revisão de uma estrutura completa. Use autonomia, tema e finalidade do agrupamento para fundamentar suas próximas escolhas.
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
