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

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

משתמשים באלמנט העוגן: Example . href הוא היעד, והטקסט שבין התגיות הוא מה שהקורא לוחץ עליו.

Q: איך מקשרים לחלק מסוים בעמוד?

תנו לאלמנט היעד id, ואז קשרו אליו עם סולמית: FAQ ו- FAQ . מעמוד אחר, הוסיפו את הסולמית ל-URL: .

Q: למה קישור שכתוב עם www מוביל לעמוד הלא נכון?

בלי https:// הדפדפן מתייחס ל-www.example.com כנתיב יחסי באתר שלכם, כך שהקישור מוביל למשהו כמו yoursite.com/www.example.com. כתבו תמיד את הסכמה בקישורים חיצוניים: href="https://www.example.com".

Q: האם תגית a יכולה להכיל div?

כן. ב-HTML5 אלמנט יכול לעטוף תוכן בלוק כמו , כותרת ופסקה, וכך בונים כרטיסים שכולם קישור. הוא לא יכול להכיל קישור אחר, כפתור או כל אלמנט אינטראקטיבי אחר.

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

קישור הוא אלמנט עוגן, <a>, עם מאפיין href. href הוא המקום שאליו הקישור מוביל; התוכן שבין התגיות הוא מה שהקורא לוחץ עליו.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

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

כתובות URL מוחלטות ויחסיות

הערך של href קובע לאן הקישור מוביל. הצורות העיקריות:

`href`	מוביל אל
`https://example.com/page`	URL מוחלט: בדיוק הכתובת הזו
`/about`	`about` בשורש האתר הנוכחי
`about.html`	`about.html` באותה תיקייה כמו העמוד הנוכחי
`../index.html`	`index.html` תיקייה אחת למעלה
`#pricing`	האלמנט עם `id="pricing"` בעמוד הזה
`/help#faq`	החלק `faq` בעמוד אחר באתר הזה
`mailto:hi@example.com`	אימייל חדש באפליקציית הדואר של הקורא
`tel:+15551234567`	שיחת טלפון, במכשירים שיכולים לחייג

השתמשו בכתובות מוחלטות לאתרים אחרים ובנתיבים יחסיים לשורש (/about) בתוך האתר שלכם: הם ממשיכים לעבוד כשהעמוד שמכיל אותם עובר לתיקייה אחרת.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

השורה האחרונה היא באג הקישורים הנפוץ ביותר. בלי https://, הדפדפן קורא את www.wikipedia.org כשם קובץ בתיקייה הנוכחית.

לקישורי אימייל וטלפון יש עמוד משלהם: HTML email links.

קישור לחלק בעמוד

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

כמה פרטים:

ה-id חייב להתאים בדיוק, כולל אותיות גדולות וקטנות. href="#FAQ" לא מוצא את id="faq".
href="#top" ו-href="#" גוללים לראש העמוד גם כשאין אלמנט עם ה-id top.
הסלקטור :target מעצב את החלק שה-URL מצביע אליו כרגע. בעמוד אמיתי הוא מדגיש אותו; התצוגה המקדימה גוללת בלי לשנות את הכתובת שלה, ולכן ההדגשה לא מופיעה בה.
כדי לקשר לחלק בעמוד אחר, הוסיפו את הסולמית ל-URL של אותו עמוד: <a href="/docs/html/table#caption">.

קישורי עוגן מתחת לכותרת דביקה

כותרת עליונה דביקה או קבועה מסתירה את ראש החלק שקופצים אליו. scroll-margin-top על היעדים משאיר לה מקום, ו-scroll-behavior: smooth מנפיש את הקפיצה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

מחקו את השורה scroll-margin-top ולחצו שוב על Two: הכותרת נשארת מוסתרת מאחורי הכותרת העליונה הכהה.

קישורי הורדה

המאפיין download מבקש מהדפדפן לשמור את הקובץ במקום לפתוח אותו. הערך שלו, אם נותנים ערך, הוא שם הקובץ המוצע:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download עובד רק לקבצים מאותו origin כמו העמוד (אותה סכמה, מארח ופורט) ולכתובות data: ו-blob:. לקובץ ב-origin אחר, אפילו בתת-דומיין, דפדפנים מתעלמים ממנו ועוברים לקובץ כמו בקישור רגיל. השרת יכול לכפות הורדה של כל קובץ עם הכותרת Content-Disposition: attachment.

טקסט קישור שיש בו היגיון

משתמשי קוראי מסך עוברים לעיתים קרובות על עמוד קישור אחרי קישור, ושומעים רק את טקסט הקישור. "לחצו כאן" ו"קראו עוד" לא אומרים להם כלום.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

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

כרטיס שלם כקישור

<a> יכול לעטוף תוכן בלוק: כותרת, תמונה ופסקה יכולות להיות כולן קישור אחד. כך בונים כרטיסים לחיצים.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block הופך את כל התיבה ללחיצה, לא רק את הטקסט. שמרו על תוכן קצר בכרטיס, כי קורא מסך מקריא את כולו כשם הקישור. ולעולם אל תשימו בפנים קישור אחר או כפתור: אי אפשר לקנן אלמנטים אינטראקטיביים בתוך <a>.

מאפיינים נוספים של תגית a

מאפיין	מה הוא עושה
`href`	היעד. בלעדיו, `<a>` אינו קישור
`target`	איפה לפתוח אותו; `target="_blank"` פותח לשונית חדשה, ראו פתיחת קישור בלשונית חדשה
`rel`	היחס ליעד: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	לשמור את הקובץ במקום לפתוח אותו
`hreflang`	השפה של העמוד המקושר, כרמז
`referrerpolicy`	כמה מה-URL הנוכחי לשלוח כ-referrer

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

אין סכמה ב-URL חיצוני. href="www.site.com" הוא נתיב יחסי. כתבו https://.
<a href="#"> לפעולת JavaScript. הוא גולל לראש העמוד ומוסיף # ל-URL. אם הלחיצה לא מובילה לשום מקום, השתמשו ב-<button>.
קישור בתוך קישור, או כפתור בתוך קישור. שניהם HTML לא תקין: <a> שני גורם לפרסר לסגור את הראשון מוקדם, ולחיצה על כפתור בתוך קישור אין לה יעד ברור.
רווחים בשמות קבצים. href="my file.html" בדרך כלל עובד כי הדפדפן מקודד את הרווח, אבל my-file.html חוסך את השאלה לגמרי.
"לחצו כאן" כטקסט קישור. תארו את היעד במקום.
אי התאמה באותיות גדולות וקטנות ב-id. #Pricing ו-id="pricing" שונים.

שאלות נפוצות

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

משתמשים באלמנט העוגן: <a href="https://example.com">Example</a>. href הוא היעד, והטקסט שבין התגיות הוא מה שהקורא לוחץ עליו.

מה פירוש href?

Hypertext reference, הפניית היפרטקסט. הוא מכיל את ה-URL שהקישור מפנה אליו: כתובת מלאה, נתיב באותו אתר כמו /about, חלק בעמוד כמו #pricing, או סכמה כמו mailto:.

איך מקשרים לחלק מסוים בעמוד?

תנו לאלמנט היעד id, ואז קשרו אליו עם סולמית: <h2 id="faq">FAQ</h2> ו-<a href="#faq">FAQ</a>. מעמוד אחר, הוסיפו את הסולמית ל-URL: <a href="/help#faq">.

למה קישור שכתוב עם www מוביל לעמוד הלא נכון?

בלי https:// הדפדפן מתייחס ל-www.example.com כנתיב יחסי באתר שלכם, כך שהקישור מוביל למשהו כמו yoursite.com/www.example.com. כתבו תמיד את הסכמה בקישורים חיצוניים: href="https://www.example.com".

האם תגית a יכולה להכיל div?

כן. ב-HTML5 אלמנט <a> יכול לעטוף תוכן בלוק כמו <div>, כותרת ופסקה, וכך בונים כרטיסים שכולם קישור. הוא לא יכול להכיל קישור אחר, כפתור או כל אלמנט אינטראקטיבי אחר.

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