HTML5 כבר כאן! – אז מה הוא מביא איתו?

http://blog.shtrudelit.co.il/blog/2011/august/html5.aspx

תקן HTML5 כמעט מוכן לשימוש. איפשהו עדיין הולך ויכוח לוהט על סעיפים ספציפיים של ה-DOM, קידודים של וידאו, אנימציה תלת ממדית וכו', אבל הבסיס של HTML5 - התחביר שלו, תכונות ותגים - כבר התייצבו. סעיפים אלה בתקן אינם משתנים במשך חודשים רבים, וכבר בשלב זה הם נתמכים על ידי גרסאות אחרונות של דפדפנים מובילים כמו:

• Internet Explorer 9/10
• Firefox
• Google Chrome

 

בשלב הראשון, HTML5 יופיע לרוב באתרים קטנים של אנשי מקצוע מתחום ה-IT, אבל תוך שנה שנתיים אנחנו נראה את HTML5 כתקן מוביל בשוק האינטרנט.

בתחום ה-IT, כמו בכל התחומים אחרים של הטכנולוגיה, ישנם תקנים טובים ויש לא כל כך טובים ואפילו נוראים. לעניות דעתי, המפרט של HTML5 מבטיח להיות גדול מהחיים.

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

DOCTYPE

כפי שכבר כנראה הבנתם ב-HTML נשאר רק סוג אחד של הכרזה על סוג המסמך והוא:

<! DOCTYPE html>

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

כרגע יש שישה סוגים שונים של doctype - שלושה דיאלקטים (Frameset, Transitional  ו Strict-) לכל אחת משתי השפות - HTML ו-XHTML. כמובן, אין דפדפנים שמציגים למשל, רק  XHTML Frameset, כל הדפדפנים החדשים תומכים בכל סוגי המסמכים. ליתר הדיוק, הם תומכים באיזשהו doctype משוכלל, אשר מאחד את כול ששת הסוגים כאשר כל אחד מהדפדפנים הוא שונה. בסופו של דבר היה צריך להישאר דווקא אותו doctype אוניברסאלי אחד. והוא נשאר. עכשיו זה רק html.

 

תגיות חדשות וסימון סמנטי

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

לכן נוספו ב-HTML5 תגיות סמנטיות חדשות. לצורך העניין אם ברצוננו לבנות תפריט ניווט, כעת נוכל להשתמש בתגית  <nav>, אם נרצא לכתוב מאמר נשתמש ב <article>, ועוד הרבה התגיות חדשות כמו:  <header>,<content>,<aside>,<footer>  ואחרים, אשר מיושמים כמעט תמיד ב html4 עם תג <div> עם ערך זיהוי או קלאס.

עד עכשיו מחסור בתגיות היה מוביל לקוד HTML שברוב המקרים נראה כך: </div></div></div>. כמות אותם הדיבים בכלות יכולה לגרום לבלבול וטעויות במיוחד כשמדובר בעורך לא מספיק מקצועי.  </div> אחד מיותר או אפילו אחד שלא נמצא במקומו, עלול להוביל לקריסה של הדף כולו, ולמעשה בדפדפנים שונים הוא יוצג אחרת. במקרה של תגים מיוחדים, ראשית, המאמר תמיד יהיה עם תג ייחודי </ article>, ושנית, רישום  <article> פשוט ברורה יותר, נוחה יותר וקצרה יותר מכתיבה  <div class="article">.

לסיכום

תוך כדי הלמידה של התקן החדש, קשה להימנע מתגובות כגון "מגניב", "כל הכבוד" ו "איך הם חשבו על כל הדברים האלה". מפתחי התקן עבדו עליו שבע שנים ולדעתי תוצאות לגמרי מצדיקות את ההשקעה, זאת התקדמות חסרת תקדים עם אפשרויות שלא ראינו עד כה. גרסה 3.2 של html למעשה בכלל לא פותחה על ידי אף אחד. גרסה 4 רק ייצבה את המצב שהיה לאחר המלחמה בין הדפדפנים השונים. כך שגרסה 5 תהיה הראשונה שבאמת תוכננה באופן המקובל בעולם ה-IT.