آشنایی با HTML5 و ویژگی های آن

در سال ۲۰۰۸ اولین پیش نویس HTML5 که نسل جدید و حرفه ای زبان برنامه نویسی html و آخرین استنداندارد HTML, XHTML, HTML DOM است معرفی شد و در سال ۲۰۱۱، HTML5 که حاصل همکاری بین کنسرسیوم شبکه جهانی وب (W3C) و گروه کاری فناوری ابرمتن وب (WHATWG) می باشد معرفی شد.

در ورژن های قدیم HTML ساختار کدها با صورت زیر بود و بین div یا table قرار میگرفت و جهت نامگذاری از class و id استفاده میشد.

hml4

در طراحی سایت با html5 ساختار کدها عوض شده و از حالت منحصر به div بودن خارج شده و استفاده بیش از حد از div را بی نیاز میکند . نحوه قرار گیری تگ ها و ویژگی هاMی صفحه در html5 را در شکل زیر میتوانید مشاهده کنید

html5

استنداندارد XHTM (HTML 4.01) در سال ۱۹۹۹ پایگذاری شد و در سال ۲۰۰۸ اولین پیش نویس HTML5 که نسل جدید و حرفه ای زبان برنامه نویسی html و آخرین استنداندارد HTML, XHTML, HTML DOM است معرفی شد و در سال ۲۰۱۱، HTML5 که حاصل همکاری بین کنسرسیوم شبکه جهانی وب (W3C) و گروه کاری فناوری ابرمتن وب (WHATWG) می باشد معرفی شد.

با توجه به اینکه HTML5 هنوز در حال گسترش است همه ویژگی های آن در همه مرورگرها پشتیبانی نشده . در حال حاضر مرورگرهای معروف (chrome, firefox, ie9 safari, opera) از قالب تگ های آن پشتیبانی میکنند و همچنین قالب مرورگرهایی که روی موبایل های هوشمند هستند همگی به خوبی HTML5 را بخوبی پشتیبانی میکنند.

جهت اطلاع از میزان پشتیبانی مرورگرها در ورژن های مختلف و میزان پشتیبانی آنها اینجا را ببینید.

مرورگرها

البته با توجه به اینکه سیستم عامل ها بروز شده اند و قالبا از مرورگرهای جدید استفاده میکنند دیگر نباید نگران عدم پشتیبانی HTML5 در مرورگرها بود و می بایست طراحی سایت خود را بر اساس HTML5 و CSS3 انجام داد. در مورد مرورگرهای قدیمی مثل اینترنت اکسپلورر و عدم پشتیبانی آنها میشه از HTML5 Shiv استفاده کرد که در مطالب آتی سایت نحوه استفاده از آن را مورد بررسی قرار خواهیم داد. (پیشنهاد میکنم در خبرنامه سایت یک طراح عضو بشید)

HTML5 دارای تعدادی عناصر و ویژگی های جدید است که در ساخت وب سایت های مدرن کمک می کنند. در زیر مهمترین ویژگی های  HTML5معرفی شده است :

عناصر و ویژگی های HTML5

  1. عناصر جدید معنایی: این عناصر شامل <article> <header> <footer> <section> می باشد.
  2. فرم ها ۲٫۰: ارتقاء به وب فرمهای HTML که در آن خاصیت های جدید برای تگ های <input>معرفی شده است.
  3. ذخیره سازی محلی مداوم: برای دسترسی بدون نیاز به افزونه های شخص ثالث.
  4. WebSocket : یک فنآوری ارتباطات دو طرفه نسل بعدی برای برنامه های کاربردی وب است.
  5. رویدادهای ارسالی از سرور: HTML5 رویدادهایی که از وب سرور به مرورگر وب جریان دارند و رویدادهای ارسالی از سرور (SSE) نامیده میشوند را معرفی می کند.
  6. نقاشی: این ویژگی از یک سطح طراحی دو بعدی، از طریق برنامه نویسی جاوا اسکریپت پشتیبانی می شود .
  7. صدا و ویدئو: شما می توانید صدا یا ویدئو را در صفحات وب خود بدون نیاز به افزونه های شخص ثالث جاسازی کنید.
  8. منطقه جغرافیایی: اکنون بازدید کنندگان می توانند انتخاب کنند که مکان فیزیکی خود را با برنامه تحت وب شما به اشتراک بگذارند.
  9. Microdata: این ویژگی به شما اجازه می دهد صفحات وب خود را با مفاهیم سفارشی گسترش دهید.
  10. کشیدن و رها کردن: این ویژگی شما را قادر خواهد ساخت که آیتم ها را از یک محل به محل دیگر در همان صفحه بکشید و رها کنید.

همچنین میتوانید لیست کاملی از تغییرات HTML4 نسبت به HTML5 داشته را ببینید : HTML5 Differences from HTML4

در موضوعات بعدی به تگ های مربوط به ساختار صفحه در html5 و همچنین بهینه سازی سایت برای موتورهای جستجو (سئو) توسط HTML5 را مورد بررسی قرار می دهیم.