yuval@computrade.co.il
רח אריה שנקר 1, הרצליה
© כל הזכויות שמורות לקומפיוטרייד

תגים חדשים ב HTML5

     יובל ישי  29.11.11



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

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

להלן רשימה של אלמנטים חדשים שהוצגו ב HTML5 ומשמשים להגדרת בלוקים שונים בדף האינטרנט. שמם מדבר בעד עצמו:

header - משמש להגדרת כותרת הדף
section  - משמש להפרדת תוכן בצורה קלה יותר
article  - משמש להגדרת התוכן העיקרי של הדף
aside - משמש להגדרת איזורים בצד הדף
footer - משמש להגדרת החלק התחתון של הדף
nav - משמש להגדרת איזור התפריט / ניווט של הדף

מטרת אלמטים חדשים אלה הוא לתאר בצורה תאורית ומשמעותית יותר חלקים שונים בדף האינטרנט. 

להלן דוגמא לכתיבת דף בסיסי עם שימוש באלמנטים אלה:
שימוש ב HEADER
שימוש ב ASIDE
שימוש ב FOOTER
שימוש ב NAV
שימוש ב SECTION, ARTICLE

תגים נוספים ב HTML5


dialog - משמש להגדרת תוכן של שיחה בדף האינטרנט
dt  - משמש להגדרת הדובר בשיחה
dd  - משמש להגדרת תוכן השיחה
תוצאת הרצת קוד זה כפי שיופיע בדפדפן:

m - משמש לציין תוכן מיוחד ומודגש בדף ללא שינוי עיצוב. עוזר למנועי חיפוש לשפר את תוצאות החיפוש שלהם
figure  - משמש להגדרת איזור של תמונה
legend  - משמש לתיאור התמונה

time - משמש לציין טקסט המציין זמן 
meter  - משמש להגדרת טקסט מספרי המכיל מידה של דבר מה כגון: גיל, משקל, מחיר, מרחק וכו'
לאלמנט זה ניתן להגדיר מאפיינים כגון:
max
min
value
high
low
optimum



progress  - משמש לתיאור התקדמות של תהליך כלשהו. למשל ניתן להשתמש באלמנט זה כאשר מורידים קובץ גדול או סרטון ווידאו ורוצים להראות למשתמש את התקדמות ההורדה.
לאלמנט זה ישנם מאפיינים נוספים:
value
max
יש לשים לב שתוכן האלמנט הוא סטטי ויש להעזר ב javascript כדי לשנותו באופן דינמי.


לסיכום:

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

במאמר הבא נסקור את השינויים המשמעותיים שנעשו בטפסים ( HTML5 FORMS )
לכל שאלה או ייעוץ אתם מוזמנים ליצור קשר.