קישורים

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

התג הפותח, המאפיינים והתג הסוגר, שמתויגים ברכיב HTML.

תג העוגן <a> יחד עם המאפיין href יוצרים היפר-קישור. קישורים הם עמוד השדרה של האינטרנט. דף האינטרנט הראשון הכיל 25 קישורים, עם הכיתוב "כל מה שמופיע באינטרנט לגבי W3 מקושר ישירות או בעקיפין למסמך הזה". סביר להניח שכל מה שמופיע באינטרנט לגבי W3 מקושר ישירות או בעקיפין מהמסמך הזה גם כן!

כוחו של האינטרנט והתג <a>, התרחבו באופן ניכר מאז שטים ברנרס-לי פרסם את ההסבר הראשון הזה באוגוסט 1991. קישורים מייצגים חיבור בין שני משאבים, שאחד מהם הוא המסמך הנוכחי. אפשר ליצור קישורים באמצעות האפשרויות <a>, <area>, <form> ו-<link>. למדתם על <link>, ותגלו טפסים בקטע נפרד. יש גם קטע למידה מלא על הטופס. בפעילות זו תלמדו על תג <a> בעל אות אחת, לא פשוט.

המאפיין href

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

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

הקישור הראשון כולל כתובת URL מוחלטת, שניתן להשתמש בה בכל אתר בעולם כדי לנווט לדף הבית של MLW. כתובות URL מוחלטות כוללות פרוטוקול, במקרה הזה https://, ושם דומיין. כשהפרוטוקול נכתב פשוט בשם //, מדובר בפרוטוקול מרומז ופירושו "להשתמש באותו פרוטוקול שבו משתמשים כרגע".

כתובות URL יחסיות לא כוללות פרוטוקול או שם דומיין. הם "יחסיים" לקובץ הנוכחי. MLW הוא אתר שכולל דף אחד, אבל סדרת ה-HTML הזו כוללת כמה קטעים. כדי לקשר מהדף הזה לשיעור המאפיינים, נעשה שימוש בכתובת URL יחסית <a href="../attributes/">Attributes</a>.

הקישור השני הוא רק מזהה של קטע קישור, והוא יקושר לרכיב עם id="teachers",, אם יש כזה, בדף הנוכחי. דפדפנים תומכים גם בשני קישורים 'בחלק העליון של הדף': לחיצה על <a href="#top">Top</a> (לא תלוי-רישיות) או לחיצה על <a href="#">Top</a> תוביל לגלילה של המשתמש לראש הדף, אלא אם כן יש רכיב עם המזהה top שמוגדר באותה אות רישית.

MLW הוא מסמך ארוך למדי. כדי לשמור את הגלילה, אפשר להוסיף קישור חזרה לחלק התחתון של הקטע #teachers:

<a href="#top">Go to top.</a>

הקישור השלישי משלב את שני הערכים: הוא מכיל כתובת URL מוחלטת ואחריה מקטע קישור. כך אפשר לקשר ישירות לקטע בכתובת ה-URL המוגדרת. במקרה הזה, הקטע #teachers בדף הבית של MLW. דף ה-MLW ייטען, ואז הדפדפן יגלול לקטע למורים בלי לשלוח את הקטע בבקשת ה-HTTP.

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

הקישור mailto לא חייב לכלול כתובת אימייל, אבל אפשר לאכלס אותה יחד עם הטקסט cc, bcc, subject ו-body. כברירת מחדל, תיפתח תוכנת אימייל. אפשר לאכלס את הנושא וגוף האימייל מראש בלי כתובת אימייל, כדי לאפשר למבקרים להזמין את החברים שלהם. בקישור שלנו, בכותרת התחתונה של המסמך, נכלול את כתובת ה-URL של הרישום:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

סימן השאלה (?) מפריד בין mailto: לבין כתובת האימייל, אם יש כזו, לבין מונח השאילתה. בתוך השאילתה, תווי אמפרסנד (&) מפרידים בין השדות, וסימן שווה (=) משווים בין כל שם שדה לבין הערך שלו. המחרוזת כולה מקודדת באחוזים, וזה חובה אם הערך של href לא מצוטט במירכאות או אם הערכים כוללים מירכאות.

כל האפליקציות נפתחות כשהמשתמש לוחץ על קישור ל-tel, מקיש עליהן או לוחץ על Enter, תלויות במערכת ההפעלה, באפליקציות שהותקנו ובהגדרות של המשתמש במכשיר. ב-iPhone עשויים להיפתח FaceTime, אפליקציית הטלפון או אנשי הקשר. שולחן עבודה של Windows עשוי לפתוח את Skype, אם הוא מותקן.

יש כמה סוגים אחרים של כתובות URL, כמו blobs וכתובות URL של נתונים (ראו דוגמאות בדיון המאפיינים download). באתרים מאובטחים (אלה שפועלים מעל https), ניתן ליצור ולהפעיל פרוטוקולים ספציפיים לאפליקציה באמצעות registerProtocolHandler().

כדאי ליידע את המשתמש אם כוללים קישורים שסביר להניח שיפתחו אפליקציות מותקנות אחרות. ודאו שהטקסט בין התג הפותח לבין התג הסוגר מציין למשתמש את סוג הקישור שהוא עומד להפעיל. ניתן להשתמש בסלקטורים של מאפייני CSS, כמו [href^="mailto:"], [href^="tel:"] ו-[href$=".pdf"] כדי לטרגט סגנונות לפי סוג האפליקציה.

מקורות מידע שניתן להוריד

צריך לכלול את המאפיין download כאשר href מפנה למשאב שניתן להוריד. הערך של מאפיין ההורדה הוא שם הקובץ המוצע לשמירת המשאב במערכת הקבצים המקומית של המשתמש. הכלי SVGOMG, הכלי לאופטימיזציית SVG, משתמש במאפיין download כדי להציע שם קובץ ל-blob שניתן להורדה שכלי האופטימיזציה יוצר. לאחר האופטימיזציה של hal.svg, תג הפתיחה של קישור ההורדה של SVGOMG דומה לזה:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

יש גם הדגמה של <canvas> שיוצרת כתובת URL של נתוני PNG שניתן להוריד.

כדי לקשר למשאב שניתן להורדה, צריך לכלול את כתובת ה-URL של הנכס כערך של מאפיין href ואת שם הקובץ המוצע שאפשר להשתמש בו במערכת הקבצים של המשתמש כערך של המאפיין download.

הקשר הגלישה

המאפיין target מאפשר להגדיר את הקשר הגלישה לניווט באמצעות קישורים (וגם שליחת טופס. לדיון לגבי ארבע מילות המפתח שאינן תלויות-רישיות, שמסומנות בקו תחתון, נדונו באמצעות הרכיב <base>. הם כוללים את ברירת המחדל _self, שהיא החלון הנוכחי, _blank, שפותח את הקישור בכרטיסייה חדשה, _parent. זהו ההורה אם הקישור הנוכחי מקונן באובייקט או ב-iframe, ו-_top, שהוא ההורה ברמה העליונה ביותר, שימושי במיוחד אם הקישור הנוכחי מקונן מאוד. _top ו-_parent זהים ל-_self אם הקישור לא נמצא בתצוגת עץ. המאפיין target לא מוגבל לארבעת מונחי המפתח הבאים: אפשר להשתמש בכל מונח.

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

קישור עם target="_blank" ייפתח בכרטיסייה חדשה עם שם אפס. בכל לחיצה על הקישור תיפתח כרטיסייה חדשה ללא שם. כך אפשר ליצור כרטיסיות חדשות רבות. יש יותר מדי כרטיסיות. לדוגמה, אם המשתמש לוחץ על <a href="registration.html" target="_blank">Register Now</a> 15 פעמים, טופס ההרשמה ייפתח ב-15 כרטיסיות נפרדות. כדי לפתור את הבעיה הזו צריך לספק שם הקשר לכרטיסייה. אם כוללים את המאפיין target עם ערך תלוי אותיות רישיות (למשל <a href="registration.html" target="reg">Register Now</a>), הלחיצה הראשונה על הקישור תפתח את טופס ההרשמה בכרטיסייה חדשה ב-reg. לחיצה על הקישור הזה 15 פעמים נוספות תטען מחדש את הרישום בהקשר הגלישה של reg, בלי לפתוח כרטיסיות נוספות.

המאפיין rel קובע אילו סוגי קישורים הקישור יוצר ומגדיר את הקשר בין המסמך הנוכחי למשאב שמקושר בהיפר-קישור. ערך המאפיין חייב להיות רשימה שמופרדת ברווחים עבור אחד או יותר מערכי המאפיינים של rel שנתמכים על ידי התג <a>.

ניתן לכלול את מילת המפתח nofollow אם לא רוצים שעכבישים יעקבו אחר הקישור. ניתן להוסיף את הערך external כדי לציין שהקישור מפנה לכתובת URL חיצונית, ושאינו דף בדומיין הנוכחי. מילת המפתח help מציינת שההיפר-קישור יספק עזרה תלוית הקשר. אם תעבירו את העכבר מעל קישור עם הערך הזה של rel, יוצג סמן עזרה במקום סמן המצביע הרגיל. אין להשתמש בערך הזה רק כדי להשיג את סמן העזרה. במקום זאת, השתמשו ב-CSS cursor. ניתן להשתמש בערכים prev ו-next בקישורים שמפנים למסמך הקודם ולמסמך הבא בסדרה.

כמו <link rel="alternative">, המשמעות של <a rel="alternative"> תלויה במאפיינים אחרים. חלופות לפיד RSS יכללו גם את הערכים type="application/rss+xml" או type="application/atom+xml, פורמטים חלופיים יכללו את המאפיין type, ותרגומים יכללו את המאפיין hreflang. אם התוכן שבין התג הפותח לבין התג הסוגר כתוב בשפה שאינה שפת המסמך הראשית, צריך לכלול את המאפיין lang. אם השפה של המסמך בהיפר-קישור היא בשפה אחרת, יש לכלול את המאפיין hreflang.

בדוגמה הזו, אנחנו כוללים את כתובת ה-URL של הדף המתורגם כערך של הפרמטר href, rel="alternate" כדי לציין שזו גרסה חלופית של האתר. במאפיין hreflang מציינים את שפת התרגומים:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

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

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

אחת מהדרכים לעקוב אחרי אינטראקציות של משתמשים היא לשלוח פינג לכתובת URL כשמשתמש לוחץ על קישור. אם המאפיין ping קיים, הוא כולל רשימה מופרדת ברווחים של כתובות URL מאובטחות (שמתחילות ב-https) ושאליהן יישלחו הודעה או פינג, אם המשתמש מפעיל את ההיפר-קישור. הדפדפן שולח בקשות POST עם הגוף PING לכתובות ה-URL הרשומות כערך המאפיין ping.

טיפים בנושא חוויית המשתמש

  • חשוב תמיד על חוויית המשתמש בעת כתיבת HTML. הקישורים צריכים להכיל מספיק מידע על המשאב המקושר, כדי שהמשתמשים ידעו על מה הם לוחצים.
  • בתוך קטע טקסט, יש לוודא שהמראה של הקישורים שונה מספיק מהטקסט שמסביב, כדי שמשתמשים יוכלו לזהות בקלות קישורים משאר התוכן. כך אפשר להבטיח שהצבע לבדו הוא לא הדרך היחידה להבדיל בין טקסט לתוכן מסביב.
  • כלול תמיד סגנונות התמקדות. כך נווטי המקלדת יכולים לדעת איפה הם נמצאים כאשר הם עוברים על התוכן באמצעות כרטיסיות.
  • התוכן שמופיע בין <a> הפותח לבין </a> הסוגר הוא השם הנגיש כברירת מחדל של הקישור, ועליו ליידע את המשתמשים לגבי היעד או המטרה של הקישור. אם התוכן של קישור הוא תמונה, התיאור ב-alt הוא השם הנגיש. גם אם השם הנגיש מגיע מהמאפיין alt או מקבוצת מילים בתוך קטע טקסט, חשוב לוודא שהוא מספק מידע על יעד הקישור. הטקסט של הקישור צריך להיות תיאורי יותר מאשר "לחצו כאן" או "מידע נוסף". זה חשוב למשתמשים בקורא המסך ולתוצאות של מנוע החיפוש!
  • אין לכלול תוכן אינטראקטיבי כמו <button> או <input> בתוך קישור. גם אין להציב קישור בתוך <button> או <label>. דף ה-HTML עדיין יוצג, אבל הצבת רכיבים בכתובת שאפשר להתמקד בהם ושאפשר ללחוץ עליהם בתוך רכיבים אינטראקטיביים יוצרת חוויית משתמש גרועה.
  • אם המאפיין href קיים, הקשה על מקש Enter תוך התמקדות ברכיב <a> תפעיל אותו.
  • הקישורים אינם מוגבלים ל-HTML. ניתן להשתמש ברכיב a גם בתוך קובץ SVG, וכך ליצור קישור עם המאפיינים 'href' או 'xlink:href'.

המאפיין links מחזיר רכיבים HTMLCollection שתואמים ל-a ו-area שיש להם מאפיין href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

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

בדיקת ההבנה

בחינת הידע שלכם בנושא קישורים.

מה עושה קישור nofollow?

הופך את הקישור לבלתי ניתן ללחיצה.
אפשר לנסות שוב.
מבקש מהסורקים לא לעקוב אחר הקישור.
נכון!
הופך את הביקור שלכם באתר ללא מעקב.
אפשר לנסות שוב.

אילו קישורים יעבירו אותך לראש הדף?

#start
אפשר לנסות שוב.
#
נכון!
#top
נכון!