בצד היכולות החדשות והמשופרות של HTML 5 כמו למשל Canvas שמאפשר ציור של ממש, הוא מכיל גם תגיות סמנטיות. תגיות סמנטיות הן תגיות שלאו דווקא משפיעות על אופן הצגת התוכן אלא משפיעות הרבה יותר על אפשרות להבנת התוכן וההקשר של התוכן על ידי מכונה.
כיום, אם אני רואה גוש של טקסט – למשל:
<p>
רחוב ז'בוטינסקי 2224, פתח תקוה
</p>
אם אני בן אדם סביר, אני יכול להבין שמדובר בכתובת. אך אם אני מכונה, כמו למשל הבוט של גוגל שסורק את העמוד, אין לי דרך פשוטה וקלה להבין שמדובר בכתובת. אך אם אשתמש בתגית הסמנטית (שקיימת כבר בתקן HTML 4) של address:
<address>
רחוב ז'בוטינסקי 2224, פתח תקוה
</address>
יהיה קל למכונה להבין שמדובר בכתובת – כלומר התגיות הסמנטיות מספקות גם מידע נוסף על מה שיש בתוכן. בנייה סמנטית היא חשובה לא רק עבור גוגל, אלא גם עבור שירותי אגרגציה שלעתים אנו מעוניינים להופיע בהם, ועבור נגישת. בעתיד דפדפנים חכמים יוכלו לעשות שימוש נוסף בתגיות הסמנטיות על מנת לספק מידע לאוכלוסיות נגישות.
עבור מתכנתים, השימוש בתגיות סמנטיות יכול להקל על הצבת תוספות בדף. כך למשל אני יכול לשתול JavaScript שלוקח את הכתובת, קורא למפה כלשהי ומציג את הכתובת על גבי מפה.
היכולות של הסמנטיקה לסייע ב-SEO כבר עכשיו מכריעה את הכף בעד שימוש בסמנטיקה – אך היכולות העתידיות של הכתיבה הסמנטית הן בעלות פוטנציאל עצום. ישנן כבר בתקן XHTML הנוכחי כמה תגיות סמנטיות שכדאי להכיר.
תקן ה-HTML 5 החדש כבר כולל כמה תגיות סמנטיות חדשות. כבר עכשיו ניתן להתחיל ולהשתמש בהן, במיוחד אם אתם מתאימים את עצמכם לתקן החדש.
תגיות סמנטיות של חלקי האתר
תגיות אלו מאפשרות לנו לחלק את האתר לחלקים שונים לפי סוג התוכן הקיים בהם. על כל התגיות האלו להיות בתוך תגית body:
header (שימו לב לא להתבלבל עם תגית head!) משמשת אותנו עבור תיחום חלקו העליון של העמוד. מדובר בחלק המכיל בדרך כלל את תמונת הלוגו, שם האתר ועוד אלמנטים הקשורים לכותרת.
footer משמשת אותנו לתיחום חלקו התחתון של הדף שכולל בדרך כלל מידע משפטי וזכויות יוצרים, קישורים למפת אתר ולחלקים אחרים וכתובות – כל אותם חלקים לא מעניינים שחייבים לשים בתחתית.
aside משמשת אותנו עבור התיחום של התפריט הצדדי של האתר שקיים ברוב האתרים. מדובר בתפריט הקבוע שמכיל גם אלמנטים של ניווט (שעבורם יש תגית נוספת) וגם באנרים ומידע קבוע.
nav משמשת אותנו ספציפית עבור חלקי הניווט באתר: תיבת החיפוש והתפריט. חלקי הניווט בדרך כלל מופיעים בכותרת האתר ובצדדים.
article – תגית שמסמנת את המידע באתר בה"א הידיעה – המיקום המרכזי של התוכן שיש בדף: בין אם זה מאמר, תמונה או כל אלמנט מידע אחר שמהווה את מרכז החשיבות של הדף.
section – מידע עבור חלק גנרי של האתר שאינו נכנס לאחת מהקטגוריות שלעיל. כך למשל אם יש חלק שמשמש להצגת פרסומות, אך הוא אינו יושב ב-Header או ב-footer, אפשר בהחלט לתת לו section משלו.
תגיות טקסט
בדומה לתגית adress או abbr, לחלק מתגיות אלו עלולה להיות השפעה על תצוגת הטקסט (תלוי בדפדפן). תגיות אלו מעניקות מידע יותר ממוקד על הטקסט עצמו או על חלקים ממנו.
time – תגית שהטקסט שהיא מכילה מציין זמן: תאריך או שעה.
mark – תגית המציינת טקסט מסומן (highlighted). בניגוד ל-strong או ל-emphesize היא כוללת טקסט שיש לו משמעות כרפרנס עבור מקור חיצוני אחר. שימושי מאד עבור פיצ'רים שבמסגרתם יש סימון של מילות החיפוש שדרכו הגעתם אל התוכן.
dialog – תגית המציינת דו שיח ותשמש אותנו במקרה של תיאור שיחה או תמלול.
meter -תגית המציינת מד התקדמות. כמו למשל במדריך התקנה או אשף הגדרות זה או אחר. התגית מכילה 2 תכונות: max שמכיל את מספר הצעדים המקסימלי ו-min שמכיל את מספר הצעדים המינימלי. למשל, אם יש לי מדריך מעמוד 1 עד עמוד 10 וכרגע אנו בעמוד 2, אני אכניס את הטקסט הבא כמציין מיקום:
<meter max="10" min="1">אתה בעמוד 2 מתוך 10</meter>
progress – בדומה ל-meter היא מכילה בתוכה מידע הקשור להתקדמות – אך יותר בתחום של הורדת מידע וזה שימושי במיוחד עבור JavaScript שייצוק תוכן לתוך התגית הזו.
hgroup – תגית זו אמורה ליצור קבוצת כותרות כאשר יש לי שתי כותרות אחת אחרי השניה. אם למשל יש לי כותרת h2 שמייד אחרי יש כותרת h3, אני אשתמש ב-hgroups על מנת לאחד ביניהן:
<hgroup>
<h2>כותרת ראשית</h2>
<h3>כותרת משנית</h3>
</hgroup>
תגית details – תגית זו משמשת אותנו למידע על המסמך. כמו למשל מתי הוא נכתב ושאר מטא מידע עליו כמו שם המחבר.
התקן החדש עדיין לא סוכם אך הוא כבר מופיע ב-W3Schools, אך אפשר כבר כיום להשתמש בבטחון יחסי בתגיות האלו על מנת להנות מיתרונות הסמנטיקה. כיוון שמדובר בתגים של סמנטיקה, שאין להם חשיבות מבחינת התצוגה של הדף, החשיבות של התמיכה בדפדפנים אינה כל כך גבוהה במקרה הזה. ובכל מקרה – אם משתמשים ב-modernizr אז אין שום בעיה להתאים את הסמנטיקה לדפדפני אקספלורר.
