תיעוד HTML עם דוגמאות להרצה: קישורי אימייל (mailto)

Q: איך יוצרים קישור לאימייל ב-HTML?

משתמשים בקישור שה-href שלו מתחיל ב-mailto: ואחריו הכתובת: hello@example.com . לחיצה עליו פותחת הודעה חדשה באפליקציית הדואר של הקורא.

Q: איך מוסיפים נושא לקישור mailto?

הוסיפו אותו כפרמטר שאילתה אחרי ?: mailto:hello@example.com?subject=Order%20question. קודדו רווחים כ-%20, וחברו פרמטרים נוספים עם &, למשל ?subject=Hi&body=Hello.

Q: איך שולחים קישור mailto לכמה נמענים?

הפרידו בין הכתובות בפסיקים: mailto:ana@example.com,bob@example.com. להעתקים השתמשו בפרמטרים cc= ו-bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: איך הופכים מספר טלפון ללחיץ ב-HTML?

משתמשים בקישור tel: עם המספר בפורמט בינלאומי: +1 555 123 4567 . בטלפונים הוא מתחיל שיחה; במחשב הוא פותח את אפליקציית החיוג המותקנת, אם יש כזו.

איך יוצרים קישור לאימייל

התחילו את ה-href של הקישור ב-mailto: ובכתובת. לחיצה עליו פותחת הודעה חדשה לכתובת הזו באפליקציית הדואר של הקורא.

<!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>

התצוגה המקדימה לא פותחת אפליקציות אחרות: לחיצה על אחד הקישורים האלה בה מציגה את הכתובת שהוא היה פותח. בעמוד אמיתי, הראשון פותח אימייל חדש והשני מתחיל שיחה בטלפון.

השתמשו בכתובת עצמה כטקסט הקישור. קורא שאין לו אפליקציית דואר מוגדרת (נפוץ במחשבים שמשתמשים בדואר רשת בדפדפן) עדיין יכול להעתיק אותה, וקישור שכתוב בו רק "Email us" משאיר אותו תקוע.

נושא, גוף, cc ו-bcc

קישור mailto יכול למלא חלקים נוספים של ההודעה. הוסיפו פרמטרים אחרי ? וחברו אותם עם &, כמו מחרוזת שאילתה של URL:

פרמטר	ממלא את	דוגמה
`subject`	שורת הנושא	`?subject=Order%20question`
`body`	טקסט ההודעה	`&body=Hi%20there`
`cc`	נמעני העתק	`&cc=sales@example.com`
`bcc`	נמעני העתק מוסתר	`&bcc=log@example.com`

כמה נמענים נכנסים לחלק הכתובת, מופרדים בפסיקים: mailto:ana@example.com,bob@example.com.

הערכים חייבים להיות מקודדים כ-URL: רווח הוא %20, ירידת שורה היא %0D%0A, & הוא %26 ו-? הוא %3F. הסקריפט בדוגמה הזו מפענח כל קישור כדי שתוכלו לראות מה אפליקציית הדואר מקבלת:

<!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>

את הנושא Order #123 צריך לכתוב Order%20%23123: # חשוף היה מסיים שם את ה-URL, והגוף היה הולך לאיבוד. אל תשתמשו גם ב-+ לרווחים. בקישור mailto, + הוא סימן פלוס מילולי, והרבה אפליקציות דואר מציגות אותו ככזה.

בניית קישור mailto עם JavaScript

קידוד ידני מועד לטעויות. encodeURIComponent עושה אותו בשבילכם. הקלידו בשדות והקישור שלמטה מתעדכן:

<!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 הופך & ל-%26 וירידת שורה ל-%0A; ה-replace הופך ירידות שורה לזוג %0D%0A שאימייל מצפה לו. השאירו את חלק הכתובת כפי שהוקלד: @ ו-, מותרים שם בלי קידוד.

קישורי טלפון עם tel: ו-sms:

tel: יוצר קישור לחיוג בלחיצה. כתבו את המספר עם קידומת המדינה ובלי רווחים ב-href; הטקסט הגלוי יכול להיות מעוצב איך שתרצו.

<!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 עובד מכל מדינה. מספר מקומי כמו tel:02079460958 עובד רק למתקשרים מתוך אותה מדינה.
מותר להשתמש במקפים כמפרידים (tel:+1-555-123-4567); רווחים אינם חלק מהפורמט, אז השאירו אותם מחוץ ל-href.
sms: פותח את אפליקציית ההודעות. הוספת הודעה עם ?body= עובדת בהרבה אפליקציות, אבל התמיכה משתנה, אז אל תסתמכו עליה.
במחשב, tel: פותח אפליקציית חיוג אם מותקנת כזו (כמו FaceTime או טלפון תוכנה), ולא עושה כלום אחרת.

Safari באייפון הופך מספרי טלפון בטקסט רגיל לקישורים בעצמו. אם זה שובר משהו כמו מספר הזמנה, כבו את זה עם <meta name="format-detection" content="telephone=no">.

ספאם וכתובות אימייל

כתובת בקישור mailto קריאה לכל בוט שמוריד את העמוד. טריקים כמו לכתוב hello [at] example [dot] com או להרכיב את הכתובת עם JavaScript עוצרים כמה סורקים פשוטים, אבל גם מקשים על השימוש בקישור. טופס יצירת קשר, שמוסבר ב-HTML forms, מוציא את הכתובת מהעמוד לגמרי. לרוב האתרים, מסנן ספאם טוב על תיבת הדואר הוא הפתרון הפשוט יותר.

הימנעו מ-<form action="mailto:...">. הוא תלוי באפליקציית הדואר של הקורא, שולח את השדות מקודדים כ-URL וקשים לקריאה, ולא נותן שום אישור שמשהו נשלח.

טעויות נפוצות

לשכוח את mailto:. href="hello@example.com" הוא קישור יחסי לעמוד שנקרא על שם הכתובת.
רווחים או # לא מקודדים בנושא או בגוף. קודדו ערכים עם %20, %23 או encodeURIComponent.
שימוש ב-+ לרווחים. הוא מופיע כסימן פלוס.
? שני במקום &. רק הפרמטר הראשון בא אחרי ?; השאר מחוברים עם &.
"Email us" כטקסט היחיד, מה שלא משאיר למשתמשי דואר רשת שום דבר להעתיק.
מספרי טלפון מקומיים ב-tel:. כללו את קידומת המדינה.

שאלות נפוצות

איך יוצרים קישור לאימייל ב-HTML?

משתמשים בקישור שה-href שלו מתחיל ב-mailto: ואחריו הכתובת: <a href="mailto:hello@example.com">hello@example.com</a>. לחיצה עליו פותחת הודעה חדשה באפליקציית הדואר של הקורא.

איך מוסיפים נושא לקישור mailto?

הוסיפו אותו כפרמטר שאילתה אחרי ?: mailto:hello@example.com?subject=Order%20question. קודדו רווחים כ-%20, וחברו פרמטרים נוספים עם &, למשל ?subject=Hi&body=Hello.

איך שולחים קישור mailto לכמה נמענים?

הפרידו בין הכתובות בפסיקים: mailto:ana@example.com,bob@example.com. להעתקים השתמשו בפרמטרים cc= ו-bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

איך הופכים מספר טלפון ללחיץ ב-HTML?

משתמשים בקישור tel: עם המספר בפורמט בינלאומי: <a href="tel:+15551234567">+1 555 123 4567</a>. בטלפונים הוא מתחיל שיחה; במחשב הוא פותח את אפליקציית החיוג המותקנת, אם יש כזו.

למה קישור ה-mailto לא עושה כלום?

הקישור רק מעביר את הכתובת לאפליקציית הדואר שמוגדרת כברירת מחדל. אם לקורא אין כזו, מה שנפוץ במחשבים שמשתמשים בדואר רשת, לא קורה שום דבר מועיל. הציגו את הכתובת כטקסט הקישור כדי שאפשר יהיה להעתיק אותה.

מושגים קשורים