Hiperlinks HTML

Tipografia / Tutorial HTML5

O que é um hiperlink?

Um hiperlink é um elemento que vincula uma página, arquivo ou recurso na Internet a outro. Ao clicar no hiperlink o visitante vai para o conteúdo especificado. Para criar hiperlinks, utilizamos endereços no formato de URL.

O que é uma URL?

A sigla URL significa Uniform Resource Locator, traduzida como "localizador uniforme de recursos". Trata-se do endereço que identifica um recurso na Internet. Frequentemente, chamamos a URL de "link".

protocolo://subdomínio.domínio:porta/caminho?query#fragmento

Um exemplo real:

https://teste.devarthur.com:80/tipografia.html?busca=123#hiperlinks

Agora, vamos analisar os elementos da URL detalhadamente:

Elemento	Nome	Descrição
`https:`	Protocolo ou scheme	Define as regras de acesso aos recursos da Internet, especificando como os dados são formatados, endereçados e transmitidos.
`teste`	Subdomínio ou subdomain	Parte opcional da URL que pode indicar uma seção específica do site. Subdomínios como `www` frequentemente apontam para a página principal e podem ser omitidos.
`devarthur.com`	Domínio, domain ou hostname	Nome que o navegador usa para localizar o IP correspondente ao servidor.
`:80`	Porta ou port	Número que especifica a porta de comunicação. A porta 80 é padrão para HTTP e geralmente é omitida para simplificar a URL.
`/tipografia.html`	Caminho ou pathname	Especifica o arquivo ou diretório que será acessado.
`?busca=123`	Query	Conjunto de variáveis e parâmetros usados para buscas ou filtragem de dados.
`#hiperlinks`	Fragmento ou hash	Referência a um ponto específico dentro da página.

Como criar links?

Para criar um link, use o elemento <a> com o atributo href. A tag <a> vem do inglês anchor (âncora), e href é a abreviação de hypertext reference (referência do hiperlink).

Exemplo:

Links úteis:
<a href="/tipologia.html">Tipologia</a>,
<a href="/listas.html">Listas</a>,
<a href="/mídia.html">Mídia</a>,

Links externos

Para abrir um link em uma nova aba ou janela, use o atributo target="_blank":

Clique <a href="https://devarthur.com" target="_blank">aqui</a> para acessar meu site.

Compreendendo os links relativos

Os links relativos são usados para criar endereços dinâmicos que dependem do contexto em que a página está sendo acessada. Eles evitam a necessidade de especificar um endereço completo (também chamado de URL absoluta), facilitando a manutenção e movimentação de arquivos dentro de um projeto.

Aqui estão os principais tipos de links relativos:

URL relativa à origem (origin-relative URL):
Omite o endereço do site definindo o caminho a partir do domínio da página atual.
```
<a href="/tutoriais/">URL relativa à origem</a>
```
O navegador buscará o recurso no mesmo domínio e protocolo da página.
URL relativa ao diretório (directory-relative URL):
Especifica o caminho com base na localização do endereço atual. É necessário o uso de ./ para compor a URL relativa.
```
<a href="./blog/">URL relativa ao diretório</a>
```
O ./ refere-se ao diretório atual, enquanto ../ volta um nível na hierarquia.
URL relativa ao esquema (scheme-relative URL):
Omite o protocolo http ou https. Usa o esquema (protocolo) da página atual. Ideal para alternar entre http e https sem especificá-los explicitamente.
```
<a href="//html.devarthur.com">URL relativa ao esquema</a>
```
O esquema será herdado da página atual (http ou https).

Adicionando links de email

Para criar um link que abra o cliente de email padrão do usuário, use o esquema mailto::

<a href="mailto:contato@exemplo.com">Envie um email</a>

Você pode incluir um assunto ou mensagem predefinida na URL:

<a href="mailto:contato@exemplo.com?subject=Olá&body=Gostaria de saber mais informações.">
  Envie um email com assunto
</a>

Adicionando links de telefone

Para criar um link que permita ao usuário ligar diretamente de um dispositivo compatível, use o esquema tel::

<a href="tel:+5511999999999">Ligue para (11) 99999-9999</a>

Esse tipo de link é especialmente útil para smartphones.

Adicionando links de WhatsApp

Para criar um link que abra o WhatsApp com uma mensagem predefinida, use o link https://wa.me/ seguido do número no formato internacional:

<a href="https://wa.me/5511999999999">Converse no WhatsApp</a>

Você também pode adicionar uma mensagem automática para o contato:

<a href="https://wa.me/5511999999999?text=Olá,%20gostaria%20de%20saber%20mais%20sobre%20seus%20serviços.">Converse no WhatsApp com mensagem</a>

Certifique-se de que o número está no formato internacional (código do país + DDD + número).

Origem dos termos do elemento `<a>`:

Termo	Origem	Tradução
`a`	Anchor	Âncora
`href`	Hypertext Reference	Referência do Hiperlink
`target`	Target	Alvo