HTML moderno: estrutura, semântica e acessibilidade
Links conectam documentos e recursos. Um bom link deixa claro para onde leva, funciona com teclado, possui destino válido e não surpreende a pessoa. O elemento correto é <a> com href; sem destino, ele não é um hiperlink funcional.
Texto que faz sentido fora do contexto
Evite dezenas de links chamados “clique aqui”. Prefira “Veja o guia de acessibilidade”, pois leitores de tela podem navegar por uma lista de links. Não repita a URL inteira como texto quando um rótulo humano é mais claro.
<a href="/guias/acessibilidade/">Guia de acessibilidade para a Web</a>Destinos e fragmentos
URLs relativas funcionam dentro do mesmo site; absolutas incluem protocolo e domínio. Fragmentos apontam para um id na própria página. O destino deve existir e o foco precisa chegar a uma região significativa.
<nav aria-label="Nesta página">n <a href="#exemplos">Ir para exemplos</a>n</nav>n<h2 id="exemplos">Exemplos</h2>Nova aba e download
Use target="_blank" com parcimônia e avise quando o comportamento não for esperado. Navegadores modernos tratam essa abertura como noopener, mas declarar rel="noopener" torna a intenção explícita. O atributo download sugere o download e pode sofrer restrições entre origens.
Checklist de qualidade
- O texto explica o destino?
- O foco é visível ao navegar com Tab?
- Links externos, downloads e novas abas são identificáveis?
Pratique agora
Crie uma navegação com três seções internas, um link relativo e um link externo. Teste tudo apenas com teclado.
