Introdução: O que são links?

Os links (ou hiperlinks) são um dos principais recursos da web e permitem que navegadores saltem de uma página para outra ou para diferentes partes de uma mesma página. Eles conectam o conteúdo, facilitando a navegação dos usuários. Se você está começando no desenvolvimento web, entender como criar links internos e externos em HTML 5 é essencial. Neste post, vamos aprender passo a passo como criar e estilizar links, além de entender seus principais atributos.

Antes de começar, recomendo que você tenha alguns conhecimentos prévios sobre como criar uma página HTML e como separar o CSS do HTML:

Lembre-se também de considerar a acessibilidade na criação de links, tema que já abordamos detalhadamente no post Criando Páginas Web Mais Inclusivas.

Diferença entre Links Internos e Links Externos

Os links podem ser classificados em dois tipos principais:

  • Links Internos: Apontam para outra seção da mesma página ou para outras páginas dentro do mesmo site.
  • Links Externos: Apontam para páginas fora do site, como quando você cria um link para outro domínio.

Agora vamos ver cada tipo de link na prática.

Principais Atributos Usados nos Links

Ao criar um link em HTML, o elemento utilizado é a tag <a>. Os principais atributos são:

  • href: Define o destino do link.
  • target: Define como o link será aberto (ex: _blank abre em uma nova aba).
  • title: Mostra um texto explicativo quando o mouse passa sobre o link.
  • rel: Indica a relação entre o documento atual e o documento vinculado, sendo útil principalmente para links externos.

Exemplo de Formatação de Link com CSS

Os links têm um estilo padrão, que muitas vezes não combina com o design moderno dos sites. Vamos aprender como remover o sublinhado padrão e personalizar a aparência dos links.

Exemplo de formatação de links com CSS:

Crie um arquivo chamado index.html e insira o código abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Link</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Exemplo de Link Formatado</h1>
    <a href="https://vivendodeprogramacao.com.br">Visite o Vivendo de Programação</a>
</body>
</html>

Crie um arquivo chamado styles.css e insira o seguinte código:

/* Remove o sublinhado e altera a cor do link */
a {
    text-decoration: none;
    color: #007BFF;
}

/* Quando o usuário passar o mouse sobre o link */
a:hover {
    color: #0056b3;
}

Aqui, removemos o sublinhado do link e aplicamos uma cor personalizada. Quando o usuário passar o mouse sobre o link, a cor mudará para indicar interatividade.

Links Internos na Mesma Página

Um link interno pode ser usado para pular para uma seção específica dentro da mesma página. Isso é útil para navegação em páginas longas.

Exemplo Prático de Link Interno:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Interno Exemplo</title>
</head>
<body>

    <h1>Exemplo de Link Interno</h1>
    <a href="#seção2">Ir para Seção 2</a>
	<!-- CSS Inline adicionado apenas para que o exemplo funcione -->
    <h2 id="seção1" style="border:1px solid black;height:1000px;">Seção 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <h2 id="seção2">Seção 2</h2>
    <p>Proin suscipit sapien at magna gravida, ac luctus est gravida.</p>

</body>
</html>

Ao clicar no link "Ir para Seção 2", a página será rolada automaticamente até o conteúdo que está na seção identificada por id="seção2".

Links para Páginas do Mesmo Site

Quando você quer criar um link para outra página dentro do mesmo site, basta referenciar o nome do arquivo. Vamos usar dois arquivos HTML salvos na mesma pasta.

Exemplo Prático:

index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Principal</title>
</head>
<body>

    <h1>Página Principal</h1>
    <p>Está é a página principal, mais conhecida como <b>index.html</b>.</p>
    <a href="sobre.html">Ir para a Página Sobre</a>

</body>
</html>

sobre.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Sobre</title>
</head>
<body>

    <h1>Página Sobre</h1>
    <p>Esta é a página sobre o nosso site.</p>
    <a href="index.html">Ir para a Página Index</a>
</body>
</html>

Quando o usuário clicar no link "Ir para a Página Sobre" na página principal, ele será direcionado para o arquivo sobre.html, que está salvo na mesma pasta.

Links Externos

Os links externos levam o usuário para fora do seu site, apontando para outro domínio.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Externo</title>
</head>
<body>

    <h1>Link Externo</h1>
    <a href="https://www.vivendodeprogramacao.com.br" target="_blank" rel="noopener noreferrer">Visitar o blog Vivendo de Programação</a>.

</body>
</html>

O atributo target="_blank" faz com que o link seja aberto em uma nova aba, e o rel="noopener noreferrer" é uma prática recomendada para segurança ao abrir links externos.

Conclusão

Criar e entender o uso de links internos e externos em HTML 5 é fundamental para a navegação e estrutura de qualquer site. Através dos exemplos práticos que vimos aqui, você já pode começar a implementar esses links em suas páginas. Além disso, personalizar a aparência dos links com CSS é uma ótima maneira de garantir que seu design seja moderno e funcional.

Lembre-se de testar todos os links no seu navegador e sempre considerar a acessibilidade ao criar sites. Isso vai garantir que todos possam navegar sem problemas. A prática constante vai te ajudar a dominar cada vez mais essas técnicas essenciais!