HTML5 semântico: semântica versus sopa de divs

Sopa de divs é uma página construída inteiramente com elementos <div> e <span>. Ela depende de nomes de classes para comunicar sua estrutura, não pode ser compreendida por leitores de tela sem essas classes e não transmite significado aos mecanismos de busca.

Substitua divs sem significado por elementos semânticos que comuniquem sua finalidade. A estrutura agora se documenta por si só e pode ser compreendida sem nenhum CSS.

Os elementos de título (h1-h6) criam uma estrutura de documento. Usuários de leitores de tela navegam pelos títulos. As tecnologias assistivas anunciam o nível na estrutura. Mantenha a hierarquia lógica: h1 para o título da página, h2 para seções principais e h3 para subseções.

O elemento <time> marca datas e horários com um atributo datetime legível por máquinas. Os mecanismos de busca compreendem as datas de eventos, e os leitores de tela podem anunciar datas formatadas.

O elemento <address> envolve as informações de contato do artigo mais próximo ou do documento. Não precisa ser um endereço postal — e-mail, telefone e identificadores de redes sociais também contam.

<figure> envolve conteúdo independente, como imagens, gráficos, exemplos de código ou vídeos. <figcaption> fornece uma legenda semanticamente associada à figura.

<blockquote> marca uma citação extensa. Use o atributo cite para indicar a URL da fonte. O elemento <cite> marca o título de uma obra criativa, como um livro, artigo ou filme.

A combinação <details> + <summary> cria um componente nativo de acordeão/divulgação sem JavaScript. O navegador gerencia automaticamente a abertura e o fechamento, a interação pelo teclado e a acessibilidade.

<mark> representa um texto destacado para referência — como uma ocorrência em um resultado de pesquisa. Semanticamente, ele é diferente de estilizar o texto com a cor amarela usando CSS.

Envolva abreviações e acrônimos com <abbr> e forneça o termo completo no atributo title. Os leitores de tela e os navegadores disponibilizam a forma expandida aos usuários quando eles passam o cursor sobre o elemento.

Ambos continuam sendo úteis. <div> é a escolha certa para um contêiner de bloco genérico sem significado semântico — contêineres de layout e raízes de componentes em React. Use <span> para pontos de aplicação de estilos em linha sem significado semântico.

Qual elemento HTML cria um componente nativo de divulgação recolhível sem exigir JavaScript?

Substitua a sopa de divs por elementos semânticos: cabeçalho, navegação, conteúdo principal, artigo, seção, barra lateral e rodapé. Use o elemento de tempo para datas, figure/figcaption para mídia, details/summary para acordeões e mark para destaques. Reserve div e span para contêineres de layout sem significado semântico.