Antes de qualquer framework, existe o HTML. E a diferença entre um HTML feito por amador e um feito por profissional quase nunca está no que aparece na tela: está na estrutura por trás. Usar a tag certa para cada propósito é o primeiro hábito que separa quem só "faz funcionar" de quem entrega algo acessível, encontrável e fácil de manter.
O problema da "div soup"
Quando começamos, é tentador resolver tudo com <div>. O resultado é a chamada div soup: páginas onde tudo é uma <div> com uma classe descrevendo o que ela deveria ser. O navegador renderiza igual, mas você jogou fora toda a informação de significado.
<!-- Div soup: funciona, mas não diz nada -->
<div class="topo">
<div class="menu">...</div>
</div>
<div class="conteudo">
<div class="post">...</div>
</div>O mesmo HTML, agora semântico
Tags semânticas descrevem o papel de cada bloco. O leitor de tela, o Google e o próximo dev que abrir o arquivo entendem a página sem adivinhar.
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>Pense em tags como sinalização de um prédio
Uma <div> é uma sala sem placa: para saber o que tem dentro, você precisa entrar. Tags semânticas são as placas — "Entrada", "Conteúdo principal", "Saída". Quem navega de cadeira de rodas (ou com leitor de tela) depende dessas placas para não se perder.
Landmarks e leitores de tela
Tags como <header>, <nav>, <main> e <footer> viram landmarks de acessibilidade. Um usuário de leitor de tela pode pular direto para o <main> sem ouvir o menu inteiro toda vez. Isso é navegação real, não um detalhe estético.
Um caso clássico: use <button> para ações e <a> para navegação. Uma <div onclick> não recebe foco pelo teclado nem é anunciada como botão — você teria que reconstruir manualmente um comportamento que já vem de graça.
SEO e manutenção
Buscadores leem a estrutura semântica para entender hierarquia e relevância. Um <article> com <h1> claro pesa mais do que mil divs aninhadas. E na manutenção: ler <nav> é instantâneo; ler <div class="nav-wrapper-2"> exige investigação.
| Abordagem | Acessibilidade | SEO | Manutenção |
|---|---|---|---|
| Div soup | Ruim (sem landmarks) | Fraco | Difícil |
| HTML semântico | Boa (de graça) | Forte | Clara |
ARIA: só quando o HTML não dá conta
ARIA são atributos (como role e aria-label) que adicionam significado para tecnologias assistivas. A primeira regra do ARIA é: não use ARIA se uma tag nativa resolve. Um <button> já é um botão; escrever <div role="button"> é trabalho extra para reproduzir algo que já existia.
A melhor acessibilidade costuma ser a que você não precisa programar: escolha a tag certa e o navegador faz o resto.
É comum em entrevista pedir para você explicar a diferença entre <section> e <div>, ou por que <button> é melhor que <div onclick>. No dia a dia isso aparece toda vez que um teste de acessibilidade reprova um componente que "parecia" certo na tela.
Conclusão
HTML semântico não é enfeite: é a base que entrega acessibilidade, SEO e legibilidade sem custo adicional. Comece escolhendo a tag pelo significado, recorra ao ARIA só quando necessário, e você já estará codando como profissional. O próximo passo natural é dominar o CSS para posicionar tudo isso.
Before any framework, there is HTML. And the difference between HTML written by an amateur and by a professional is almost never in what shows up on screen: it's in the structure behind it. Using the right tag for each purpose is the first habit that separates those who just "make it work" from those who deliver something accessible, discoverable and easy to maintain.
The "div soup" problem
When we start out, it's tempting to solve everything with <div>. The result is what's called div soup: pages where everything is a <div> with a class describing what it should be. The browser renders it the same, but you've thrown away all the information about meaning.
<!-- Div soup: works, but says nothing -->
<div class="topo">
<div class="menu">...</div>
</div>
<div class="conteudo">
<div class="post">...</div>
</div>The same HTML, now semantic
Semantic tags describe the role of each block. The screen reader, Google and the next dev who opens the file understand the page without guessing.
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>Think of tags as a building's signage
A <div> is a room with no sign: to know what's inside, you have to walk in. Semantic tags are the signs — "Entrance", "Main content", "Exit". Anyone navigating in a wheelchair (or with a screen reader) relies on those signs to avoid getting lost.
Landmarks and screen readers
Tags like <header>, <nav>, <main> and <footer> become accessibility landmarks. A screen reader user can jump straight to <main> without hearing the whole menu every time. That's real navigation, not an aesthetic detail.
A classic case: use <button> for actions and <a> for navigation. A <div onclick> doesn't receive keyboard focus and isn't announced as a button — you'd have to manually rebuild behavior that comes for free.
SEO and maintenance
Search engines read the semantic structure to understand hierarchy and relevance. An <article> with a clear <h1> weighs more than a thousand nested divs. And in maintenance: reading <nav> is instant; reading <div class="nav-wrapper-2"> requires investigation.
| Approach | Accessibility | SEO | Maintenance |
|---|---|---|---|
| Div soup | Poor (no landmarks) | Weak | Hard |
| Semantic HTML | Good (for free) | Strong | Clear |
ARIA: only when HTML isn't enough
ARIA is a set of attributes (like role and aria-label) that add meaning for assistive technologies. The first rule of ARIA is: don't use ARIA if a native tag solves it. A <button> is already a button; writing <div role="button"> is extra work to reproduce something that already existed.
The best accessibility is usually the kind you don't have to program: pick the right tag and the browser does the rest.
Interviews commonly ask you to explain the difference between <section> and <div>, or why <button> is better than <div onclick>. Day to day, it shows up whenever an accessibility test fails a component that "looked" right on screen.
Conclusion
Semantic HTML is not decoration: it's the foundation that delivers accessibility, SEO and readability at no extra cost. Start by choosing the tag for its meaning, reach for ARIA only when necessary, and you'll already be coding like a professional. The natural next step is mastering CSS to position all of this.