{"id":635,"date":"2024-04-19T20:52:27","date_gmt":"2024-04-19T23:52:27","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=635"},"modified":"2025-11-05T23:40:48","modified_gmt":"2025-11-06T02:40:48","slug":"links-html","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/links-html\/","title":{"rendered":"Links HTML"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Links HTML<\/strong>: A World Wide Web<\/strong> \u00e9, por defini\u00e7\u00e3o, uma rede de informa\u00e7\u00f5es interconectadas. A ferramenta que torna essa interconex\u00e3o poss\u00edvel e que permite a navega\u00e7\u00e3o fluida entre recursos \u00e9 o link<\/strong> (ou hiperlink), representado pela tag <a><\/code><\/strong> (\u00e2ncora) em HTML.<\/p>\n\n\n\n

Um link \u00e9 o pilar da usabilidade e da arquitetura web. Neste artigo, vamos explorar em detalhes a tag <a><\/code>, seus atributos essenciais, e como utiliz\u00e1-la para construir p\u00e1ginas eficientes, acess\u00edveis e otimizadas para mecanismos de busca (SEO).<\/p>\n\n\n\n

<\/div>\n\n\n\n

\ud83d\udca1 A Tag <a><\/code>: O Cora\u00e7\u00e3o da Navega\u00e7\u00e3o<\/h2>\n\n\n\n

A tag <a><\/code> define um hiperlink. O \u00fanico atributo verdadeiramente obrigat\u00f3rio para que ela funcione como um link \u00e9 o href<\/code>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Sintaxe B\u00e1sica<\/h3>\n\n\n\n

O link sempre \u00e9 composto pelo texto \u00e2ncora (o conte\u00fado vis\u00edvel) e o destino (href<\/code>):<\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<a href=\"URL_do_destino\">Texto \u00c2ncora Vis\u00edvel<\/a><\/code><\/pre>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
HTML<\/p>\n\n\n\n
<a href=\"https:\/\/thiagorossi.com.br\/blog\">Visite o meu site<\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\nVisite o WEBDEV_THIAGOROSSI<\/a>\n\n\n\n
<\/div>\n\n\n\n
Ao clicar no texto “Visite o meu site”, o navegador busca a URL especificada no href<\/code>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
2. Atributos Essenciais para Controle<\/h3>\n\n\n\n
Al\u00e9m do href<\/code>, os seguintes atributos controlam a experi\u00eancia do usu\u00e1rio e a interpreta\u00e7\u00e3o do link:<\/p>\n\n\n\n
Atributo<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valores Comuns<\/strong><\/td><\/tr><\/thead>
target<\/code><\/strong><\/td>Define onde o link ser\u00e1 aberto.<\/td>_self<\/code> (Padr\u00e3o: mesma aba) e _blank<\/code><\/strong> (Nova aba\/janela).<\/td><\/tr>
title<\/code><\/strong><\/td>Fornece uma dica de ferramenta (tooltip) quando o usu\u00e1rio passa o mouse sobre o link. Importante para acessibilidade.<\/td>Ex: title=\"P\u00e1gina Inicial do Site\"<\/code><\/td><\/tr>
download<\/code><\/strong><\/td>Indica que o recurso deve ser baixado em vez de ser exibido no navegador.<\/td>Se vazio, usa o nome do arquivo. Se preenchido (download=\"relatorio\"<\/code>), sugere esse nome para o arquivo.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Exemplo Completo:<\/strong><\/p>\n\n\n\n
HTML<\/p>\n\n\n\n
<a href=\"[nome_do_arquivo]\" target=\"_blank\" download=\"logo Thiago Rossi\" title=\"Baixar Logo Thiago Rossi\">Baixar Logo Thiago Rossi<\/a><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\nBaixar Logo Thiago Rossi<\/a>\n\n\n\n
<\/div>\n\n\n\n
\ud83d\ude80 Atributo rel<\/code>: A Sem\u00e2ntica do Link (SEO Avan\u00e7ado)<\/h2>\n\n\n\n
O atributo rel<\/code> (relacionamento) especifica a rela\u00e7\u00e3o entre a p\u00e1gina atual e o destino do link. \u00c9 crucial para SEO, pois instrui os mecanismos de busca sobre a natureza do link.<\/p>\n\n\n\n
Valor do rel<\/strong><\/td>Significado<\/strong><\/td>Uso Recomendado<\/strong><\/td><\/tr><\/thead>
nofollow<\/code><\/strong><\/td>Indica aos mecanismos de busca para n\u00e3o seguir<\/strong> o link e n\u00e3o passar “autoridade” (PageRank).<\/td>Links pagos, links em coment\u00e1rios ou links de baixa confian\u00e7a.<\/td><\/tr>
noopener<\/code><\/strong><\/td>(BOA PR\u00c1TICA DE SEGURAN\u00c7A):<\/strong> Usado em links com target=\"_blank\"<\/code> para evitar que a nova aba possa manipular a aba original (phishing).<\/td>Sempre use rel=\"noopener\"<\/code><\/strong> junto com target=\"_blank\"<\/code>.<\/td><\/tr>
ugc<\/code><\/strong><\/td>User-Generated Content (Conte\u00fado Gerado pelo Usu\u00e1rio).<\/strong><\/td>Links em coment\u00e1rios, posts de f\u00f3runs, ou quaisquer \u00e1reas onde o conte\u00fado \u00e9 fornecido por terceiros.<\/td><\/tr>
sponsored<\/code><\/strong><\/td>Indica que o link \u00e9 um an\u00fancio, patroc\u00ednio ou qualquer forma de compensa\u00e7\u00e3o paga.<\/td>Links de afiliados ou publicidade.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\ud83d\uddfa\ufe0f Tipos de Links Pr\u00e1ticos<\/h2>\n\n\n\n
A versatilidade da tag <a><\/code> permite diferentes formas de navega\u00e7\u00e3o:<\/p>\n\n\n\n
<\/div>\n\n\n\n
1. Links de Fragmento (\u00c2ncora Interna)<\/h3>\n\n\n\n
Permite navegar rapidamente para uma se\u00e7\u00e3o espec\u00edfica dentro da mesma p\u00e1gina<\/strong>.<\/p>\n\n\n\n
    \n
  1. Criar o Destino:<\/strong> Use o atributo id<\/code> no elemento de destino: 
    HTML:
    <h2 id=\"secao-contato\">Nossa \u00c1rea de Contato<\/h2><\/code><\/li>\n\n\n\n
  2. Criar o Link:<\/strong> Use o href<\/code> com o s\u00edmbolo de tralha (#<\/code>) seguido do ID:
    HTML:
    <a href=\"#secao-contato\">Ir para o Contato<\/a><\/code><\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
    2. Links de E-mail<\/h3>\n\n\n\n
    Ao inv\u00e9s de uma URL HTTP, voc\u00ea usa o prefixo mailto:<\/code>. Isso abre o programa de e-mail padr\u00e3o do usu\u00e1rio com o destinat\u00e1rio preenchido.<\/p>\n\n\n\n
    Exemplo:<\/strong><\/p>\n\n\n\n
    HTML<\/p>\n\n\n\n
    <a href=\"mailto:contato@thiagorossi.com.br?subject=D\u00favida%20Sobre%20o%20Curso\">Enviar um E-mail<\/a><\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\nEnviar um E-mail<\/a>\n\n\n\n
    <\/div>\n\n\n\n
    <\/div>\n\n\n\n
    3. Links Telef\u00f4nicos<\/h3>\n\n\n\n
    Em dispositivos m\u00f3veis, o prefixo tel:<\/code> permite que o usu\u00e1rio ligue diretamente para o n\u00famero.<\/p>\n\n\n\n
    Exemplo (\u00d3timo para sites mobile):<\/strong><\/p>\n\n\n\n
    HTML<\/p>\n\n\n\n
    <a href=\"tel:+5511999998888\">Ligue Agora: (11) 99999-8888<\/a><\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    \u267f Links HTML e Acessibilidade<\/h2>\n\n\n\n
    Links acess\u00edveis s\u00e3o cruciais para a usabilidade e para usu\u00e1rios que dependem de leitores de tela:<\/p>\n\n\n\n