📚 Documentação: Hyperlinks em HTML

(Baseado no Capítulo 10 do Curso de HTML do Prof. Gustavo Guanabara)

1. O Que São Hyperlinks?

• Definição: Elementos que conectam páginas da web, permitindo navegação entre documentos, sites ou downloads.
• Analogia: Como "portais" entre páginas na internet.
• Tag HTML: <a> (âncora).

2. Sintaxe Básica

<a href="URL">Texto do Link</a>

• href: Atributo obrigatório que define o destino (URL).
• Exemplo:

  <a href="https://github.com">Visite o GitHub</a>
  

3. Tipos de Links

a) Links Internos

• Apontam para páginas do mesmo site.
• Exemplo:

  <a href="sobre.html">Sobre Nós</a>
  

b) Links Externos

• Apontam para outros sites (use URL completa).
• Exemplo:

  <a href="https://google.com">Google</a>
  

c) Links para Download

• Usam os atributos download e type.
• Exemplo:

  <a href="manual.pdf" download="manual.pdf" type="application/pdf">Baixar PDF</a>
  

4. Atributos Importantes

5. Valores do Atributo target

• _blank: Abre em nova aba/janela.
• _self: Abre na mesma aba (padrão).
• _parent: Abre no frame pai.
• _top: Ignora todos os frames.

Exemplo:

<a href="https://youtube.com" target="_blank">Abrir YouTube em nova aba</a>

6. Navegação entre Pastas

• ./: Pasta atual.
• ../: Volta uma pasta.
• Exemplo:

  <a href="../projetos/portfolio.html">Portfólio</a>
  

7. Media Types (Tipos de MIME)

São identificadores que dizem ao navegador que tipo de arquivo está sendo vinculado ou baixado.

Principais Tipos:

Como Usar?

• Em links de download:

  <a href="manual.pdf" download="manual.pdf" type="application/pdf">Baixar PDF</a>
  

• Em tags como <link> (para CSS):

  <link rel="stylesheet" href="estilo.css" type="text/css">
  

Onde Encontrar a Lista Completa?

• Lista Oficial da IANA.

8. Boas Práticas

✅ Use rel="external" para links externos.
✅ Sempre prefira https:// em URLs.
✅ Para downloads, nomeie o arquivo no atributo download.

9. Exercícios Práticos

1. Link Simples:

   <a href="contato.html">Fale Conosco</a>
   

2. Link com Target:

   <a href="https://linkedin.com" target="_blank" rel="external">LinkedIn</a>
   

3. Download de Imagem:

   <a href="foto.jpg" download="minha-foto.jpg" type="image/jpeg">Baixar Foto</a>
   

🔍 Explicação Detalhada: Atributo target

O atributo target em links HTML (<a>) controla onde o conteúdo do link será aberto. Vamos entender cada valor:

1. target="_blank"

• O que faz? Abre o link em uma nova aba/janela do navegador.
• Quando usar?
  • Para links externos (evita que o usuário saia do seu site).
  • Exemplo:

    <a href="https://google.com" target="_blank">Abrir Google</a>
    

• Dica: Combine com rel="noopener noreferrer" para segurança (evita ataques de tabnabbing).

💡 Ataques de tabnabbing, que é uma forma de phishing que ocorre quando um invasor rouba suas informações de login ao hackear uma aba do seu navegador enquanto você está logado, é importante tomar precauções como verificar se há elementos suspeitos em e-mails, não compartilhar informações pessoais, usar um serviço de isolamento de navegador e confirmar a mensagem com o remetente.
Veja mais no artigo sobre o assunto.

2. target="_self"

• O que faz? Abre o link na mesma aba (comportamento padrão se target não for especificado).
• Quando usar?
  • Navegação interna no site (ex: menu de páginas).
  • Exemplo:

    <a href="sobre.html" target="_self">Sobre Nós</a>
    

3. target="_parent"

• O que faz? Abre o link no frame pai (útil em páginas com framesets).
• Contexto:
  • Se a página estiver dentro de um <iframe>, o link abrirá no frame que o contém.
  • Exemplo:

    <a href="pagina2.html" target="_parent">Voltar ao Frame Pai</a>
    

4. target="_top"

• O que faz? Ignora todos os frames e abre o link no contexto completo da janela.
• Quando usar?
  • Quando seu site está dentro de um iframe e você quer "escapar" dele.
  • Exemplo:

    <a href="home.html" target="_top">Sair do Frame</a>
    

📌 Por Que Usar o Atributo rel?

O atributo rel define a relação entre a página atual e o link. É importante para:

1. Segurança e Performance

• rel="noopener noreferrer":
  • Usado com target="_blank" para evitar vulnerabilidades como tabnabbing.
  • Exemplo:

    <a href="https://site-externo.com" target="_blank" rel="noopener noreferrer">Link Seguro</a>
    

2. SEO e Semântica

• rel="external": Indica que o link é para um site externo.
• rel="nofollow": Diz aos mecanismos de busca para não seguir o link (usado em links patrocinados ou não confiáveis).
• Exemplo:

  <a href="https://exemplo.com" rel="external nofollow">Link Externo</a>
  

3. Navegação entre Páginas

• rel="prev" e rel="next": Para indicar paginação (útil para SEO).

  <a href="pagina2.html" rel="next">Próxima Página</a>
  

📌 Resumo Prático

<!-- Link seguro em nova aba -->  
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Abrir Exemplo</a>  

<!-- Download de imagem -->  
<a href="foto.png" download="foto.png" type="image/png">Baixar Imagem</a>  

<!-- Link externo com SEO -->  
<a href="https://outrosite.com" rel="external nofollow">Site Parceiro</a>  

<!-- Link Interno -->  
<a href="sobre.html">Sobre</a>  

<!-- Link Externo -->  
<a href="https://twitter.com" target="_blank" rel="external">Twitter</a>  

<!-- Download media-types -->  
<a href="arquivo.zip" download="arquivo.zip" type="application/zip">Baixar ZIP</a>  

Esses conceitos são essenciais para criar links eficientes, seguros e otimizados para SEO! 🌐

🔗 Recursos Adicionais

• Repositório do Curso
• Playlist no YouTube
• Lista de Media Types (IANA)
• Perigo ao Usar target="_blank" no HTML