HTML סמנטי ונגישות - מדריך בסיס¶

הרבה מתחילים לומדים HTML ואז כותבים כל דף עם div ו-span בלבד, כי זה עובד. הדפדפן לא מתלונן, הדף נראה בדיוק כמו שרציתם, ואז למה בכלל לטרוח עם תגיות אחרות? התשובה היא ש-HTML לא נכתב רק בשביל הדפדפן, הוא נכתב גם בשביל כל מי שלא "רואה" את הדף בצורה הרגילה - קוראי מסך, מנועי חיפוש, ואפילו אתם עצמכם בעוד חצי שנה כשתנסו להבין מה כתבתם.

מה זה בעצם HTML סמנטי¶

HTML סמנטי הוא פשוט שימוש בתגיות שמתארות את המשמעות של התוכן, ולא רק את המראה שלו. div הוא תגית "ריקה מתוכן" - היא לא אומרת כלום על מה שנמצא בתוכה, היא רק קונטיינר גנרי. לעומת זאת, תגיות כמו header, nav, main, article, section ו-footer אומרות משהו אמיתי על תפקיד התוכן בדף.

<!-- לא סמנטי - אין שום מידע על מה זה -->
<div class="top">
  <div class="menu">...</div>
</div>

<!-- סמנטי - ברור מה זה בלי אפילו לקרוא CSS -->
<header>
  <nav>...</nav>
</header>

התגיות המרכזיות שכדאי להכיר¶

header - החלק העליון של דף או של סקשן, בדרך כלל עם לוגו, כותרת או ניווט.
nav - אזור ניווט, כמו תפריט ראשי או פירורי לחם.
main - התוכן המרכזי של הדף. יש רק main אחד בדף, וזה מה שקורא מסך יכול לקפוץ אליו ישירות.
article - תוכן עצמאי שיכול לעמוד בפני עצמו, כמו פוסט בבלוג או כרטיס מוצר.
section - קיבוץ הגיוני של תוכן בתוך הדף, בדרך כלל עם כותרת משלו.
aside - תוכן משני, כמו סיידבר או תיבת מידע נלווה.
footer - החלק התחתון, בדרך כלל עם קרדיטים, קישורים או פרטי יצירת קשר.

למה זה משנה לקוראי מסך¶

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

היררכיית כותרות - h1 עד h6¶

טעות נפוצה נוספת היא לבחור גודל כותרת לפי איך שהיא נראית ולא לפי המשמעות שלה. h1 אמור להיות כותרת אחת בלבד לדף, שמתארת את הנושא המרכזי שלו. h2 הן כותרות המשנה הראשיות, h3 תת-כותרות בתוכן, וכן הלאה. הכלל החשוב - אסור לדלג רמות. אם אחרי h2 יש h4 בלי h3 באמצע, קורא מסך שמנווט לפי היררכיית כותרות מתבלבל, כי המבנה נשבר.

<!-- לא נכון - דילוג מ-h2 ישר ל-h4 -->
<h2>תגובות משתמשים</h2>
<h4>תגובה של דניאל</h4>

<!-- נכון - היררכיה רציפה -->
<h2>תגובות משתמשים</h2>
<h3>תגובה של דניאל</h3>

תגיות לטפסים - label זה לא אופציונלי¶

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

<!-- לא נגיש - אין קשר תכנותי בין הטקסט לשדה -->
<span>אימייל</span>
<input type="email" />

<!-- נגיש - הקשר ברור וגם לחיצה על הטקסט ממקדת את השדה -->
<label for="email">אימייל</label>
<input id="email" type="email" />

בונוס - זה גם עוזר ל-SEO¶

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

איך מתרגלים את זה בלי להשתגע¶

הדרך הכי טובה היא פשוט לשאול את עצמכם, לפני כל div שאתם מוסיפים - "יש תגית סמנטית שמתארת את זה יותר טוב?". אחרי כמה פרויקטים זה הופך לאינסטינקט, ואתם כבר לא צריכים לחשוב על זה בכלל.

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

לסיכום¶

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

יש לכם דף שכולו div ואתם רוצים עזרה להפוך אותו לסמנטי? תשאלו בדיסקורד.

הצטרפו לקהילה בדיסקורד