יש יותר מ-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</h2>
<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:
בצילום המסך השני מופיעים ארבעה תפקידים של ציוני דרך בבלוק הקוד השני. היא משתמשת בציוני דרך סמנטיים, שנקראים בצורה נוחה, <header>, <main>, <footer> ו-<nav> לצורך "ניווט". ציוני דרך מספקים מבנה לתוכן אינטרנט ומבטיחים שתהיה אפשרות לנווט בקלות בקטעים חשובים של תוכן באמצעות המקלדת עבור משתמשים בקורא מסך.
לתשומת ליבך: <header> ו-<footer> הם ציוני דרך עם תפקידים של banner ו-contentinfo בהתאמה, כשהם לא מקוננים בציוני דרך אחרים. ה-AOM של Chrome מציג את זה כך:
כשמעיינים בכלים למפתחים של Chrome, יש הבדל משמעותי בין מודל אובייקט הנגישות כשמשתמשים ברכיבים סמנטיים לבין מודלים אחרים שלא משתמשים בו.
די ברור שהשימוש באלמנטים סמנטיים עוזר לנגישות, ושימוש ברכיבים לא סמנטיים מצמצם את הנגישות. כברירת מחדל, ניתן לגשת ל-HTML. תפקידנו כמפתחים הוא להגן על הטבע הנגיש כברירת מחדל של HTML וגם להבטיח נגישות מרבית. אפשר לבדוק את AOM בכלים למפתחים.
המאפיין role
המאפיין role מתאר את התפקיד שיש לאלמנט בהקשר של המסמך. המאפיין role הוא מאפיין גלובלי — כלומר, תקף לכל הרכיבים — כפי שמוגדר על ידי מפרט ARIA ולא על ידי מפרט whatWG HTML, שבו מוגדר כמעט כל שאר הפרטים בסדרה.
לכל אלמנטים סמנטיים יש תפקיד מרומז, חלקם בהתאם להקשר. כפי שראינו בצילום המסך של כלי הפיתוח לנגישות ב-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> כבר יש התפקיד הזה.