Hyperlinks, ou simplesmente links, são um dos elementos fundamentais da web, permitindo a navegação entre páginas e recursos na internet. Em HTML, os links são criados com a tag <a>, que significa "anchor" (âncora, em português). Vamos explorar como criar e utilizar hyperlinks em HTML, cobrindo desde o básico até usos mais avançados.

Básico de Hyperlinks

A tag <a>, também conhecida como a âncora, é um dos elementos mais fundamentais e poderosos do HTML, permitindo a criação de hiperlinks que são essenciais para a navegação na web. O atributo href (Hypertext Reference) é o coração dessa tag, definindo o destino para onde o link levará o usuário quando clicado. Vamos mergulhar mais profundamente nos detalhes e usos desse atributo.

Funcionamento do Atributo href

O atributo href especifica a URL (Uniform Resource Locator) destino do link, que pode ser praticamente qualquer coisa na internet ou um local dentro da própria página. Quando um usuário clica em um link, o navegador os leva ao recurso especificado no href.

Destinos Comuns do href

• URLs Externas: Direciona o usuário para outra página web. O exemplo <a href="<https://www.ulbra.br>">Visite o nosso site</a> cria um link para o site da Ulbra. É uma prática comum incluir o protocolo (http:// ou https://) na URL para garantir que o link funcione corretamente.
• Caminhos Relativos: Usado para referenciar recursos dentro do mesmo site sem especificar o domínio completo. Por exemplo, <a href="/contato.html">Contato</a> pode direcionar para a página de contato do site atual.
• Endereços de Email: Ao usar mailto: como valor do href, você cria um link que abre o cliente de email padrão do usuário com um novo email endereçado. Por exemplo, <a href="mailto:[email protected]">Envie-nos um Email</a>.
• Arquivos para Download: Ao vincular diretamente a um arquivo, como um PDF, o navegador pode oferecer a opção de baixá-lo. Por exemplo, <a href="/arquivos/manual.pdf">Baixe o Manual</a>.
• Âncoras para Seções da Página: Utilizando um identificador de fragmento (precedido por #), é possível direcionar o usuário para uma seção específica dentro da mesma página. Por exemplo, <a href="#secao1">Ir para a Seção 1</a>, onde existe um elemento na página com id="secao1".

<aside> 💡 HTTP e HTTPS são protocolos utilizados para a transferência de dados na internet, com a principal diferença entre eles sendo a segurança. Enquanto o HTTP transmite dados em texto claro, facilitando a interceptação por terceiros, o HTTPS adiciona uma camada de segurança por meio da criptografia SSL/TLS, protegendo as informações contra interceptações e modificações indevidas. Isso torna o HTTPS essencial para garantir a segurança e a privacidade de transações online e de informações sensíveis compartilhadas entre o usuário e o site.

</aside>

Boas Práticas e Considerações

• Texto do Link Descritivo: O texto do link (conhecido como texto âncora) deve fornecer uma descrição clara e precisa do destino do link, ajudando na usabilidade e acessibilidade.
• Atributo target para Abrir Links em Nova Aba: Em alguns casos, você pode querer abrir um link em uma nova aba ou janela do navegador. Isso pode ser feito adicionando target="_blank" à tag <a>, por exemplo, <a href="<https://www.ulbra.br>" target="_blank">Visite o nosso site</a>. Note que, por razões de segurança, ao usar target="_blank", também é recomendável incluir rel="noopener noreferrer".
• Acessibilidade: O atributo alt não é usado com links, mas garantir que o texto do link seja descritivo contribui significativamente para a acessibilidade, ajudando usuários de tecnologias assistivas a entender o destino do link.

Abrindo Links em uma Nova Janela/Tab

O atributo target na tag <a> do HTML especifica onde o link será aberto. Ao usar o valor _blank, você instrui o navegador a abrir o link em uma nova janela ou aba, dependendo das configurações do navegador do usuário. Isso é particularmente útil quando você quer manter a página atual aberta enquanto direciona o usuário para outro site ou recurso.