Pular para o conteúdo

HTML semântico

Usar a tag que descreve o que a coisa é, em vez de enfiar tudo em div.

Também aparece como "semântica", "tags semânticas", "header", "nav", "button", "landmark".

No mundo do Design

O Figma chama isso de Nome da camada

HTML tem tags com significado. <button> é um botão, <nav> é navegação, <header> é cabeçalho, <main> é o conteúdo principal. Usar a tag certa é o que se chama de HTML semântico.

<header>
  <nav>...</nav>
</header>
 
<main>
  <h1>Título da página</h1>
  <article>...</article>
</main>
 
<footer>...</footer>

Por que isso não é preciosismo

Um <div onclick> estilizado de botão parece um botão e não é. Ele não recebe foco pelo Tab, não dispara com Enter ou espaço, e o leitor de tela anuncia "grupo" em vez de "botão". Trocar por <button> resolve os três de graça.

Buscador e leitor de tela leem a estrutura pela tag, não pelo visual. Página feita só de div é uma sopa sem hierarquia pra qualquer um dos dois.

O paralelo com o Figma

É o mesmo hábito de nomear camada. Um arquivo com "Frame 427", "Group 12" e "Rectangle 3" funciona pra você hoje e não funciona pra ninguém depois. HTML só de div é o Frame 427 da web.

Veja também div e acessibilidade.

Outros termos de HTML

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.