Estação #01

No desenvolvimento web contemporâneo, a obsessão por frameworks de JavaScript e complexidade de estado muitas vezes relega o HTML a um papel secundário. No entanto, para um engenheiro de software que busca excelência em interfaces com React e TypeScript, o HTML não é apenas uma "linguagem de marcação para layout", mas o próprio alicerce sobre o qual toda a experiência do usuário e a inteligência da máquina são construídas.

A transição do HTML visual para o HTML semântico representa uma mudança de paradigma: deixamos de dizer ao navegador como as coisas devem parecer e passamos a declarar o que as coisas são. Este capítulo explora as nuances da semântica moderna e por que ela é inegociável em projetos de alta performance.

O Que é Web Semântica?

A palavra "semântica" refere-se ao estudo do significado. Na Web, isso significa usar elementos HTML que descrevem claramente o seu conteúdo tanto para o desenvolvedor quanto para o navegador e tecnologias assistivas (como leitores de tela).

Antes do HTML5, a estrutura de quase todos os sites era uma cascata interminável de tags <div> com nomes de classes como class="header", class="footer" ou class="nav". Embora visualmente funcionasse, para o navegador, tudo era apenas um "container genérico". A Web Semântica introduziu tags específicas que carregam valor intrínseco.

O Fim da "Divitis"

A "divitis" é a prática de envolver cada elemento em múltiplas tags <div> sem necessidade. No React, isso é comum devido à necessidade de retornar um único elemento raiz em um componente. O uso excessivo de containers genéricos polui o DOM e dificulta a navegação por teclado e por leitores de tela. O HTML moderno nos oferece alternativas que comunicam a hierarquia da informação.

Principais Elementos Semânticos e Seus Casos de Uso

Para construir uma aplicação React profissional, é preciso dominar o vocabulário das tags estruturais. Cada uma possui uma função específica na Árvore de Acessibilidade.

<header> e <footer>

Ao contrário do que muitos pensam, essas tags não são exclusivas do topo e do rodapé da página inteira. Elas representam o cabeçalho e o rodapé de um contexto. Você pode ter um <header> dentro de um componente de <article> para conter o título e a data de publicação, e um <footer> para as informações do autor.

<nav>

Este elemento deve envolver apenas os blocos de links de navegação principal. Se você tem um menu de redes sociais no rodapé, ele pode estar em um <footer>, mas os links que levam às páginas principais do seu sistema devem estar dentro de um <nav>. Isso permite que leitores de tela ofereçam atalhos diretos para a navegação.

<main>

O elemento <main> define o conteúdo central e exclusivo da página. Deve haver apenas um <main> por documento (ou apenas um visível por vez). No React, o <main> geralmente envolve o componente de rotas principal.

<article> vs. <section>

Esta é uma das distinções que mais causa confusão:

• <article>: Representa um conteúdo autônomo e independente. Se você pudesse "recortar" esse conteúdo e colocá-lo em outro site e ele ainda fizesse sentido (como um post de blog, um card de produto ou um comentário), use <article>.
• <section>: Representa um agrupamento temático de conteúdo. Geralmente deve conter um título (h1-h6). Use <section> para dividir um documento em capítulos ou um painel de dashboard em áreas funcionais.

<aside>

Usado para conteúdo que é tangencialmente relacionado ao conteúdo principal. Sidebars, caixas de publicidade ou citações em destaque (pull quotes) são candidatos perfeitos para o <aside>.

A Árvore de Acessibilidade (Accessibility Tree)

Quando o navegador carrega o seu HTML, ele cria dois modelos: o DOM (Document Object Model), focado na estrutura e estilo para renderização visual, e a Árvore de Acessibilidade, focada na comunicação com tecnologias assistivas.

Se você usa apenas <div> e <span>, a Árvore de Acessibilidade fica "plana", sem hierarquia. Ao usar tags semânticas, você define Landmarks (pontos de referência). Um usuário cego, por exemplo, pode pressionar uma tecla para pular diretamente para o <main> ou para o <nav>, economizando o tempo de ouvir todo o conteúdo repetitivo do cabeçalho.

O Papel do ARIA (Accessible Rich Internet Applications)

Embora o HTML semântico resolva 80% dos problemas de acessibilidade, aplicações React complexas (modais, abas, menus dropdown) exigem o uso de atributos aria-*.

• role: Define o papel de um elemento se não houver uma tag nativa (ex: role="dialog" para um modal).
• aria-label: Fornece um nome acessível para elementos que não possuem texto visível (ex: um botão que tem apenas um ícone).

Regra de Ouro: A melhor regra de ARIA é não usar ARIA. Se existir uma tag HTML nativa que cumpra a função (como <button> em vez de <div role="button">), use a tag nativa.

Semântica e SEO no Mundo das SPAs

Muitos desenvolvedores acreditam que o Google não consegue indexar aplicações React (SPAs) corretamente. Embora os bots tenham evoluído, eles ainda priorizam a estrutura.

Hierarquia de Títulos (H1-H6)

A hierarquia de títulos não serve para definir o tamanho da fonte (isso é papel do CSS), mas para definir a importância e a relação dos dados. Deve haver apenas um <h1> por página, representando o assunto principal. Os subtópicos seguem a ordem lógica: <h2>, seguido por <h3>, e assim por diante. Pular níveis (ex: de h2 para h4) quebra a estrutura lógica para motores de busca.

Texto Alternativo em Imagens

O atributo alt em tags <img> é crucial. Para o SEO, ele ajuda o motor de busca a entender o contexto da imagem. Para a acessibilidade, ele descreve a imagem para quem não pode vê-la. Se a imagem for puramente decorativa, use alt="" para que o leitor de tela a ignore.

Integrando Semântica no React com TypeScript

No React, temos o desafio de manter a semântica enquanto criamos componentes reutilizáveis.

O Uso de Fragments (<>)

Para evitar a criação de <div> desnecessárias apenas para agrupar elementos, utilize o React.Fragment ou a sintaxe curta <> ... </>. Isso garante que o componente retorne seus elementos filhos diretamente no DOM, mantendo a estrutura limpa.

const ListaDePosts: React.FC = () => {
  return (
    <>
      <h2>Últimas Notícias</h2>
      <section>
        {posts.map(post => <CardPost key={post.id} {...post} />)}
      </section>
    </>
  );
};

Tipando Propriedades de Tags Nativas

Ao criar componentes que envolvem tags HTML (como um Button ou um Input customizado), é boa prática estender as interfaces nativas do React com TypeScript. Isso permite que seu componente aceite todas as propriedades padrão de HTML e atributos de acessibilidade automaticamente.

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant: 'primary' | 'secondary';
}

const CustomButton: React.FC<ButtonProps> = ({ variant, children, ...props }) => {
  return (
    <button className={`btn-${variant}`} {...props}>
      {children}
    </button>
  );
};

Formulários Modernos: Além do Input

Formulários são o ponto de maior interação e, frequentemente, de maior frustração em termos de acessibilidade.

• <label>: Todo input deve ter um <label> associado via atributo htmlFor (no React). Isso expande a área de clique e permite que leitores de tela anunciem o que o campo espera.

• <fieldset> e <legend>: Use-os para agrupar campos relacionados dentro de um formulário longo (ex: Endereço de Cobrança vs. Endereço de Entrega).

• Tipos de Input: Use os tipos corretos (type="email", type="tel", type="number"). No mobile, isso dispara o teclado virtual correto, melhorando drasticamente a Experiência do Usuário (UX).

Conclusão

O HTML Moderno e a Web Semântica não são "perfumaria" ou tarefas de menor importância. Eles são a prova de que um desenvolvedor compreende como a Web funciona em sua essência. Ao estruturar sua aplicação React com um olhar atento à semântica, você está construindo um produto que é:

1. Acessível: Aberto a todas as pessoas, independentemente de suas capacidades físicas.

2. Encontrável: Amigável aos algoritmos de busca que trazem tráfego e valor ao negócio.

3. Sustentável: Fácil de ler, testar e manter ao longo do tempo.

Lembre-se: o código TypeScript define a lógica, o React gerencia o estado, mas é o HTML que entrega a mensagem. Trate-o com o respeito técnico que ele merece.