Links em HTML

Benedito Silva Júnior 17/11/2021

Links são uma das partes fundamentais da web, permitindo a navegação entre páginas e sites. Em HTML, a tag <a> é usada para criar esses links, possibilitando a conexão com outras páginas, documentos, e-mails, arquivos de download, entre outros destinos. Neste post, saiba mais sobre links em HTML.

Estrutura básica da tag <a>

A tag <a> representa um “anchor” (âncora) e é usada para criar links. Ela possui um atributo href que define o destino do link.

Exemplo básico:

<a href="https://www.exemplo.com">Clique aqui para visitar o Exemplo</a>

Neste exemplo:

href define a URL para onde o link levará o usuário.
O texto entre as tags <a> e </a> é o que será exibido e clicável na página.

Atributos comuns da tag <a>

href: Define o destino do link. Pode ser uma URL completa (ex: https://www.exemplo.com), uma URL relativa (ex: /pagina.html), ou um caminho para um arquivo.
target: Define onde o link será aberto. Os valores mais comuns são:
- _self: Abre o link na mesma aba ou janela (valor padrão).
- _blank: Abre o link em uma nova aba.
- _parent: Abre o link na janela pai (para uso em frames).
- _top: Abre o link na janela principal.
title: Exibe um texto descritivo quando o usuário passa o mouse sobre o link.
download: Indica que o link deve ser tratado como um download. Funciona para arquivos como PDF, imagens, vídeos, entre outros.

Exemplo com atributos:

<a href="https://www.exemplo.com" target="_blank" title="Visite o Exemplo">Visite o Exemplo</a>
<a href="arquivo.pdf" download>Baixar PDF</a>

Links internos

Links internos são usados para navegação dentro da mesma página, levando o usuário para seções específicas. Para criar um link interno, adicione um id na tag que deseja referenciar e use #id como o valor de href.

Exemplo:

<a href="#secao1">Ir para a Seção 1</a>

<h2 id="secao1">Seção 1</h2>
<p>Conteúdo da Seção 1.</p>

Neste exemplo, ao clicar em “Ir para a Seção 1”, o navegador rolará a página até o elemento com o id="secao1".

Link para e-mails e telefones

Você pode criar links para iniciar uma nova mensagem de e-mail ou uma chamada telefônica usando os esquemas mailto: e tel: no href.

Exemplo de link para e-mail:

<a href="mailto:exemplo@dominio.com">Envie um e-mail</a>

Exemplo de link para telefone:

<a href="tel:+5511999999999">Ligue para nós</a>

Links de navegação e SEO

Para garantir que os links sejam amigáveis para SEO (Search Engine Optimization), siga estas práticas:

Use texto descritivo para o link. Evite textos como “Clique aqui” e prefira frases que indiquem o conteúdo, como “Veja nossa lista de produtos”.
Adicione o atributo rel="noopener noreferrer" quando usar target="_blank" para segurança e desempenho.
Use URLs amigáveis e de fácil compreensão, se possível.

Estilizando links com CSS

O CSS permite personalizar o estilo dos links. Por padrão, links não visitados são azuis e sublinhados, mas isso pode ser alterado para combinar com o design do site.

Seletores principais:

a: Aplica estilos para todos os links.
a:link: Aplica estilos apenas aos links não visitados.
a:visited: Aplica estilos aos links que já foram clicados.
a:hover: Aplica estilos quando o usuário passa o mouse sobre o link.
a:active: Aplica estilos enquanto o link está sendo clicado.

Exemplo de CSS para links:

a {
    color: #1a73e8;
    text-decoration: none;
}

a:hover {
    color: #d93025;
    text-decoration: underline;
}

a:visited {
    color: #6600cc;
}

Neste exemplo:

Links normais são azuis sem sublinhado.
Ao passar o mouse, os links mudam para vermelho e ficam sublinhados.
Links visitados mudam para um roxo escuro.

Exemplo completo de links em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Links em HTML</title>
    <style>
        a {
            color: #1a73e8;
            text-decoration: none;
        }

        a:hover {
            color: #d93025;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <h1>Exemplo de Links em HTML</h1>

    <!-- Link externo -->
    <p><a href="https://www.exemplo.com" target="_blank" title="Visite o Exemplo">Visite o Exemplo</a></p>

    <!-- Link interno -->
    <p><a href="#secao1">Ir para a Seção 1</a></p>

    <!-- Link de download -->
    <p><a href="arquivo.pdf" download>Baixar PDF</a></p>

    <!-- Link para e-mail e telefone -->
    <p><a href="mailto:exemplo@dominio.com">Envie um e-mail</a></p>
    <p><a href="tel:+5511999999999">Ligue para nós</a></p>

    <!-- Seção de destino para o link interno -->
    <h2 id="secao1">Seção 1</h2>
    <p>Conteúdo da Seção 1.</p>

</body>
</html>

Outro exemplo prático

Link que abre noutra aba

Quando o link está em uma página armazenada em um diretório específico, podemos utilizar, por exemplo:

 https://www.criandobits.com.br/doacao 
 
 <!--  Procura página index.html no diretório /doacao -->	
 <a href="index.html">Voltar</a>
 
 
 <!--  Procura página index.html no diretório raiz www.criandobits.com.br/ -->	
 <a href="/index.html">Voltar</a>
 
 
 <!--  Procura página index.html no diretório anterior www.criandobits.com.br/ -->	
 <a href="../index.html">Voltar</a> 
 
 
 Se utilizarmos:
 <a href="../../index.html">Voltar</a> 
 
 será gerada uma mensagem de erro, pois não há dois diretórios anteriores a 
 https://www.criandobits.com.br/doacao

Para criar um link para enviar um e-mail utilizamos mailto:

<a href="mailto: contato@criandobits.com.br">Entre em contato conosco!</a>

Os links são essenciais para a navegação web e, com a tag <a> e seus diversos atributos, você pode criar links que direcionam para diferentes destinos, como URLs, e-mails e até arquivos para download.

Além disso, a estilização CSS permite adaptar os links ao design do seu site, proporcionando uma experiência de navegação mais agradável.

QUER TER ACESSO EXCLUSIVO A CURSOS DE PROGRAMAÇÃO, CRIPTOMOEDAS, MARKETING, EMPREENDEDORISMO E MUITO MAIS?
Conheça a Danki Club e tenha acesso a uma infinidade de cursos na área de programação web, Android e IOS. Desenvolvimento de games, Blockchain e criptomoedas. Produtividade, marketing, empreendedorismo e muito mais!
CLIQUE NA IMAGEM ABAIXO E VEJA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits