HTML: a estrutura por trás de toda tela

O que é HTML, sem mistério

HTML significa HyperText Markup Language, Linguagem de Marcação de Hipertexto. Não é uma linguagem de programação (o JavaScript é). O HTML é uma linguagem de marcação: ele diz ao navegador o que cada coisa é. Este texto é um título. Aquilo é um parágrafo. Isso é um botão. Aquela é uma imagem.

O HTML faz isso usando tags. Tags são palavras entre sinais de menor e maior, assim:

<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
<button>Clique aqui</button>

A maioria das tags tem uma abertura (<h1>) e um fechamento (</h1>), com o conteúdo no meio. Algumas poucas, como <img> e <br>, não envolvem conteúdo nenhum e por isso não têm fechamento: são os chamados elementos vazios. É assim que você vai vê-las ao inspecionar qualquer página. Você não precisa decorar todas as tags, existem dezenas, mas precisa entender o princípio: cada elemento na tela tem uma tag que diz o que ele é.

Camadas do Figma = estrutura do HTML

Pense na sua árvore de camadas no Figma. Você tem um frame principal (a página). Dentro dele, um frame de header. Dentro do header, o logo e um menu de navegação. Abaixo, o conteúdo principal. No final, o rodapé.

No HTML, essa mesma hierarquia existe. Veja como a estrutura do Figma e do HTML se espelham:

HTML semântico: quando a estrutura tem significado

Aqui está um conceito que separa quem entende HTML de verdade de quem só conhece por cima. No HTML, você pode usar uma tag genérica chamada <div> para tudo. Um <div> é como um frame sem nome no Figma, funciona, mas ninguém sabe o que aquilo é sem olhar dentro.

O HTML semântico substitui essas tags genéricas por tags com significado. Em vez de um <div> para o cabeçalho, você usa <header>. Em vez de um <div> para a navegação, usa <nav>. Em vez de um <div> para o conteúdo principal, usa <main>.

As tags semânticas mais comuns que você vai encontrar:

• <header> : cabeçalho da página ou de uma seção
• <nav> : menu de navegação
• <main> : conteúdo principal (só pode ter um por página)
• <article> : conteúdo independente, como um post ou uma notícia
• <section> : uma seção temática do conteúdo
• <aside> : conteúdo complementar, como uma barra lateral
• <footer> : rodapé da página ou de uma seção
• <h1> a <h6> : títulos, do mais importante ao menos importante

E por que isso importa para designers?

Por dois motivos grandes. Primeiro: SEO. Os mecanismos de busca usam as tags semânticas para entender do que a página trata. Um <h1> diz ao Google que aquele é o título mais importante da página. Se o dev coloca tudo em <div> com estilo visual de título, o Google até tenta interpretar: os sistemas de busca declaram trabalhar com o HTML que encontram, com ou sem tags semânticas. Mas aí a página deixa de comunicar sua hierarquia de graça. Headings claros ajudam o buscador a entender do que cada parte trata e a exibir melhor a página nos resultados. Só que o próprio Google avisa: HTML semântico não é fator de ranking direto, e trocar <div> por <h1> não sobe posição por si só. O benefício mais garantido está no segundo motivo.

Segundo, e talvez mais importante: acessibilidade. Pessoas que usam leitores de tela, como o NVDA ou o VoiceOver, navegam pelo HTML, não pelo visual. Quando a página usa tags semânticas, o leitor de tela sabe dizer "navegação com 5 links", "conteúdo principal", "rodapé". Quando é tudo <div>, o leitor de tela vê um mar de caixas sem significado. É como tentar se orientar em um prédio onde nenhuma porta tem placa.

HTML semântico é a base da acessibilidade, vamos ver isso mais adiante neste módulo. Ver Acessibilidade →