2 באוק׳ 2012

תגיות סמנטיות ב HTML5 והדרך הנכונה להשתמש בהן

semantic html5
עם כניסת HTML5, נוספו המון תגיות סמנטיות, נכון לעכשיו יש יותר בלבול בין מה ואיך להשתמש בתגיות אלו.
במאמר הנוכחי אני מבצע סקירה של מגוון תגיות חדשות, והכי חשוב! איך מומלץ להשתמש בהם.

אז בואו נתחיל...





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

aside - מייצגת תוכן נוסף שקשור או לאתר,או לאזור שבו הוא נמצא. כלומר במידה והתגית הזו קיימת ולא מקוננת בתוך article לדוגמא, אז זה אומר שהתוכן שמוצג שם קשור לאתר אבל לא בהכרח לתוכן המרכזי של הדף. אך במידה והתגית הזו מקוננת בתוך אלמנט article, זה נותן שיוך/הקשר לתוכן הרלונטי שבו היא נמצאת.
התגית הזו חשובה לנגישות וקידום אתרים(seo), לדוגמא לקשר בין מאמרים שנמצאים בתחומים דומים.
כמובן שאין הגבלה לכמות השימוש בתגית זו בדף ה HTML.

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

header - תגית שנועדה להכיל קבוצה של עזרי מבוא או ניווט. תגית header מכילה בדרך כלל תגית של כותרת (אלמנט h1-h6 או אלמנט hgroup), אך יכולה להכיל גם תכנים אחרים, כמו תוכן העניינים, טופס חיפוש, או כל לוגו רלוונטי.
חשוב לציין!-  ניתן להשתמש בתגית header, יותר מפעם אחת, ולא כפי שהיה נהוג לשים את החלק העליון של האתר בלבד בתגית זו.
דוגמא למימוש בתוך תגית article: תחשבו שיש לנו דף מאמר ובחלק העליון של הדף יש לנו כותרת + כותרת משנה שמתארת לנו בקצרה את המאמר + תאריך + רשתות חברתיות וכו, באזור הזה יהיה נכון להשתמש בתגית header (תגית header שתשב בתוך תגיד article). 
כמובן גם בחלק העליון של האתר השימוש רצוי.

hgroup - תגית שמטרתה לאחד מספר תגיות של כותרות תחתיה.
אופן השימוש בא: תחשבו שיש לכם כותרת מסוג H2 שמייצגת אזור באתר, שאותו אתם רוצים לציין בתוך המאמר ובנוסף כמובן את כותרת המאמר עצמו שהיא תיהיה H3 מתחתיה, אזי את שני הכותרות נעטוף בתגית hgroup. - דוגמא

footer - תגית שנועדה להכיל מידע נוסף בהקשר שבו היא נמצאת. תוכן התגית האופיני לתגית מסוג זה הוא: מי כתב את האתר/מאמר, קישורים למסמכים קשורים, נתונים על זכויות יוצרים וכדומה. 
במידה והתגית הזו היא אחת מהתגיות הראשיות של האתר היא תכיל מידע כללי על האתר, אך במידה והיא תופיע בתוך תגית article לדוגמא אזי היא תכיל מידע נוסף על תגית הarticle שבוא היא נמצאת.  
חשוב לציין!- בדומה לתגית ה header, ניתן ורצוי בהתאם לצורך, להשתמש בתגית הזו יותר מפעם אחת באתר, דוגמא: דף מאמר ובסופו מצויין שם הכותב, references נוספים, ואפילו תגובות. זה מקום מצוין לאחד אותם תחת המעטפת של תגית footer. כמובן בלי קשר זה טוב להשתמש בתגית הזו לfooter ראשי לאתר.

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

nav - תגית שמייצגת נויגציה/תפריטים/רשימת לינקים מרכזיות. כמו בכל התגיות ניתן להשתמש בתגית זו יותר מפעם אחת. מיועדת לעטוף איזורי לינקים מרכזיים שרלונטים לתוכן של האתר.
היכן כדי להשתמש בתגית nav:
  • תפריט ראשי
  • כפתורים הבא/קודם(prev/next) ו/או מספרי דפים.
  • טופס חיפוש
  • breadcrumbs
ניתן אך אני אישית פחות ממליץ, ויהיו אנשי seo שיחלקו אלי, לתת  לרשימת הלינקים שנמצאת בfooter מעטפת של nav. ה footer כביכול כבר מייצג את זה ולכן זה קצת מיותר להשתמש בתוך ה footer בתגיות מסוג nav. אני אישית חושב שהשימוש בתגיות nav בתוך הfooter הוא abuse לסמנטיקה.

time - תגית המייצגת זמן, התגית הזו תעטוף שעות ותאריכים ב HTML, ובנוסף מקבלת ערך attribute מסוג datetime, אשר ייצג בעיקר למנועי חיפוש/קוראי טקסט הבנה של איזה תאריך מדובר בצורה שתיהיה מובנת להם.
דוגמאות לשימוש בתגית תאריך:
<time datetime="2009-11-13T20:00Z">8pm on my birthday</time>
<time datetime="2008-02-14">Valentines day</time>
דוגמת קוד לשימוש בתגיות HTML5 בתוך מאמר - דוגמת קוד שמשלבת תגית article שבא יש header ובתוכו hgroup ותגית time. בנוסף תגיות aside ו footer שקשורים למאמר עצמו.

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

זהו! מקווה שנהניתם, במידה ואתם אוהבים את ה tutorials שאני כותב, אשמח שתצטרפו לרשימת הקוראים שלי בפייסבוק ע"י לחיצה על לייק כאן

תודה,
אלעד שכטר