מדריך HTML 5 - מבנה הדף והתגיות החדשות

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

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

 

המבנה החדש של דף ב- HTML 5

תגיות הסמנטיקה החדשות עוזרות לנו לחלק את הדף לאזורים כאשר כל אזור ייצג תוכן ו/או מיקום מסויים בדף ויכיל נתונים זהים, כלומר, אם בעבר כל האלמנטים בדף היו מחולקים תחת מספר div-ים שאיחדו אותם בהתאם למיקומם בדף אך לא באמת הסבירו את המשמעות שלהם לאתר (אלא אם הוספתם class או id ל-div , למרות שגם שיטה זו לא תמיד עוזרת להבהיר מה כולל ה-div) אז כיום עם HTML5 נוספו מספר תגיות אשר מסבירות מהו התוכן שבתוך האלמנט, מה המשמעות שלו ומהי חשיבותו לדף.

בעבר כאשר היינו בונים דף HTML היינו מקבלים בדר"כ מבנה שדומה לזה:

 

כאשר ישנו כותרת, תפריט עליון, תפריט צד, טקסט לדף הנוכחי ותחתית לדף.

כיום, ב- HTML 5 שונה אופן הכתיבה ובמקום להגדיר div עבור על אחד מהם עם class או id מתאים נשתמש בתגיות החדשות בהתאמה בצורה כזאת:

 

שימו לב שהתגיות החדשות נותנות הסבר על חשיבותם ומהו חלקם בדף ומספקות הגדרה קבועה עבור כל אחד מהם.

לדוגמא, כאשר היינו משתמשים ב-div אשר יהיה בראש הדף יכולנו לתת לו מספר שמות, והוא יכל להיקרא למשל: head, veryHighPart, topPage, mySiteTopHead וכולם היו שמות אשר ברורים רק למי שבנה או מתחזק את האתר (וגם זה במקרה הטוב). ב- HTML 5 נעשה שימוש בתגית header ויהיה ברור לכל מתכנת שיגש לקוד האתר מה משמעות המקטע הזה ויהיה לו ברור שזהו החלק העליון של האתר.

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

 

התגיות החדשות ב- HTML 5

בתקן החדש (HTML 5) הוסיפו כ-30 תגיות חדשות אשר מחולקים למספר קטגוריות.

מצורף הסבר קצר בכמה מילים על כל אחד מהם.

תגיות מדיה:

audio - הגדרה לאלמנט של סאונד כמו מוזיקה ומכיל אפשריות של הפעלה, עצירה ועוד.

video - הגדרה לאלמנט של וידיאו. דומה לאלמט של ה-audio מבחינת מבנה ותפעול וגם הוא מכיל אפשריות של הפעלה, עצירה ועוד.

source - תגית זו מגדירה את את הקישור למקור המדיה באלמנטים audio ו- video.

track - תגית זו מגדירה כתוביות עבור האלמנטים audio ו- video.

embed - תגית להטמעת אלמנט flash.

 

תגיות גרפיות:

canvas - מאפשר לצייר עליו באמצעות JavaScript. עושים בו שימוש רב ביצירת משחקים, למשל Angry Birds.

SVG - מאפשר לצייר עליו באמצעות הגדרות XML.

 

תגיות Form:

datalist - הגדרת רשימת ערכים עבור אלמנט input ומוסיף אפשרות ל-autocomplete לערכים אלו כאשר המשתמש יתחיל להקליד.

keygen - מייצר מפתח זיהוי לצד הלקוח (פרטי אשר נשאר בצד הלקוח, וציבורי אשר נשלח לשרת) כך שהשרת יוכל לאמת שזהו אכן אותו לקוח.

output - מציג תוצאה של חישוב כלשהוא בצד הלקוח. למשל מחשבון שמחבר בין הערכים שנמצאים בין 2 input ומעדכן את התוצאה אוטומטית בצד הלקוח ללא פניה לשרת.

 

תגיות סמנטיקה / תגיות מבנה:

header - משמש להצגת כותרות. יכול להיות כותרת הדף או מאמר. ניתן להשתמש בתגית זו מספר פעמים בדף. יכול להכיל בתוכו גם תגית hgroup.

nav - משמש לניווט ובדר"כ יכיל קישורים. יכול לשמש עבור ניווט עליון או צדדי. 

section - מייצג מקטע בקוד. יכול להופיע בחלקים שונים בדף (בכותרת, במאמר או בחלקו התחתון של האתר).

article - מייצג מאמר על כל חלקיו כמו תאריך, כותרת, שם הכותב והתוכן.

aside - צד הדף. יכול להכיל פרסומות או מידע נוסף על הדף הנוכחי. ניתן להגדיר באמצעות WAI-ARIA מה סוג התוכן שהתגית מכילה, למשל banner או navigation.

figure - מכיל סוג של אלמנט גרפי כלשהו כמו תמונה או וידאו ואלמנט מסוג figcaption.

figcaption - ניתן לשים אותו בתוך אלמנט figure והוא בא לתאר במילים את האלמנט שנמצא לידו בתוך figure.

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

hgroup - מאחד בתוכו מספר כותרת מסוג h, כלומר h1-h6. ז"א שאם אנו רוצים לעשות כותרת ראשית ומתחתיה כותרת משנה (ששניהם קשורות זו לזו) נשים כל אחד מהם ב-h כלשהו ונשים את שניהם בתוך hgroup על מנת להבהיר שהם קשורים אחד לשני.

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

details - מכיל קטע טקסט שמוצג כמוסתר עד שהמשתמש ילחץ עליו. מה שמוצג למשתמש זה רק מה שרשום בתגית summary שבתוך המקטע של ה-details.

summary - הסבר בשורה הקודמת על התגית details.

dialog - מקפיץ הודעה למשתמש (נכון לכתיבת פוסט זה אפשרות זו פעילה רק בספארי וכרום בגרסת קנרי לאחר שינויי הגדרות בדפדפן).

main - התוכן המרכזי של הדף. יכול להיות מאמר או רשימת מאמרים. לא ניתן לשים אותו בתוך אחת מהתגיות: article, header, footer, nav או aside וכמו כן מומלץ לא לשים את התגית הזאת יותר מפעם אחת בדף.

mark - מוסיף סימון רקע צהוב על הטקסט שבתוכו.

menuitem - הוספת אפשרויות נוספות לדפדפן (מעל האפשרויות האחרות כמו "בדוק רכיב" או "הצג מקור") בלחיצה על כפתור ימני בתוך האלמנט שבתוכו הוא נמצא (נכון לכתיבת פוסט זה אפשרות זו פעילה רק בפיירפוקס).

meter - מציג אלמנט גרפי של מד שמלא בהתאם להגדרות ומייצג בדר"כ דברים כמו כמה מקום נשאר בדיסק הקשיח במחשב (אחוזים או הגדרה של מספרים למשל מד של 3 עד 10 שיהיה מלא עד הערך 5).

progress - מציג אלמנט גרפי של התקדמות של פעולה כלשהי.

rp, rt ,ruby - שלושת התגייות הללו מספקות הדרכת הגייה עבור שפות מזרח אסיה (כמו סינית וקוריאנית). 

time - מכיל טקסט שמייצג זמן, יכול להיות תאריך או שעה (או שניהם...). אפשר לשים בו את התאריך שרצוי או לרשום בו את שם הארוע ולהוסיף מאפיין datetime שבו יהיה התאריך.

wbr - מגדיר מיקום באמצע מילה שמאפשר שבירת המילה בקטע שבתוך מקטע זה.

 

 כמו כן, מספר תגיות הוסרו מהתקן החדש:

acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes, strike, tt

מה היתרונות בשימוש בסמנטיקה של HTML 5? 

  • SEO - למנוע החיפוש יהיה קל יותר להבין איך האתר בנוי בשל האחידות בין האתרים ואפשרות להבין איפה נמצא כל חלק בדף.
  • קוד נקי וברור יותר אשר קל יותר לתחזוקה ושומר על הסדר באתר.
  • נגישות ברשת - התגיות החדשות הופכות את הדף לנגיש יותר ללקויי ראיה למשל על ידי תמיכה בקוראי מסך.

 

תגיות:

הוסף תגובה