Como Criar Links em Página Web: HTML, CSS e JavaScript

Linkar é o primitivo fundamental da web. Três camadas de implementação.

1. HTML: Fundação Semântica (Sempre Comece Aqui)

<a href="https://exemplo.com">Texto do Link</a>

Atributos essenciais:

href: Destino (URL absoluta, caminho relativo, mailto:, tel:, #ancora)
target="_blank": Nova aba — sempre adicione rel="noopener noreferrer"
rel: nofollow, sponsored, ugc (sinais SEO)
title: Tooltip (suplementar, não substitui texto claro)
download: Força download arquivo

Acessibilidade: Texto do link deve descrever destino ("Ver preços" não "Clique aqui").

2. CSS: Estilização Visual e Interação

a { color: #0066cc; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; } a:hover, a:focus { color: #004499; border-bottom-color: currentColor; text-decoration: none; } a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; } /* Indicador link externo */ a[href^="http"]:not([href*="seudominio.com"])::after { content: " ↗"; font-size: 0.8em; opacity: 0.7; }

3. JavaScript: Comportamento Aprimorado

// Progressive enhancement: intercepta para SPA, analytics, confirmação document.querySelectorAll('a[data-confirm]').forEach(link => { link.addEventListener('click', e => { if (!confirm(link.dataset.confirm)) e.preventDefault(); }); }); // Link router SPA (sem reload completo) function navigate(href) { history.pushState(null, '', href); renderApp(); // sua função render } document.querySelectorAll('a[href^="/"]').forEach(link => { link.addEventListener('click', e => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; // nova aba e.preventDefault(); navigate(link.getAttribute('href')); }); });

Tipos Especiais de Link

Tipo	Formato Href	Exemplo
Email	`mailto:email@dominio.com?subject=Oi&body=...`	Links contato
Telefone	`tel:+5511999999999`	Mobile tap-to-call
SMS	`sms:+5511999999999?body=Oi`	Texto pré-preenchido
Âncora	`#secao-id`	Scroll mesma página
WhatsApp	`https://wa.me/5511999999999?text=Oi`	Chat direto

Segurança

Nunca coloque segredos em URLs (logs, referrer, histórico)
Valide/sanitize links gerados por usuários
CSP: diretivas connect-src, navigate-to

HTML faz o trabalho. CSS deixa claro. JS adiciona comportamento. Nessa ordem.

Como Criar Links em Página Web: HTML, CSS e JavaScript

1. HTML: Fundação Semântica (Sempre Comece Aqui)

2. CSS: Estilização Visual e Interação

3. JavaScript: Comportamento Aprimorado

Tipos Especiais de Link

Segurança

Pagers (Bipes)