Desafio: Post de Blog HTML

Chegou o teste de fogo da semântica aplicada

Até aqui você aprendeu peças: títulos, parágrafos, listas, ênfases, div e span. Agora vai montar o motor completo em um post de blog HTML profissional.

Planeje o post antes de abrir o editor

1. Escolha um tema técnico que demonstre autoridade.
2. Defina um h1 soberano com a ideia central.
3. Crie uma introdução forte em parágrafos claros.
4. Divida o conteúdo em sections com h2.
5. Use h3 apenas para detalhes dentro de um h2.
6. Planeje onde entram ul, ol, dl, strong, em, mark, div e span.

Como montar o post profissional

Header

Use header para título, descrição, categoria e navegação interna.

Main e Article

Use main como conteúdo principal único da página e article para envolver o post completo, pois ele é independente.

Sections

Cada section representa um bloco temático e deve começar com um h2.

Aside

Use aside para bio do autor, links relacionados ou informação complementar, sem roubar o papel do conteúdo principal.

Div e span

Use div apenas como container visual e span para rótulos neutros como Categoria: HTML5.

Sumário clicável por âncoras

Posts longos precisam de navegação interna. Crie links no nav apontando para IDs das seções.

<nav>
  <ul>
    <li><a href="#introducao">Introdução</a></li>
    <li><a href="#semantica">Semântica</a></li>
    <li><a href="#conclusao">Conclusão</a></li>
  </ul>
</nav>

<section id="introducao">
  <h2>Introdução</h2>
</section>

Como entregar um post HTML de elite

• Use apenas um h1 principal.
• Não pule níveis de título.
• Não crie sections sem título.
• Use article apenas para conteúdo independente.
• Use listas reais, não hífens manuais.
• Use strong por importância, não por visual.
• Use div apenas como wrapper visual.
• Use aside como complemento, não como conteúdo principal.
• Inclua autoria e link de voltar ao topo no footer.

Acessibilidade e SEO

Landmarks como header, main, nav e footer ajudam leitores de tela. A hierarquia de títulos, meta description e article ajudam buscadores a entender o conteúdo.

Teste a independência do article

1. Crie um article com duas section.
2. Em cada section, coloque um h2 e um p.
3. Adicione um aside com informação complementar.
4. Imagine remover header e footer globais.
5. Se o article ainda fizer sentido sozinho, a semântica está correta.

Exercício guiado

Crie um header com nav, ul e três links de âncora. Depois crie as sections com IDs correspondentes.

Exercício independente

Escolha três conceitos técnicos e organize em uma dl com dt e dd. Dentro de uma descrição, use span para uma categoria visual neutra.

Erros comuns e correções

Você domina o post de blog HTML?

• Consigo justificar por que post de blog deve ser article.
• Consigo criar navegação interna com IDs e âncoras.
• Consigo usar h1, h2 e h3 sem pular níveis.
• Consigo usar ul, ol e dl no mesmo projeto.
• Consigo usar strong, em e mark corretamente.
• Consigo usar div e span sem cair em divite.

15 perguntas para provar domínio

1. Papel de article no post? Conteúdo independente e autossuficiente.
2. Quantos h1 por página? Um principal.
3. Diferença entre strong e b? strong é semântico; b é visual.
4. Função de mark? Destacar relevância contextual.
5. Quando usar ol? Em sequência lógica.
6. Diferença entre head e header? Head é metadado; header é conteúdo introdutório visível.
7. Div possui valor semântico? Não.
8. Função do aside? Conteúdo complementar.
9. O que caracteriza span? Inline, sem quebra de linha.
10. Por que evitar br para espaçamento? Espaço é função do CSS e da estrutura correta.
11. Tag do rodapé? footer.
12. O que é divite? Usar div para tudo.
13. Para que serve id em seção? Âncora interna.
14. Vantagem das listas para acessibilidade? Leitores anunciam quantidade de itens.
15. u deve ser usada para ênfase? Não, parece link.

Acessibilidade, SEO, mercado e manutenção

Acessibilidade

Header, main, nav e footer criam marcos de navegação. Leitores de tela conseguem saltar para o conteúdo principal e entender a estrutura do artigo.

SEO

Buscadores usam h1-h6, meta description e article para entender o tema central, o conteúdo complementar e a organização do post.

Mercado

Este desafio simula a estrutura de templates de blog, CMS, WordPress e páginas corporativas. É uma prova real de arquitetura de informação.

Registre seu post profissional

git status
git add .
git commit -m "aula-12: cria post de blog html profissional"
git push

• git status: mostra arquivos criados ou alterados.
• git add .: adiciona tudo ao staging.
• git commit: cria um marco oficial da aula.
• git push: envia para o GitHub e portfólio.

Evidência para portfólio

• Arquivo post-blog-html.html.
• Print da página renderizada.
• Print do código com article, sections, listas e âncoras.
• Commit no GitHub.
• Explicação curta sobre semântica aplicada.