Links

Tipos de URL

Como você viu no último exemplo, a URL do link é colocada no atributo href. Quando falamos de links, é interessante falar também sobre os tipos de URLs que podem ser usados nos links:

URLs relativas

O caminho delas é relativo à página atual. Ele contém apenas o path do link. Suponha que você esteja na página https://example.com/, e essa página tenha o link abaixo:

<a href="contato">Contato</a>

Nesse caso, o link te levará para a página https://example.com/contato. Já se você estiver na página https://example.com/posts/, o link te levará para a página https://example.com/posts/contato. Use ../ para subir um nível de diretório a partir do diretório da página onde o link se encontra. Considere o link abaixo:

<a href="../../contato">Contato</a>

Se você estivesse na página https://example.com/posts/setembro/, esse link te levaria para a página https://example.com/contato.

URLs relativas ao diretório raiz do site

Esse tipo de URL sempre é relativa ao diretório raiz do site, mesmo quando não se está nele. Para usar esse tipo de URL, basta colocar uma / no início da URL. Considere o link abaixo:

<a href="/contato">Contato</a>

Suponha que você esteja na página https://example.com/posts/. Esse link te levará para https://example.com/contato. Isso acontece em qualquer outra página do site, porque esse tipo de URL não varia de acordo com a página atual, mas sim de acordo com o diretório raiz do site.

URLs absolutas

Essa URL é uma especificação completa da URL, incluindo o protocolo e o domínio. Por ser uma especificação completa, obviamente, ela sempre levará para a mesma URL, independentemente da página na qual ela for colocada. Exemplo:

<a href="https://example.com/contato">Contato</a>

Você viu três tipos de URL. E qual é a melhor? Na verdade, essa é uma questão que divide as comunidades de web developers. Uns defendem URLs absolutas, enquanto outros defendem URLs relativas. É importante entender as vantagens/desvantagens de cada uma para que você possa tomar a sua decisão:

• URLs absolutas precisam ser alteradas se você trocar de domínio. Isso não acontece com URLs relativas. No entanto, você pode usar variáveis (em PHP, por exemplo) para alterar o domínio apenas uma vez, quando ele mudar, simplificando muito a mudança.
• URLs relativas são mais difíceis de alterar usando Search and Replace (você pode alterar links que não deveriam ser alterados). Já URLs absolutas e URLs relativas ao documento raiz não dão muita margem para erros quando se usa o Search and Replace para fazer alterações.
• URLs absolutas especificam o protocolo, o que pode ser mais uma razão para alterá-las caso você mude de http para https. Porém, novamente, se você especifica o protocolo apenas uma vez, a mudança fica muito fácil de ser feita. URLs relativas não especificam o protocolo, mas se você passar a usar https, é recomendável que você force de alguma forma a mudança do http para o https (usando uma regra no Apache ou de alguma outra forma).

Tooltip

Alguns links exibem uma tooltip quando o usuário passa o mouse sobre eles. Você pode especificar uma tooltip para um link usando o atributo title: <a href="/" title="Leva para a Home">Home</a>.

Tipos de links

• Link para a mesma página: basta deixar o atributo href vazio:
  <a href="">Mesma página</a>
• Links para a página inicial do site:
  <a href="/">Home</a>
• Links para outros domínios: nesse caso, é obrigatório usar URLs absolutas. Exemplo:
  <a href="https://example.com/quem-somos">Quem Somos</a>
• Links para seções da mesma página: você pode linkar para elementos específicos da página. Basta atribuir um ID ao elemento e colocar uma # seguida pelo ID do elemento no final do link. Isso é muito usado em sites One Page. Exemplo:
  <a href="#equipe">Equipe</a>
• Links para seções de outras páginas: você também pode linkar para seções de outras páginas normalmente, basta colocar a # e o ID do link no fim:
  <a href="/futebol/liga-dos-campeoes/#tabela">Tabela</a>
• Use o atributo target="_blank" para abrir links em uma nova janela. Exemplo:
  <a href="https://example.com/" target="_blank">Link para outro domínio</a>
• Use o protocolo tel: para criar links que fazem chamadas telefônicas. Elas são usadas para fazer ligações quando você está usando o smartphone, ou mesmo quando você está usando o desktop e usa aplicativos que fazem ligações usando VOIP. Exemplo:
  <a href="tel:9999999999">Ligue pra nós</a>
• O atributo hreflang especifica o idioma do recurso linkado. Exemplo:
  <a href="link" hreflang="en-us">Link</a>
• Nem sempre você linka uma página que o usuário deve ver no browser. Você também pode linkar um arquivo para ser baixado pelo usuário. Nesse caso, você pode usar o atributo download para fornecer um nome de arquivo padrão para o arquivo que será salvo. Exemplo:
  <a href="software/windows-10-2018-07-04.zip" download="windows-10.zip">Windows 10</a>
• Você também pode criar links que rodam código Javascript. Porém, em muitos casos, as pessoas marcam um elemento que se comporta como um botão como um link. Ou seja, elas usam o elemento errado: um <a> quando deveriam usar um <button>. De qualquer forma, se de fato você precisar criar um link que execute código Javascript, há 3 formas que podem ser usadas para fazer isso:
  • Usando o protocolo Javascript:
    <a href="javascript:funcao();">Link</a>
  • Usando os atributos href (com uma # como valor) e um atributo que aceite Javascript, como o onclick ou outro event attribute:
    <a href="#" onclick="funcao(); return false;">Link</a>
    Esse segundo método precisa do return false;, porque senão a página vai ser rolada até o topo.
  • A terceira forma é igual ao método anterior, só que com um slug inválido. O slug inválido faz com que a página não role até o topo quando o link é clicado, tornando o return false; dispensável. Exemplo:
    <a href="#!" onclick="funcao();">Link</a>
• Links para enviar e-mails:
  • Uso básico:
    <a href="mailto:contato@example.com">Contato</a>
  • Com Cc e Bcc:
    <a href="mailto:contato@example.com?cc=financeiro@example.com&bcc=diretoria@example.com">Contato</a>
  • Com subject (assunto) e body (corpo da mensagem):
    <a href="mailto:contato@example.com?subject=Assunto&body=Apenas%20uma%20mensagem">Contato</a>
  • Você também pode colocar apenas o protocolo (útil para links de compartilhamento via e-mail):
    <a href="mailto:">Send email</a>
  • Vale lembrar que nem todas as opções especificadas são válidas em todos os clients de e-mail. Os valores devem ser codificados usando URL encoding, como você pode ver no exemplo que definou o corpo da mensagem. Note também que os valores são especificados da mesma forma que os valores dos campos especificados em uma query de uma URL que usa o método GET.
• Links de Whatsapp:
  • Link para um contato: Não coloque hífens, nem espaços, nem parênteses. Coloque apenas os números. Não coloque zeros quando eles estiverem no começo do DDD ou do DDI do número. Exemplo que linka para o Whatsapp (11) 91234-5678:
    <a href="https://wa.me/11912345678">Whatsapp</a>
  • Link para um contato com mensagem pré-preenchida: basta usar o formato anterior, adicionando ?text=textoinicial. O texto deve ser codificado usando URL encoding. Exemplo:
    <a href="https://wa.me/11912345678?text=Tenho%20interesse">Whatsapp</a>