HTML סמנטי

עם יותר מ-100 רכיבי HTML והיכולת ליצור רכיבים מותאמים אישית, יש אינסוף דרכים לסמן את התוכן. אבל דרכים מסוימות – במיוחד מבחינה סמנטית – טובות יותר מאחרות.

סמנטי פירושו "קשור למשמעות". כתיבת HTML סמנטי פירושה שימוש ברכיבי HTML כדי לבנות את התוכן שלך על סמך המשמעות של כל רכיב, ולא על סמך המראה שלו.

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

קטע הקוד הראשון משתמש ב-<div> וב-<span>, שני רכיבים ללא ערך סמנטי.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

אתם יכולים להבין למה המילים האלה מתרחבות? לא ממש.

בואו נשכתב את הקוד הזה עם אלמנטים סמנטיים:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

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

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

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

מודל אובייקטים של נגישות (AOM)

כשהדפדפן מנתח את התוכן שהתקבל, הוא בונה את מודל האובייקטים של המסמך (DOM) ואת מודל האובייקטים של ה-CSS (CSSOM). לאחר מכן הוא גם בונה עץ נגישות. מכשירים מסייעים, כמו קוראי מסך, משתמשים ב-AOM לניתוח ולפירוש של תוכן. ה-DOM הוא עץ שכולל את כל הצמתים במסמך. ה-AOM הוא כמו גרסה סמנטית של ה-DOM.

בואו נשווה את אופן העיבוד של שני מבני המסמכים הבאים בחלונית הנגישות של Firefox:

איור 1. רשימת צמתים שהם כל הקישורים או הטקסט.

איור 2. רשימה של צמתים עם ציוני דרך ברורים.

באיור 2, קיימים ארבעה תפקידים של ARIA בבלוק הקוד השני. היא משתמשת בציוני דרך סמנטיים ששמותיהם <header>, <main>, <footer> ו-<nav> ל'ניווט'. ציוני דרך מספקים מבנה לתוכן באינטרנט ומוודאים שקטעי תוכן חשובים יכולים לנווט באמצעות המקלדת למשתמשים בקורא מסך.

הערה: <header> ו-<footer> הם ציוני דרך, עם התפקידים banner ו-contentinfo בהתאמה, כשהם לא מוצבים בציוני דרך אחרים. דוח AOM של Chrome מציג את הנתונים כך:

איור 3. קטע הקוד הראשון.

איור 4. קטע הקוד השני.

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

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

המאפיין role

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

לכל אלמנטים סמנטיים יש תפקיד מרומז, חלקם בהתאם להקשר. כמו שראינו בצילום המסך של כלי הפיתוח לנגישות ב-Firefox, הרמה העליונה <header>, <main>, <footer> ו-<nav> היו ציוני דרך, ואילו <header> שהוצב ב-<main> היה קטע. בצילום המסך של Chrome מופיעה רשימה של הרכיבים האלה תפקידי ARIA: <main> היא main, <nav> היא navigation, ו-<footer> היא הכותרת התחתונה של המסמך, היא contentinfo. כשהכותרת של המסמך היא <header>, תפקיד ברירת המחדל הוא banner, שמגדיר את הקטע ככותרת האתר הגלובלית. כש-<header> או <footer> בתוך רכיב מקטעים, הם לא תפקיד של 'ציון דרך'. שני הכלים למפתחים אפשר לראות זאת בצילומי מסך.

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

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

באמצעות המאפיין role אפשר לתת לכל רכיב תפקיד, כולל תפקיד שונה מזה שהתג כולל. לדוגמה, ל-<button> יש את התפקיד המשתמע של button. בעזרת role="button", אפשר להפוך כל אלמנט מבחינה סמנטית ללחצן: <p role="button">Click Me</p>.

כשמוסיפים את המאפיין role="button" לרכיב, קוראי מסך מקבלים הודעה שהאלמנט הוא לחצן, אבל המראה או הפונקציונליות של הרכיב לא משתנה. הרכיב button מספק כל כך הרבה תכונות בלי לעשות דבר. הרכיב button נוסף באופן אוטומטי לרצף של סדר הכרטיסיות במסמך. כלומר, כברירת מחדל ניתן להתמקד בו באמצעות המקלדת. הקשה על Enter וגם מקש הרווח מפעילים את הלחצן. ללחצנים יש גם את כל השיטות והמאפיינים שסופקו להם על ידי הממשק HTMLButtonElement. אם לא תשתמשו בלחצן הסמנטי של הלחצן, תצטרכו לתכנת את כל התכונות האלה בחזרה. כל כך הרבה יותר קל לעבור עם <button>.

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

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

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

אלמנטים סמנטיים

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

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

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

בשלב הבא נשתמש באלמנטים סמנטיים כדי ליצור מבנה המסמך.

בדיקת ההבנה

בוחנים את הידע שלכם ב-HTML סמנטי.

תמיד צריך להוסיף את role="button" לרכיב <button>.

לא נכון.

תשובה נכונה! לרכיב <button> כבר יש את התפקיד הזה.

True.

אפשר לנסות שוב.