HTML 5 – מה נכנס ומה יוצא? – חלק א'

 

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

התגיות שנוספות ב-HTML 5

נוספו כ-26 תגיות חדשות ל-HTML 5. חלקן מאוד אינטאוטיביות ושמענו על בואן (video, audio) וחלקן הזויות מאוד, אני אסביר כאן את שימושן של כולן. חילקתי את נושא התיגיות החדשות לכמה חלקים: האחד – תגיות המחלקות את הדף למקטעים, השני – תגיות המשמשות לאפיון של טקסט, השלישי- תגיות להצגת מולטימדיה והאחרון – תגיות נוספות.

1. חלוקת הדף למקטעים:

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

<header>
תחילת העמוד – תגית זו תוחמת בתוכה את החלק העליון במסמך האתר, החלק שתואם לכל שאר הדפים. תגית זו יוצרת למעשה הפרדה של החלק העליון שברוב הפעמים הוא לא החלק המרכזי של הדף.
<footer>
כמו התגית הקודמת, אך הפעם התיחום הוא של החלק התחתון.
<aside>
תגית התוחמת בתוכה את החלק באתר שנמצא בצד (אם יש כזה).
<nav>
תגית זו תוחמת בתוכה את החלק במסמך אשר דרכו ניתן לנווט באתר. לרוב, התפריט של האתר.
<section>
תגית זו מחלקת את המסמך לחלקים, תגית זו היא כללית ונשתמש בה כאשר לא נמצא תגית מתאימה יותר. אני חושב שהיא תתן לנו חלופה לא רעה לשימוש המוגזם בתגית div.
<article>
תגית התוחמת בתוכה קטעי מאמר. באתרי מאמרים ובלוגים החלק המרכזי יתחם בתגית זו.
HTML 5 - חלוקה הגיונית

HTML 5 - חלוקה הגיונית

2. תגיות טקסט:

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

<time>
כשמה כן היא, תגית התוחמת בתוכה זמן או תאריך.
<details>
תגית המכילה פרטים נוספים על אלמנט כלשהו. לתגית יש מאפיין open, שמקבל true או false, ולפיו מוצגים או לא מוצגים הפרטים שתחומים בתגית זו. ניתן לצרף לתגית זו כותרת באמצעות התגית legend. כותרת זו תשמש גם כפתור להצגה והסתרה של טקסט.
<mark>
בדומה לתגיות em ו-strong שתפקידן להדגיש, תגית זו תוחמת בתוכה טקסט מסומן.
<progress>
תפקיד תגית זו הוא להציג התקדמות של תהליך. לרוב תתחום בתוכה אחוזים להתקדמות של הורדה או טעינה.
<meter>
התגית הזאת מייצגת כמות. הכמות תיהיה יחסית למינימום מוגדר ומקסימום מוגדר. לדוגמא:

1
<meter max="10" min="0">2 from 10</meter>
<output>
בדומה לתגיות, code ו-samp, תגית output תפקידה לייצג סוג של פלט, כמו כזה של קוד תכנות.
<dialog>
תגית שתוחמת בתוכה שיחה. אם יש טקסט שמייצג שיחה בין אנשים רצוי לתחום אותו בתגית הזאת.
תגיות טקסט ב-HTML 5

תגיות טקסט ב-HTML 5

3. תגיות מולטימדיה וטכנולוגיות חדשות:

כעת אעבור להציג את התגיות המעניינות ביותר (לטעמי), הן בהחלט מחוללות שינוי גדול מהמצב הקיים כיום.
* הדוגמאות שאתן כאן מחייבות אתכם לגלוש בדפדפנים שתומכים ב-HTML 5, כגון firefox 3.5.

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

1
2
3
<video src="שם קובץ.ogg" controls width="320" height="240">
        <a href="שם קובץ.ogg">אין לכם תמיכה ב-HTML 5 הורידו את הסרט</a>
</video>

והדוגמא בפועל:

<audio>
תגית שמע, פועלת כמו תגית וידאו למשמשת לניגון קבצי סאונד. נעבור לדוגמא:
<figure>
תגית זו משמשת על מנת לקבץ בתוכה תגיות מולטימדיה, כמו video ו- audio. ניתן להוסיף את תגית legend על מנת להציג כותרת לקבוצה זו.
<source>
תגית שמכילה URL לקובץ סאונד או וידאו. לרוב תופיע בתוך תגיות וידאו ואודיו.
<embed>
אנחנו מכירים כבר את התגית הזאת, מהקוד של הצגת פלאש, אבל רק ב-HTML 5 היא תיכנס באופן רשמי. תפקידה להציג תוכן מוטבע (חיצוני). לדוגמא:
<canvas>
אם עדיין לא שמעתם על canvas הגיע הזמן לשמוע. קאנבס זוהי טכנולוגיה ליצירת גרפיקה בעזרת קוד html. אני לא ארחיב על כך יותר במאמר זה אבל אני בוודאי אכתוב בעתיד כאן ב-htm מאמר על טכנולוגיה זו. צפו בדוגמא:

דפדפן זה לא תומך בקאנבס!


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

4. תגיות נוספות:

לאחר חלוקה יפה לשלוש קטגוריות של תגיות, אסביר עכשיו על שאר התגיות שיתוספו לנו ב-HTML 5:

<datalist>
בדומה למדריך שנתתי לכם לפני כמה ימים, שמסביר איך להוסיף תיבת הצעות לתיבת טקסט, תגית זאת למעשה מאפשרת להוסיף, דרך קוד ה-HTML, אפשרויות לבחירה לתיבת טקסט. קוד לדוגמא:

1
2
3
4
5
6
7
<input id="myCar" list="cars" />
            <datalist id="cars">
            <option value="BMW">
            <option value="Ford">
            <option value="Volvo">
            <option value="Porche">
            </datalist>

וכעת לדוגמא בפועל (לי זה עבד רק באופרה, בגרסה החדשה ביותר):

<command>
עד שהומצאה התגית הזאת היינו משתמשים בתגית input על מנת ליצור כפתורים שמבצעים פעולות. בעזרת התגית החדשה נוכל ליצור כפתורים שיבצעו פעולות. ניתן לבחור את סוג כפתור הפעולה (מאפיין type) מתוך שלוש אפשרויות: command (ברירת המחדל, מתנהג כמו input type="button"), checkbox, radio.
<event-source>
בתגית זו פונים ל-URL (דרך מאפיין ה-src) של מסמך מסוג, text/event-stream. תגית זו יוצרת חיבור למסמך זה ומאפשרת לטעון אירועים מהמסמך. עוד לא נתקלתי בדוגמא לשימוש בתגית זו ברשת אך אני בטוח שנגלה דוגמאות רבות בעתיד.
<input>
אתם אולי חושבים שהתבלבלתי, נכון, תגית ה-input אומנם לא חדשה והיא קיימת כבר הרבה זמן, אך ב-HTML 5 נוצרו סוגי Input חדשים ומאוד שימושיים. בעוד שעד היום, כשרצינו לתת ממשק נוח למילוי טפסים השתמשנו בשפות צד לקוח (כמו JS), ב-HTML 5 הטיפול בצד הלקוח עובר לדפדפן. לשם הדוגמא, כאשר ארצה ליצור תיבת טקסט שמקבלת לתוכה תאריך, הפתרון הנוח ב-HTML 5 עושה לי את החיים קלים.
הקוד:

1
<input type="datetime" />

והתוצאה (על מנת לראות את התוצאה גלשו בגרסא האחרונה של אופרה):

חוץ מ-datetime ישנם אפשרויות רבות חדשות. והן:

datetime-local,date,time,month,week,number,range,email,url,search,tel,color.
אתם מוזמנים לבדוק את התוצאה שלהן באופרה.

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

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

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
עמיתNo Gravatar 26 באוקטובר

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

[תגובה]

אורן רוט

למה הכוונה שלך שאתה אומר צורך?

התגיות שהזכרתי בהתחלה מחלקות את האתר לחלקים הגיוניים, זה הופך את האתר ליותר נגיש – זה צורך אמיתי.

[תגובה]

עמית

כמובן, אבל למה צריך בשביל זה קוד נוסף? פשוט תוסיף הערה בקוד, לדוג' –
<!–Header–>

[תגובה]

אורן רוט

יש הבדל גדול בין תגית מובנת של שה-HTML להערה.

אני אתן כמה דוגמאות:
1. מנועי החיפוש – כאשר מנוע חיפוש יסרוק את דפי האתר שלך הוא יוכל לסרוק את ה-header וה-footer פעם אחת ואת החלק המרכזי כל פעם בכל עמוד (מכיוון וזהו החלק המתעדכן) וכך לחסוך זמן ולהיות יעיל יותר. לעומת זאת הערה שאתה נתת לא אומרת למנוע החיפוש אף לא דבר או חצי דבר לגביי מה שיש אחריה. רק אדם שיסתכל בקוד יוכל אולי להבין במה מדובר, חוץ מזה כלום.

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

אם עדיין אני לא מובן תקרא מאמרים בנושאי קוד סמנטי ברשת, תבין יותר.

עמית

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

NeoSwf

עמית- אז זהו שמנועי חיפוש לא כזה הסתדרו. אתה יודע כמה עבודה עליהם לבצע כדי להבין מהי תמונה ומהו הטקסט המתאר אותה? בדיוק לבעיה זו figure נבראה.
ולמשל מהי פסקה המכילה מאמר ומהי פסקה המכילה טקסט מלווה. 2 מקטעי מידע אלו שונים במהותם ושונים מבחינת חשיבות ומקל הטקסט בתוכם, הרי פסקה החוזרת על עצמה בכל עמוד שונה בתרומתה למסמך מפסקה המהווה חלק ממידע יחודי לעמוד זה.
את זה אתה מבין כי לך יש עיניים ויכולת ליצור הקשרים. למנוע חיפוש אין ולכן הוא זקוק לך, בונה האתר, שתמפה לו את המסמך.

[תגובה]

אורן רוטNo Gravatar 26 באוקטובר

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

אם אתה מעוניין ללמוד על קוד סמנטי כנס ללינק הבא:

http://www.webdesign.org.il/archives/2007/01/03/%D7%A1%D7%9E%D7%A0%D7%98%D7%99%D7%A7%D7%94-%D7%91%D7%99%D7%99%D7%91%D7%99-%D7%99%D7%90%D7%90%D7%90%D7%90

וכמובן שתודה לך על התגובה והתעניינות.

[תגובה]

lioraNo Gravatar 2 בנובמבר

אהבתי מאוד, כל הכבוד

[תגובה]

palmoni777No Gravatar 14 בנובמבר

תוספות מיותרות ולא שימושיות!

ניסיתי להשתמש בכמה תגיות המוצעות. וללא קוד js לא ניתן להשתמש באותן תגיות.
ובדיקה שיטחית ב http://browsershots.org/
מתקבלת תצוגה זוועתית במרבית הדפדפנים.

[תגובה]

אורן רוט

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

המאמר הזה בא להראות את התגיות שיכנסו אלינו בעתיד.

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

אתה מוזמן לשלוח לי באיזה דפדפן אתה משתמש ואני אוכל להגיב לך באופן ענייני, לגביי התגובה הנוספת שלך אני חושב שהיא לא עניינית ולא מכבדת אותך כלל ולכן היא מוסרת מהאתר.

[תגובה]

אלוןNo Gravatar 26 בנובמבר

אחלה כתבה, תודה.

[תגובה]

אלרוןNo Gravatar 5 במרץ

כתבה טובה.
תודה על המידע!

[תגובה]

אורן רוטNo Gravatar 6 במרץ

תודה לכם :)

[תגובה]

אבריNo Gravatar 18 באפריל

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

[תגובה]

רותםNo Gravatar 9 במאי

ה – HTML 5 הה נשמע לי אחד החזקים, בתור אחד שמתעסק הרבה עם HTML, PHP ועוד .. זה נשמע ממש מגניב כל מה שהוא עושה =]

[תגובה]

שיןNo Gravatar 31 באוגוסט

אהבתי מאוד את הכתבה. עשית לי סדר בנושא.
תודה

[תגובה]

אורן רוט

בשמחה :)

[תגובה]

אופירNo Gravatar 9 באוקטובר

אחלה מאמר, מאוד מושקע ומעניין, אני באמת מחפש ללמוד איזשהו קורס בנושא,

תודה!

[תגובה]

הוזכר באתרים אחרים...
  1. לימוד action script 3 בחינם! | atzlan.biz ב- 9 בספטמבר 2011 בשעה: %I:%M %p
כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון