Por que semântica importa
Juntando tudo: a mesma página, construída com divs genéricas ou com tags semânticas, parece igual na tela, mas conta histórias muito diferentes para quem não a vê visualmente.
Estudar esta lição interativa →Chegou a hora de ver o contraste lado a lado. As duas versões abaixo mostram, visualmente, quase a mesma coisa (o motor deste curso nem aplicou estilo nenhum além do básico). Mas, para um leitor de tela, para o Google, e para qualquer desenvolvedor lendo o código pela primeira vez, elas contam histórias completamente diferentes.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. As duas versões no mesmo exemplo: a Versão 1 (sopa de divs) não dá pista nenhuma de qual região é qual; a Versão 2 diz o papel de cada parte. Na tela, quase não há diferença.
Repare que, olhando só para as classes CSS (class="topo", class="rodape"), você consegue adivinhar o que é cada coisa. Mas um leitor de tela ignora nomes de classe (eles são só um gancho para estilo visual); ele só entende tags. Sem tags semânticas, a experiência de quem depende de um leitor de tela é ouvir todo o texto em sequência, sem pista nenhuma de qual região é qual e sem atalho para pular direto ao menu ou ao conteúdo principal. Com header, nav, main e footer, ele lista as regiões da página e a pessoa vai direto à que precisa.
É a diferença entre visitar uma cidade com placas de rua e sem nenhuma placa. Nos dois casos, as ruas existem e levam aos mesmos lugares. Mas numa cidade sem placas, todo mundo precisa perguntar ou adivinhar; numa cidade com placas, qualquer pessoa se orienta sozinha. Tags semânticas são as placas do seu HTML.
Semântica correta melhora três coisas ao mesmo tempo, com o mesmo esforço: acessibilidade (leitores de tela navegam por região), SEO (buscadores entendem melhor a estrutura e o que é conteúdo principal) e manutenção (outro programador, ou você mesmo daqui a seis meses, entende o código à primeira vista, sem precisar ler nomes de classe para adivinhar a intenção).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Reescreva com tags semânticas.