Links

O H de HTML vem de hypertext (hipertexto): texto que leva a outro texto. Um único elemento, a, faz todos os links da web.

O elemento âncora

Um link é feito com o elemento <a>, de anchor (âncora). O atributo href guarda o endereço de destino, e o conteúdo é o texto em que as pessoas clicam. Em <a href="https://developer.mozilla.org/">MDN Web Docs</a>, as palavras MDN Web Docs aparecem sublinhadas, e ativá-las carrega esse endereço. Links funcionam com mouse, com o dedo ou com o teclado: aperte Tab para ir de link em link e Enter para seguir um deles. Sem href, um <a> é só um marcador de lugar e não pode ser alcançado com Tab.

Endereços absolutos e relativos

Uma URL absoluta contém tudo: o esquema (https:), o domínio e o caminho, por exemplo https://example.com/menu/bread.html. Use-a para links para outros sites. Uma URL relativa deixa de fora as partes iguais às da página atual. Numa página em https://example.com/menu/index.html, o link bread.html indica o arquivo na mesma pasta, ../about.html indica uma pasta acima, e /contact.html parte da raiz do site. Links relativos continuam funcionando quando o site inteiro muda para um novo domínio.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Links dentro da mesma página

Dê um id a qualquer elemento, e um link cujo href seja uma cerquilha seguida desse id pula direto para ele. <a href="#hours"> rola até <h2 id="hours">. Um id precisa ser único na página e não pode ter espaços. Artigos longos usam isso para o sumário, e muitos sites põem um link de pular bem no topo (Pular para o conteúdo principal) para que quem usa o teclado não precise passar com Tab pelo menu inteiro em cada página.

E-mail, telefone e downloads

Outros esquemas abrem outros programas. mailto:hello@example.com abre um novo e-mail no programa de e-mail do visitante, e tel:+82212345678 oferece ligar para o número no celular. Acrescentar o atributo download a um link pede ao navegador que salve o arquivo em vez de abri-lo. Esses links são práticos, mas diga no texto do link o que eles fazem, porque ninguém espera que um programa de e-mail apareça de repente.

Novas abas e um bom texto de link

target="_blank" abre o link numa nova aba. Use com moderação: isso tira o controle do visitante, e o botão Voltar deixa de trazê-lo de volta. Quando usar, avise no texto do link, por exemplo (abre em nova aba). O mais importante de tudo é o próprio texto do link. Quem usa leitor de tela costuma abrir uma lista com todos os links da página, e uma lista de dez itens que dizem clique aqui ou leia mais não diz nada. Escreva um texto que faça sentido fora do contexto: Baixe a grade de horários de 2026, e não clique aqui.

Por padrão, os navegadores sublinham os links e os pintam de azul, e mostram os links visitados em roxo. Você pode mudar o estilo dos links com CSS, mas mantenha algo além da cor, como o sublinhado, para que quem não distingue as cores ainda veja quais palavras são links. Quando um link tem o foco do teclado, os navegadores desenham um anel de foco em volta dele; nunca remova esse anel sem colocar um substituto claro no lugar.