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>
    <h2>five words</h2>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h3>seven words</h3>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

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

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

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

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

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

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

עץ נגישות של DOM ללא HTML סמנטי.
איור 1. רשימה של צמתים שהם קישורים או טקסט.
עץ נגישות של DOM עם HTML סמנטי.
איור 2. רשימה של צמתים עם ציוני דרך ברורים.

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

האלמנטים <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. הסמנטיקה של רכיב, או 'תפקיד', חשובה לטכנולוגיות מסייעות, ובמקרים מסוימים גם למנועי חיפוש. משתמשים בטכנולוגיות מסייעות מסתמכים על סמנטיקה כדי לנווט בתוכן ולהבין את המשמעות שלו. התפקיד של האלמנט מאפשר למשתמש לגשת לתוכן שהוא מחפש במהירות, ואולי מה שיותר חשוב, התפקיד מודיע למשתמש בקורא המסך איך לקיים אינטראקציה עם אלמנט אינטראקטיבי אחרי שהוא מקבל פוקוס.

לכל הרכיבים האינטראקטיביים, כמו לחצנים, קישורים, טווחים ותיבות סימון, יש תפקידים מרומזים, כולם מתווספים אוטומטית לרצף המעבר באמצעות מקש Tab במקלדת, ולכולם יש תמיכה בפעולות משתמש צפויות כברירת מחדל. התפקיד המרומז או הערך המפורש 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>.

True.
‫False.