Docs ejecutables de HTML: Enlaces mailto

Q: ¿Cómo creo un enlace a un correo en HTML?

Usa un enlace cuyo href empiece por mailto: seguido de la dirección: hello@example.com . Al pulsarlo se abre un mensaje nuevo en la aplicación de correo predeterminada del lector.

Q: ¿Cómo añado un asunto a un enlace mailto?

Añádelo como parámetro después de ?: mailto:hello@example.com?subject=Order%20question. Codifica los espacios como %20 y une más parámetros con &, por ejemplo ?subject=Hi&body=Hello.

Q: ¿Cómo envío un enlace mailto a varios destinatarios?

Separa las direcciones con comas: mailto:ana@example.com,bob@example.com. Usa los parámetros cc= y bcc= para las copias: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: ¿Cómo hago clicable un número de teléfono en HTML?

Usa un enlace tel: con el número en formato internacional: +1 555 123 4567 . En los teléfonos inicia una llamada; en el escritorio abre la aplicación de llamadas que haya instalada, si hay alguna.

Cómo crear un enlace a un correo

Empieza el href del enlace con mailto: y la dirección. Al pulsarlo se abre un mensaje nuevo a esa dirección en la aplicación de correo del lector.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

La vista previa no abre otras aplicaciones: al pulsar ahí uno de estos enlaces, muestra la dirección que abriría. En una página real, el primero abre un correo nuevo y el segundo inicia una llamada en un teléfono.

Usa la propia dirección como texto del enlace. Un lector sin aplicación de correo configurada (algo habitual en ordenadores que usan el correo web en el navegador) todavía puede copiarla, y un enlace que solo dice "Escríbenos" lo deja sin salida.

Asunto, cuerpo, cc y bcc

Un enlace mailto puede rellenar más partes del mensaje. Añade parámetros después de un ? y únelos con &, como en la cadena de consulta de una URL:

Parámetro	Rellena	Ejemplo
`subject`	La línea de asunto	`?subject=Order%20question`
`body`	El texto del mensaje	`&body=Hi%20there`
`cc`	Destinatarios en copia	`&cc=sales@example.com`
`bcc`	Destinatarios en copia oculta	`&bcc=log@example.com`

Varios destinatarios van en la parte de la dirección, separados por comas: mailto:ana@example.com,bob@example.com.

Los valores deben ir codificados como URL: un espacio es %20, un salto de línea es %0D%0A, & es %26 y ? es %3F. El script de este ejemplo decodifica cada enlace para que veas lo que recibe la aplicación de correo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

El asunto Order #123 hay que escribirlo Order%20%23123: un # sin codificar terminaría ahí la URL, y el cuerpo se perdería. Tampoco uses + para los espacios. En un enlace mailto, + es un signo más literal, y muchas aplicaciones de correo lo muestran así.

Construir un enlace mailto con JavaScript

Codificar a mano es propenso a errores. encodeURIComponent lo hace por ti. Escribe en los campos y el enlace de abajo se actualiza:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent convierte & en %26 y un salto de línea en %0A; el replace convierte los saltos de línea en la pareja %0D%0A que espera el correo. Deja la parte de la dirección tal como se escribió: @ y , están permitidos ahí sin codificar.

Enlaces de teléfono con tel: y sms:

tel: crea un enlace para llamar con un clic. Escribe el número con el código de país y sin espacios en el href; el texto visible puede tener el formato que quieras.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 funciona desde cualquier país. Un número local como tel:02079460958 solo funciona para quien llama desde dentro de ese país.
Se permiten guiones como separadores (tel:+1-555-123-4567); los espacios no forman parte del formato, así que no los pongas en el href.
sms: abre la aplicación de mensajes. Añadir un mensaje con ?body= funciona en muchas aplicaciones, pero el soporte varía, así que no dependas de ello.
En el escritorio, tel: abre una aplicación de llamadas si hay alguna instalada (como FaceTime o un softphone), y no hace nada en caso contrario.

Safari en iPhone convierte por su cuenta en enlaces los números de teléfono que aparecen en el texto. Si eso rompe algo como un número de pedido, desactívalo con <meta name="format-detection" content="telephone=no">.

Spam y direcciones de correo

Una dirección en un enlace mailto la puede leer cualquier bot que descargue la página. Trucos como escribir hello [at] example [dot] com o montar la dirección con JavaScript frenan a algunos scrapers sencillos, pero también hacen el enlace más difícil de usar. Un formulario de contacto, que se explica en formularios HTML, mantiene la dirección totalmente fuera de la página. Para la mayoría de los sitios, un buen filtro de spam en la bandeja de entrada es la solución más sencilla.

Evita <form action="mailto:...">. Depende de la aplicación de correo del lector, envía los campos codificados como URL y difíciles de leer, y no te da ninguna confirmación de que se haya enviado nada.

Errores comunes

Olvidar mailto:. href="hello@example.com" es un enlace relativo a una página con el nombre de la dirección.
Espacios o # sin codificar en el asunto o el cuerpo. Codifica los valores con %20, %23 o encodeURIComponent.
Usar + para los espacios. Aparece como un signo más.
Un segundo ? en lugar de &. Solo el primer parámetro va después de ?; el resto se une con &.
"Escríbenos" como único texto, lo que deja a quienes usan correo web sin nada que copiar.
Números de teléfono locales en tel:. Incluye el código de país.

Preguntas frecuentes

¿Cómo creo un enlace a un correo en HTML?

Usa un enlace cuyo href empiece por mailto: seguido de la dirección: <a href="mailto:hello@example.com">hello@example.com</a>. Al pulsarlo se abre un mensaje nuevo en la aplicación de correo predeterminada del lector.

¿Cómo añado un asunto a un enlace mailto?

Añádelo como parámetro después de ?: mailto:hello@example.com?subject=Order%20question. Codifica los espacios como %20 y une más parámetros con &, por ejemplo ?subject=Hi&body=Hello.

¿Cómo envío un enlace mailto a varios destinatarios?

Separa las direcciones con comas: mailto:ana@example.com,bob@example.com. Usa los parámetros cc= y bcc= para las copias: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

¿Cómo hago clicable un número de teléfono en HTML?

Usa un enlace tel: con el número en formato internacional: <a href="tel:+15551234567">+1 555 123 4567</a>. En los teléfonos inicia una llamada; en el escritorio abre la aplicación de llamadas que haya instalada, si hay alguna.

¿Por qué mi enlace mailto no hace nada?

El enlace solo le pasa la dirección a la aplicación de correo predeterminada. Si el lector no tiene ninguna configurada, algo habitual en ordenadores que usan correo web, no pasa nada útil. Muestra la dirección como texto del enlace para que se pueda copiar.

Conceptos relacionados