Links HTML
Links navegam para outras páginas ou partes de uma página. Aprenda a criar links HTML com a tag <a>: href, URLs absolutas vs relativas e alvos.
Os sites contêm diferentes tipos de links que levam diretamente a outras páginas ou permitem navegar até uma parte específica da página. Os links em HTML são chamados de hiperlinks. Eles são definidos com a tag <a>.
Os hiperlinks podem ser aplicados a uma frase, uma palavra, uma imagem ou qualquer elemento HTML.
A cor padrão dos links em HTML é:
- links não visitados: sublinhados e azuis
- links visitados: sublinhados e roxos
- links ativos: sublinhados e vermelhos
Este é o estilo padrão dos links, mas você pode remover o sublinhado ou alterar a cor dos links usando estilos CSS.
Sintaxe
A tag <a> vem em pares: o <a> de abertura indica onde o link deve começar e o </a> de fechamento indica onde o link termina.
Para criar um hiperlink, você deve usar a tag <a> e o atributo href, cujo valor é a URL, ou localização, para onde o link aponta.
Links HTML
<a href="url">your text</a>.Exemplo da tag HTML <a> com o atributo href:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>No exemplo acima, usamos <h2> para definir um subtítulo e a tag <a> para criar um link. Entre as tags <a> e </a> temos o texto W3Docs.com, que o navegador renderiza como um link azul sublinhado. Clicar nele redireciona o usuário para a página inicial do nosso site.
Atributo Target
Para abrir um link em uma nova página, você precisa adicionar target="_blank" ao seu código. O atributo target especifica exatamente onde abrir a página vinculada. Com target="_blank", a página vinculada será aberta em uma nova janela ou em uma nova aba.
Os valores mais comuns para target são:
_self— abre na mesma aba (este é o padrão, por isso raramente é escrito explicitamente)._blank— abre em uma nova aba ou janela.
Links HTML
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Por que rel="noopener noreferrer" é importante
Observe o rel="noopener noreferrer" no link acima. Quando você abre um link com target="_blank", a nova página normalmente pode acessar a página que a abriu por meio da propriedade window.opener. Uma página maliciosa poderia usar isso para redirecionar silenciosamente sua aba original para uma página de phishing — um ataque chamado reverse tabnabbing.
Adicionar rel="noopener" corta essa referência, impedindo que a nova página acesse sua aba. noreferrer faz o mesmo e também impede que o navegador envie o cabeçalho Referer para a nova página. Como regra, sempre adicione rel="noopener noreferrer" sempre que vincular a um site externo com target="_blank".
Atributo ID
Para navegar até uma parte específica da página, use o atributo id.
Veja como fazer isso:
-
Use o atributo
idpara dar um nome à parte da página para onde o usuário deve ser redirecionado ao clicar no link. O valor do atributo pode ser uma palavra ou uma frase que descreva essa parte (se usar uma frase, não deve haver espaços — use underscores no lugar).
Ex.<h2 id="jump">Link example with id attribute</h2>. Usamos o atributoidchamado "jump". -
Crie um hiperlink usando o
iddo destino do link, precedido por um hash (#)
Ex.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Agora vamos ver como isso ficará no código HTML. No exemplo abaixo, role até o link no final, clique nele e você retornará ao topo.
Exemplo da tag HTML <a> com o atributo id:
Exemplo de link com atributo id
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>Você também pode navegar até um id em uma página diferente adicionando o fragmento ao final da URL dessa página. Por exemplo, se a página about tiver um elemento com id="contact", este link abre essa página e rola diretamente até ele:
<a href="/about#contact">Contact us</a>Como Aplicar um Hiperlink a uma Imagem
Para aplicar um hiperlink a uma imagem, basta colocar a imagem dentro da tag <a>. Isso é feito com a tag <img>, que deve ter alguns atributos obrigatórios:
- src - a fonte da imagem
- alt - texto alternativo para a imagem
- width - largura da imagem
- height - altura da imagem
Exemplo das tags <a> e <img> para aplicar um hiperlink a uma imagem:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Imagens HTML serão abordadas em profundidade no próximo capítulo.
Títulos de Links
O atributo title é usado para especificar informações adicionais sobre um elemento. Essas informações são frequentemente exibidas como um texto de dica (tooltip) quando você move o mouse sobre o elemento.
Exemplo de títulos de links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>URLs Absolutas vs. Relativas
O valor que você coloca em href pode ser um de dois tipos de endereço. Conhecer a diferença é uma das partes mais importantes para criar links corretamente.
Uma URL absoluta é o endereço web completo, incluindo o protocolo (https://) e o nome de domínio. Use-a para vincular a uma página em um site diferente:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Uma URL relativa aponta para uma página no mesmo site, descrita em relação à localização da página atual. O navegador preenche o protocolo e o domínio para você. URLs relativas têm algumas variações:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Como escolher:
- Uma
/inicial (um caminho relativo à raiz como/about) sempre começa no topo do seu site, portanto o mesmo link funciona em todas as páginas. Geralmente esta é a escolha mais segura para a navegação do site. ./significa "esta pasta" e../significa "subir uma pasta". Esses caminhos relativos ao documento quebram se você mover a página para uma pasta diferente no futuro, por isso use-os com cuidado.- Use uma URL absoluta completa somente quando o destino estiver em outro domínio.
Consulte HTML URL para uma análise mais detalhada de como as URLs são construídas.
Exemplo de links absolutos e relativos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Links de E-mail e Telefone
O valor de href não se limita a páginas web. Com esquemas de URL especiais você pode abrir o cliente de e-mail do usuário ou, em um telefone, iniciar uma chamada.
Um link mailto: abre um novo e-mail endereçado ao endereço fornecido:
<a href="mailto:[email protected]">Email us</a>Um link tel: permite que usuários de dispositivos móveis toquem para discar um número de telefone:
<a href="tel:+15551234567">Call us</a>Os Atributos rel, download e hreflang
Além de href, target e title, a tag <a> aceita vários outros atributos úteis.
O atributo rel descreve a relação entre a página atual e a página vinculada. Você já viu rel="noopener noreferrer" para segurança. Outro valor comum é rel="nofollow", que instrui os mecanismos de busca a não transferir crédito de ranqueamento para o link:
<a href="https://example.com" rel="nofollow">Sponsored link</a>O atributo download instrui o navegador a baixar o destino em vez de navegar até ele. Você pode atribuir um valor para sugerir um nome de arquivo:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>O atributo hreflang indica o idioma do documento vinculado. Ele não altera o comportamento para os usuários, mas ajuda navegadores e mecanismos de busca a entenderem o destino:
<a href="https://example.fr/" hreflang="fr">French version</a>Para a lista completa de atributos que a tag <a> suporta, consulte a referência da tag HTML <a>.
Acessibilidade: Escreva Textos de Link Descritivos
Usuários de leitores de tela frequentemente navegam de link em link, ouvindo apenas o texto do link fora de contexto. Rótulos vagos como "clique aqui" ou "leia mais" não informam nada sobre para onde o link leva. Escreva textos de link que descrevam o destino por si mesmos:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Mantenha as palavras significativas dentro das tags <a>, certifique-se de que os links pareçam diferentes do texto ao redor e evite usar a URL bruta como texto de link para links importantes.