Links em HTML: âncoras, botões, imagens e nova aba
Guia de links em HTML
Links em HTML: âncoras, links com cara de botão, imagens e nova aba | We.Inc
Crie links HTML que funcionam: links de âncora com rolagem suave sob um cabeçalho fixo, nova aba, links estilizados como botões, links em imagens, mailto, tel e links de download.
Um link HTML é um elemento <a> com um href: <a href="/pricing">See pricing</a>. Aponte o href para uma página, para #id para pular dentro da página, ou para mailto: e tel: para iniciar um e-mail ou uma ligação. Adicione target="_blank" para abrir em nova aba, e use um <button>, não um link, para ações que mudam algo.
Todos os padrões de link de que um site pequeno precisa, cada um com código editável e resultado ao vivo. A demo de links de âncora mostra o problema do cabeçalho fixo e a sua correção de uma linha, e a seção de botões esclarece quando um link deve parecer um botão e quando deve ser um.
Escolha nas seções abaixo o tipo de link de que você precisa.
Edite o exemplo. O quadro de resultado é uma página real, então os links de âncora rolam e os contornos de foco aparecem quando você aperta Tab.
Copie o trecho e troque o endereço e o texto do link pelos seus.
Confira se o texto do link faz sentido sozinho, já que usuários de leitores de tela muitas vezes navegam por uma lista de links sem as palavras em volta.
Escreva um texto de link que diga o destino, como Baixe o cardápio de primavera, e não clique aqui. Isso ajuda quem passa os olhos pela página e ajuda os buscadores a entender a página de destino.
Use caminhos relativos (/contact) para páginas do seu próprio site, assim os links continuam funcionando em um endereço de prévia ou em um domínio novo.
Dê aos links que abrem em nova aba uma indicação no texto, como (abre em nova aba), para ninguém se surpreender quando o botão de voltar não fizer nada.
Mantenha os ids dos links de âncora curtos, em minúsculas e estáveis. Outras pessoas vão salvá-los nos favoritos e compartilhá-los.
Perguntas frequentes
Ainda preciso de rel="noopener" com target="_blank"?
Os navegadores atuais aplicam automaticamente o comportamento de noopener aos links com target="_blank", então a página aberta não consegue acessar a sua por meio de window.opener. Adicionar rel="noopener" continua sendo inofensivo e protege navegadores muito antigos. Adicione também noreferrer se não quiser que o outro site veja qual página enviou o visitante.
Devo usar um link ou um botão?
Use <a href> quando o clique leva a pessoa a um novo endereço que ela poderia salvar nos favoritos ou abrir em nova aba. Use <button> quando o clique faz algo na página atual, como abrir um menu, enviar um formulário ou adicionar ao carrinho. Você pode estilizar qualquer um dos dois para parecer o outro.
Por que meu link de âncora esconde o título embaixo do cabeçalho fixo?
O navegador rola o alvo até o topo da janela, que é justamente onde fica o seu cabeçalho fixo. Adicione scroll-margin-top aos alvos, com a altura do cabeçalho mais um pouco de folga, e o título vai parar logo abaixo dele.
Por que o atributo download não funciona para o meu arquivo?
Os navegadores só respeitam o download para arquivos da mesma origem da página, ou para endereços blob: e data:. Para um arquivo em outro domínio, o link simplesmente o abre, a menos que esse servidor envie um cabeçalho Content-Disposition pedindo ao navegador que o salve.
Como adicionar um assunto a um link mailto?
Adicione como query string: mailto:[email protected]?subject=Booking%20request&body=Hi. Espaços e caracteres especiais precisam ser codificados em porcentagem, então um espaço vira %20.
Anatomia de um link
Um <a> sem href é só um marcador de lugar: não recebe foco pelo teclado e não faz nada ao ser clicado. É o href que o transforma em link. O texto entre as tags é o nome acessível, e em um link de imagem o texto alternativo da imagem cumpre esse papel.
Outros atributos refinam o link. target escolhe onde ele abre, rel descreve a relação com a página de destino (nofollow, noopener, noreferrer, sponsored), download pede ao navegador que salve o arquivo em vez de exibi-lo, e hreflang ou type descrevem o destino.
Botões e links são controles diferentes
Usuários de teclado apertam Enter para seguir um link, e Enter ou Espaço para apertar um botão. Os leitores de tela os anunciam de formas diferentes, e só os links têm um menu de contexto com Abrir em nova aba. Quando um link é usado para uma ação, ou uma div é usada para qualquer um dos dois, parte desses comportamentos desaparece.
O visual é livre. Um link Cadastre-se no cabeçalho pode parecer um botão sólido, e um botão Remover em uma lista pode parecer texto sublinhado comum. Escolha o elemento pelo que acontece e depois estilize como o design pedir.
Deixando os links acessíveis
Os links precisam ser reconhecíveis sem depender só da cor. Um sublinhado resolve isso no texto corrido; em barras de navegação, o layout costuma deixar claro. Mantenha um contorno de foco visível e, se substituir o padrão do navegador, garanta que o novo tenha contraste suficiente.
Evite vários links com o mesmo texto indo para lugares diferentes, como uma fileira de links Leia mais. Escreva textos distintos ou adicione um span visualmente oculto que complete a frase para quem usa leitor de tela.
O link básico
Endereços absolutos, relativos e de fragmento
Caminhos relativos são resolvidos a partir da página atual; um caminho que começa com / parte da raiz do site.
Links de âncora, rolagem suave e cabeçalhos fixos
Dê um id ao alvo e crie um link para ele com #id. scroll-behavior: smooth anima o salto, e scroll-margin-top impede que um cabeçalho fixo cubra o título.
Links de âncora sob um cabeçalho fixo
Clique em um link da barra. Cada seção para logo abaixo do cabeçalho por causa do scroll-margin-top. Apague essa linha para ver o problema que ela resolve.
Abrindo um link em nova aba
target="_blank" com uma indicação visível
Os navegadores atuais já aplicam o noopener, mas mantê-lo não custa nada. noreferrer também esconde o endereço da sua página do outro site.
Links com cara de botão, e botões de verdade
Qual elemento
O clique…
Elemento
Exemplo
Vai para outro endereço
<a href>
Cadastre-se, Ver planos, Ler o guia
Envia um formulário
<button type="submit">
Enviar mensagem, Pagar agora
Muda algo nesta página
<button type="button">
Abrir menu, Adicionar ao carrinho, Mostrar mais
Um link estilizado como botão ao lado de um botão de verdade
Os dois parecem iguais. Só o link pode ser aberto em nova aba; só o botão serve para a ação de um formulário.
Links em imagens
Uma imagem como link
O texto alternativo diz o destino, porque é o único texto do link. Aqui a imagem é um pequeno SVG inline para que a demo funcione offline.
Links de e-mail, telefone e download
mailto e tel
Escreva os números de telefone no href em formato internacional, sem espaços. O texto visível pode ser formatado como você quiser.
O atributo download
O valor, se informado, sugere um nome de arquivo. Só vale para arquivos da sua própria origem ou para endereços blob: e data:.