Links especiais: e-mail, telefone e download

Nas lições anteriores, você aprendeu a criar links de navegação entre páginas e seções. Mas a tag <a> vai além da navegação — ela também permite iniciar ações do dispositivo do usuário: abrir um cliente de e-mail, iniciar uma ligação, enviar uma mensagem de texto e baixar arquivos.

Esses são os links especiais, e cada um deles usa um protocolo diferente no atributo href.

Links de e-mail: o protocolo mailto

O protocolo mailto: instrui o navegador a abrir o cliente de e-mail padrão do dispositivo com o campo "Para" já preenchido:

<a href="mailto:contato@meusite.com">Enviar e-mail</a>

Quando o usuário clica, o sistema operacional abre o programa de e-mail padrão — como Outlook, Apple Mail, Thunderbird ou Gmail — com o destinatário já preenchido.

Parâmetros do mailto: indo além do destinatário

O mailto: aceita uma série de parâmetros que permitem pré-preencher campos do e-mail. Eles funcionam como parâmetros de URL — começam com ? e são separados por &:

subject: assunto pré-definido

<a href="mailto:contato@meusite.com?subject=Dúvida sobre o produto">
  Enviar dúvida sobre o produto
</a>

body: corpo do e-mail pré-escrito

<a href="mailto:contato@meusite.com?body=Olá, gostaria de saber mais sobre...">
  Enviar mensagem
</a>

cc: com cópia para outros destinatários

<a href="mailto:contato@meusite.com?cc=gerencia@meusite.com">
  Enviar com cópia para gerência
</a>

bcc: com cópia oculta

<a href="mailto:contato@meusite.com?bcc=arquivo@meusite.com">
  Enviar com cópia oculta
</a>

Combinando múltiplos parâmetros

<a href="mailto:suporte@meusite.com?subject=Suporte técnico&cc=gerencia@meusite.com&body=Descreva seu problema aqui:">
  Abrir chamado de suporte
</a>

💡 A ordem dos parâmetros não importa — mas o primeiro sempre começa com ? e os demais são separados por &.

Múltiplos destinatários

Para enviar para mais de um endereço no campo "Para", separe os e-mails com vírgula:

<a href="mailto:joao@site.com,maria@site.com?subject=Reunião">
  Convocar João e Maria
</a>

Codificação de caracteres especiais

Espaços e caracteres especiais no mailto: precisam ser codificados para funcionar corretamente na URL. O espaço, por exemplo, deve ser escrito como %20:

<!-- ❌ Pode não funcionar em todos os clientes -->
<a href="mailto:contato@site.com?subject=Minha dúvida">
  Enviar
</a>

<!-- ✅ Com codificação de URL -->
<a href="mailto:contato@site.com?subject=Minha%20d%C3%BAvida">
  Enviar
</a>

Na prática, os navegadores modernos fazem essa conversão automaticamente para caracteres simples. Mas para textos com acentos e caracteres complexos, a codificação explícita garante compatibilidade.

Limitações do mailto

É importante entender o que o mailto: não faz:

• Não garante que o e-mail será enviado — depende de o usuário ter um cliente de e-mail configurado
• Não funciona para usuários que usam apenas webmail (Gmail no navegador, por exemplo) sem configurar como padrão
• Não substitui um formulário de contato para envios automáticos e confiáveis
• Não funciona como um bot de e-mail — é apenas a abertura do cliente

<!-- ✅ Boa prática: oferecer alternativa visível ao endereço -->
<p>
  <a href="mailto:contato@meusite.com">contato@meusite.com</a>
</p>

Exibir o e-mail como texto clicável e visível permite que o usuário copie o endereço manualmente caso não tenha cliente de e-mail configurado.

Links de telefone: o protocolo tel

O protocolo tel: instrui o dispositivo a iniciar uma ligação para o número especificado:

<a href="tel:+5511999998888">Ligar agora</a>

Em dispositivos móveis, toca imediatamente o discador. Em desktops, pode abrir softwares de VoIP como Skype, FaceTime ou o aplicativo de chamadas do sistema.

Formato correto do número

O número deve ser escrito no formato E.164 — o padrão internacional que garante compatibilidade em qualquer país:

+[código do país][código de área][número]

<!-- ✅ Formato E.164 completo — recomendado -->
<a href="tel:+5511999998888">
  (11) 99999-8888
</a>

<!-- ✅ Número fixo com DDD -->
<a href="tel:+551133334444">
  (11) 3333-4444
</a>

<!-- ❌ Sem código do país — menos compatível -->
<a href="tel:11999998888">
  (11) 99999-8888
</a>

💡 Para o Brasil, o código do país é +55. Um número de celular com DDD 11 e número (11) 99999-8888 fica: +5511999998888 — sem espaços, parênteses ou hífens no valor do href. O texto visível do link pode ser formatado normalmente para facilitar a leitura.

Separando href do texto visível

O texto visível do link pode ser formatado de forma legível, independentemente do formato técnico do href:

<!-- href: formato técnico / texto: formato legível -->
<a href="tel:+5511999998888">(11) 99999-8888</a>

<!-- Com indicação de ação -->
<a href="tel:+5511999998888">Ligar: (11) 99999-8888</a>

<!-- Com horário de atendimento -->
<a href="tel:+5511999998888">
  (11) 99999-8888
  <small>(seg. a sex., 9h às 18h)</small>
</a>

Links de SMS: o protocolo sms

O protocolo sms: abre o aplicativo de mensagens do dispositivo com o número já preenchido:

<!-- SMS simples -->
<a href="sms:+5511999998888">Enviar SMS</a>

<!-- SMS com mensagem pré-escrita (varia por sistema operacional) -->
<a href="sms:+5511999998888?body=Olá,%20gostaria%20de%20mais%20informações">
  Enviar mensagem
</a>

⚠️ O suporte ao parâmetro body no sms: varia entre sistemas operacionais e dispositivos. No iOS, o separador é &, no Android costuma ser ?body=. Em casos de compatibilidade ampla, é melhor omitir o body e deixar o usuário digitar a mensagem.

Links para WhatsApp

Embora não seja um protocolo nativo do HTML, o WhatsApp oferece uma URL especial para iniciar conversas:

<!-- Link para WhatsApp (abre no app ou no WhatsApp Web) -->
<a
  href="https://wa.me/5511999998888"
  target="_blank"
  rel="noopener noreferrer"
>
  Falar pelo WhatsApp
</a>

<!-- Com mensagem pré-escrita -->
<a
  href="https://wa.me/5511999998888?text=Olá%2C%20gostaria%20de%20mais%20informações"
  target="_blank"
  rel="noopener noreferrer"
>
  Falar pelo WhatsApp
</a>

O formato é https://wa.me/ seguido do número sem o sinal +, mas com o código do país. Para o Brasil, +55 (11) 99999-8888 vira 5511999998888.

Download de arquivos: o atributo download

O atributo download instrui o navegador a baixar o arquivo referenciado no href em vez de abri-lo:

<!-- Sem valor: usa o nome original do arquivo -->
<a href="relatorio-2026.pdf" download>
  Baixar relatório
</a>

<!-- Com valor: define o nome do arquivo baixado -->
<a href="relatorio-2026.pdf" download="relatorio-anual-2026.pdf">
  Baixar relatório anual
</a>

Tipos de arquivo comuns para download

<!-- PDF -->
<a href="manual.pdf" download="manual-usuario.pdf">
  Baixar manual do usuário (PDF)
</a>

<!-- Imagem -->
<a href="wallpaper-4k.jpg" download="papel-de-parede.jpg">
  Baixar wallpaper (JPG)
</a>

<!-- Planilha -->
<a href="dados.xlsx" download="relatorio-vendas.xlsx">
  Baixar planilha de vendas (XLSX)
</a>

<!-- Arquivo de texto -->
<a href="instrucoes.txt" download>
  Baixar instruções (TXT)
</a>

<!-- Arquivo compactado -->
<a href="projeto.zip" download="projeto-completo.zip">
  Baixar projeto completo (ZIP)
</a>

Limitações do atributo download

Restrição de origem (same-origin)

O atributo download só funciona de forma confiável para arquivos do mesmo domínio que a página. Para arquivos em outros domínios (cross-origin), o navegador pode ignorar o download e abrir o arquivo normalmente:

<!-- ✅ Funciona — arquivo no mesmo domínio -->
<a href="/arquivos/relatorio.pdf" download>Baixar</a>

<!-- ⚠️ Pode não funcionar — arquivo em domínio externo -->
<a href="https://outro-site.com/arquivo.pdf" download>Baixar</a>

Para arquivos externos, o servidor de destino precisa enviar o cabeçalho HTTP Content-Disposition: attachment para forçar o download — isso não é controlável pelo HTML.

Arquivos que o navegador já abre nativamente

Arquivos como PDF, imagens e vídeos são abertos nativamente pelo navegador. Mesmo com download, alguns navegadores podem preferir abrir o arquivo em vez de baixar — especialmente em versões mais antigas.

Informando o usuário sobre o download

Boas práticas para links de download:

<!-- ✅ Indicar o tipo e o tamanho do arquivo -->
<a href="guia.pdf" download="guia-completo.pdf">
  Baixar guia completo (PDF · 2,3 MB)
</a>

<!-- ✅ Usar ícone ou texto indicativo -->
<a href="dados.xlsx" download>
  📥 Baixar planilha de dados (XLSX · 450 KB)
</a>

<!-- ✅ Indicar que é um download com aria-label -->
<a
  href="catalogo.pdf"
  download="catalogo-produtos-2026.pdf"
  aria-label="Baixar catálogo de produtos 2026 em PDF, 1,8 megabytes"
>
  Catálogo de produtos 2026
</a>

Combinando links especiais em uma página de contato

Veja como todos esses links se encaixam em um contexto real:

<section id="contato">
  <h2>Entre em contato</h2>

  <address>

    <!-- E-mail com assunto pré-definido -->
    <p>
      📧 E-mail:
      <a href="mailto:contato@meusite.com?subject=Contato%20pelo%20site">
        contato@meusite.com
      </a>
    </p>

    <!-- Telefone fixo -->
    <p>
      📞 Telefone:
      <a href="tel:+551133334444">(11) 3333-4444</a>
      <small>(seg. a sex., 9h às 18h)</small>
    </p>

    <!-- Celular / WhatsApp -->
    <p>
      📱 WhatsApp:
      <a
        href="https://wa.me/5511999998888?text=Olá%2C%20vim%20pelo%20site"
        target="_blank"
        rel="noopener noreferrer"
      >
        (11) 99999-8888
      </a>
    </p>

  </address>

  <!-- Material para download -->
  <h3>Materiais</h3>

  <ul>
    <li>
      <a href="/arquivos/apresentacao.pdf" download="apresentacao-empresa.pdf">
        📥 Apresentação da empresa (PDF · 3,1 MB)
      </a>
    </li>
    <li>
      <a href="/arquivos/tabela-precos.xlsx" download>
        📥 Tabela de preços atualizada (XLSX · 280 KB)
      </a>
    </li>
  </ul>

</section>

Comparação completa

Resumindo

• mailto: → abre cliente de e-mail; aceita parâmetros subject, cc, bcc e body; exiba também o endereço visível como alternativa
• tel: → inicia ligação; use o formato E.164 com código do país; formate o texto legível separadamente
• sms: → abre app de SMS; suporte a body varia por dispositivo
• WhatsApp → use https://wa.me/ com o número sem +
• download → força download; funciona apenas para arquivos do mesmo domínio de forma confiável; informe o tipo e o tamanho do arquivo ao usuário