ינו 06 2010

תגיות סמנטיות חדשות בתקן -HTML 5

מאת בתאריך 17:28 נושאים קידום אתרים

ראשית כדאי שנגדיר מה זו סמנטיקה. סמנטיקה היא חקר המשמעות – הבנה של המשמעות הגלובלית של מילים. ובצד הפרקטי יותר, תוכנה או מנוע חיפוש שמבינים את ההבדל בין ביצת זהב לביצת החולה. שיודעים למשל שצה"ל זה ראשי תיבות של צבא הגנה לישראל. תחביר ה-HTML מכיל כבר כיום כמה תגיות סמנטיות שמעבירות מידע על תפקיד המילה או המשפט. בתקן XHTML 1 וברוב הדפדפנים לחלק גדול מהן יש גם תפקיד עיצובי (כמו למשל תגית strong שמשמשת להדגשה). כתיבה סמנטית חשובה מאד לא רק עבור הנגשת האתר לנכים או לאפליקציות שונות אלא גם ככלי המאפשר לנו לתרום להבנת האתר על ידי מנוע החיפוש. כך למשל, רבים מאנשי ה-SEO מאמינים ששימוש מושכל ונבון בתגית address יכול לסייע ב-SEO מקומי. על תרומה לדירוג האתר במנוע החיפוש באמצעות שימוש נבון בתגיות Headers, strong ו-emphesize אין צורך להרחיב את הדיבור. למרות שאין הוכחה להשפעה חד משמעית של חלק מהתגיות הסמנטיות האקזוטיות יותר, שימוש נבון בתגיות סמנטיות מהווה אות ל-SEO איכותי ולעבודת פרונט אנד משובחת.

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

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

תגיות של חלקי האתר

תגיות אלו מאפשרות לנו לחלק את האתר לחלקים שונים לפי סוג התוכן הקיים בהם. על כל התגיות האלו להיות בתוך תגית body:

header (שימו לב לא להתבלבל עם head!) היא עבור חלקו העליון של העמוד המכיל בדרך כלל את תמונת הלוגו, הסלוגן, שם האתר ועוד.

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

aside משמשת אותנו עבור חלקיו הצדדיים של האתר, אלו שמכילים בדרך כלל את חלקי הניווט, באנרים שונים וכו'.

nav משמשת אותנו ספציפית עבור חלקי הניווט באתר: תיבת החיפוש והתפריט.

article – תגית שמסמנת את מיקום המידע המרכזי של האתר – המאמרים והמידע שהוא מכיל.

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 היא מכילה בתוכה מידע הקשור להתקדמות – אך יותר בכיוון של הורדת מידע.

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

תקן HTML 5 מכיל עוד לא מעט תגיות ותכונות חדשות ומעניינות שלחלק מהן עוד עלולה להיות חשיבות סמנטית – כמו תגית הוידאו המאפשרת לנגן וידאו בקוד פתוח ללא פלאש, סילברלייט או JavaFX. או תגיות נוספות שיש להן חשיבות תפקודית בדומה ל-JavaScript. על בוני אתרים בכלל ואנשי SEO בפרט להכיר את התקן על מנת לא להשאר מאחור כאשר הוא יהיה יותר רלוונטי.

על הכותב:

רן בר-זיק הוא מפתח PHP ודרופל המפעיל את אתר אינטרנט ישראל המוקדש לפיתוח רשת בכלל ופיתוח Client Side בפרט.

אין תגובות

כתובת טרקבק | RSS תגובות

השארת תגובה

FireStats icon ‏מריץ FireStats‏