לינקים (קישורים) הם נושא מרכזי בHTML ובכלל באינטרנט, למעשה לינקים הם אלו שהפכו את האינטרנט למה שהוא. במאמר נעבור על התחביר הנדרש ליצירת לינקים ונדון בפרקטיקה הנכונה ליצירת לינקים.
מהם ליניקים?
לינקים הם היישומים המשמעותיים ביותר באינטרנט, היכולת להפוך טקסט או תמונה או למעשה כל דבר אחר כמעט, לקישור – כלומר שבהקלקה על אותו טקסט תמונה או קובץ יפתח לפנינו קובץ אחר או דף אחר – היא מה שנותנת לאינטרנט את העצמה שלו.
הלינקים מאפשרים לנו לקשר בין דברים באינטרנט, למשל לקשר את המסמך HTML שלנו למסמך HTML אחר או אפי’ לקשר את הדף שלנו לחלק אחר באותו הדף עצמו. כל תוכן אינטרנטי יכול להפוך לקישור כך שבלחיצת עכבר עליו הוא יפנה אותנו לכתובת URL אחרת.
מבנה הקישור (link)
כדי ליצור לינק בסיסי נעטוף את הטקסט או התוכן אותו אנו רוצים להפוך לקישור בתגית <a> בתחילתו ובתגית <a/> בסופו, ונוסיף לו את האטריביוט Hypertext Reference) href) שיכיל את הכתובת אליה אנו רוצים שהקישור יוביל אותנו.
See the Pen basic link by guerrilla.co.il (@guerilla) on CodePen.
הוספת מידע מסייע באמצעות האטריביוט title
אטריביוט נוסף שנרצה להוסיף לקישור שלנו הוא title, ע”י אטריביוט זה ניתן להוסיף לקישור מידע שימושי על הלינק, כמו למשל מה תוכן הדף אליו הוא מפנה וכדומה, המידע הזה יוצג באמצעות בועת מידע כאשר המשתמש יעביר את העכבר על הקישור.
See the Pen basic link title by guerrilla.co.il (@guerilla) on CodePen.
הפיכת תמונה לקישור
אפשר להפוך לקישור גם אלמנטים מסוג בלוק כגון תמונה, באותה הדרך בדיוק בה הפכנו טקסט לקישור. פשוט נעטוף את תגית התמונה <img> בתג <a> פותח ובתג <a/> סוגר.
See the Pen images as link by guerrilla.co.il (@guerilla) on CodePen.
url ונתיבים
url (מאתר משאבים – Uniform Resource Locator) הוא בפשטות מחרוזת טקסט שמייצגת את המיקום של הדף או הקובץ ברשת האינטרנט.
למשל הדף של הפרק על קישורים ב w3schools ממוקם בכתובת הבאה https://www.w3schools.com/html/html_links.asp. אתר אינטרנט מורכב כמו תיקיות בוינדוס המאחסנות קבצים בתוכם (HTML, CSS, Js, PHP) 
משמעות הקישור בדוגמה הוא שתיקיית השורש היא w3schools.com בתוכה יש תיקיה בשם html ובתוכה יש את הדף המוצג לנו שנימשך מהקובץ html_links.asp, כפי שניתן להבין הקו הנטוי (slash) משמש כדי להיכנס לתוך תיקייה ולייבא משם קובץ.
לכן בכדי להוסיף את המיקום המדויק של הקובץ אליו אנו רוצים לקשר לאטריביוט href, נצטרך לפעול ע”פ הכללים להלן:
אם הקובץ אליו אנו רוצים לקשר נמצא באותה תיקיה של המסמך שבו אנו יוצרים את הקישור נשים פשוט את שם המסמך. אם הקובץ אליו אנו רוצים לקשר נמצא בתוך תיקיה הנמצאת באותה התיקייה של המסמך בו אנו יוצרים את הקישור אז נרשום את שם התיקייה קו נטוי ואז את שם המסמך שבתוכה אליו אנו רוצים לקשר.
אם המסמך אליו אנו רוצים לקשר לא מצוי באותה תיקייה של המסמך המקשר ולא בתיקייה שבתוכה אלא בתיקייה קודמת שבתוכה מצוי המסמך שלנו נרשום שתי נקודות (שהמשמעות שלהם אומרת לURL לצאת החוצה מהתיקייה הנוכחית אל תיקיית האם של התיקייה הנוכחית) וקו נטוי ואז את שם המסמך או התיקייה אליה אנחנו רוצים לקשר.
קישור לקטע מסמך
חוץ מקישור לעמודים ניתן בHTML לקשר גם לקטע ספציפי בתוך העמוד, כך שכשהגולש ילחץ על הקישור הוא לא יופנה לתחילת העמוד אלא לקטע מסוים בעמ’ שקבענו מראש.
בכדי לייצר קשיור כזה ראשית נצטרך להוסיף את האטריביוט (אגב אם תלחצו על המילה אטריביוט זה יוביל אתכם לפוסט על תחביר בסיסי בHTML לאמצע הדף לקטע המדבר על האטריביוטים – המחשה מצוינת לנושא בו אנו דנים כרגע) id לאלמנט אליו אנו רוצים שהקישור יפנה, בדרך כלל הגיוני שזה יהיה כותרת.
See the Pen document fragment by guerrilla.co.il (@guerilla) on CodePen.
לאחר מכן על מנת שהקישור יפנה לאותו id נצטרך פשוט לתת כערך בhref את כתובת הדף ובסופה להוסיף סולמית # ובצמוד לסולמית את שם הid כך:
See the Pen document fragment – href by guerrilla.co.il (@guerilla) on CodePen.
שימו לב שהלינק לא מוביל לתחילת הדף אלא לקטע הרצוי באמצע המאמר.
ניתן להשתמש באותה טכנולוגיה על מנת ליצור הפניה לקטע בתוך הדף (ולא לדף חיצוני) במקרה כזה לא צריך לרשום את הurl אלא פשוט לכתוב כערך של הhref סולמית# ושם הid.
See the Pen document fragment reference by guerrilla.co.il (@guerilla) on CodePen.
פרקטיקות קישורים מומלצות
לזרוק קישורים לדף זה קל אבל זה לא מספיק, צריך לדאוג שהם יהיו נגישים לכל הקוראים ללא קשר לתוכן העמוד או לטכנולוגיה בה הם משתמשים.
לדוגמה:
- המשתמשים בקוראי מסך (Screenreader) עשויים לקפוץ מקישור לקישור על הדף ולקרוא את הקישורים ללא קשר לתוכן הטקסט.
- הקוראים החזותיים מרפרפים על הדף במקום לקרוא כל מילה, והעיניים שלהם ימשכו לתכונות הדף הבולטות, כגון קישורים. זה יהיה יעיל עבורם אם טקסט הקישור יתאר את תוכנו ולא יהיה סתם “לחץ כאן” (שימו לב שעד עכשיו במאמר לא עשינו שימוש בפרקטיקות המומלצות)
- מנועי חיפוש משתמשים בטקסט של הקישור על מנת לטרגט את קבצי היעד של הקישור, לכן מומלץ שהטקסט של הקישור לא יהיה שרירותי אלא יתאר את התוכן המקושר.
למשל בניגוד לדוגמאות שעשינו עד כה שלא ענו על המלצות הפרקטיקה הנכונה להלן נדגים איך זה כן צריך להיות.
See the Pen Link best practices by guerrilla.co.il (@guerilla) on CodePen.
טיפים נוספים:
- אל תשימו כתובת URL כקישור, כתובות URL נראות נורא ואיום ועוד יותר גרוע זה כשקורא מסך קורא אותם אות אחרי אות.
- אל תוסיפו לקישור את המילה קישור או לינק, זה מיותר, קוראי מסך מודעים לקורא שמדובר בלינק, וגם הקורא החזותי מבחין שמדובר בקישור כיוון שבדרך כלל קישורים מופעים עם צבע מובחן וקו תחתון.
- שימרו על קישור קצר ככל שניתן, זה מעצבן במיוחד משתמשים הנעזרים בקורא מסך שמאלץ אותם לשמוע את כל התיאור.
- הימנעו ככל האפשר מאותה מילה המפנה כל פעם לכתובת אחרת כמו “לחץ כאן”, “לחץ כאן”, “לחץ כאן”. גולשים הנעזרים בקוראי מסך ישמעו אותה שוב ושוב מחוץ להקשר וזה מפריע.