introduction to html5

تکنولوژی‌ها و زبان‌های برنامه نویسی که در وب استفاده می‌شوند هر روز پیشرفت می‌کنند. زبان برنامه نویسی HTML هم یکی از این زبانهاست که آخرین نسخه آن HTML5 می‌باشد. متاسفانه با اینکه این نسخه بسیار ساده و روان قابل پیاده سازی و برنامه نویسی است ولی همچنان به دلیل عدم آشنایی کاربران مورد استفاده قرار نمی‌گیرد.

DocType

اولین تغییر واضحی که در HTML5 بوجود آمده DocType می‌باشد. این برچسب به شکل قابل توجهی کوچکتر و مفهومی‌تر شده است. تنها کافیست کد زیر را در ابتدای صفحه خود وارد نمایید:

<!DocType html>

نکته قابل توجه در این کد این است که به جای بکار بردن لفظ HTML5 از html استفاده شده است.

عناصر جدید

در HTML5 برچسب‌های جدیدی عنوان شده است. این برچسب‌ها غالبا برای سهولت کار در برنامه نویسی بکار برده می‌شوند. بطور مثال برچسب‌های header و footer مشخص کننده ابتدا و انتهای صفحه یا یک بخش هستند.

  • header

  • این برچسب نشان دهنده اطلاعات مقدماتی است که در ابتدای یک صفحه یا یک بخش آورده شده‌اند. بطور مثال می‌توان عنوان صفحه را در این برچسب قرار داد.
  • nav

  • برچسب nav زمانی بکار می‌رود که نیاز است پیوندهایی به بیرون یا مناطق مختلفی از صفحه آورده شود. البته نیازی نیست تمامی پیوندها در این برچسب آورده شوند، تنها پیوندهای اصلی که در تمامی صفحات مورد نیاز هستند.
  • section

  • نشان دهنده یک قسمت کلی از صفحه یا برنامه می‌باشد. این برچسب شباهت زیادی به برچسب div دارد.
  • article

  • برچسب article قسمت‌هایی از صفحه که شامل اطلاعات اصلی هستند را شامل می‌شود. مثل: یک پست، دیدگاهی از کاربران و هر قسمت مستقلی از صفحه.
  • aside

  • شامل اطلاعاتی که به متن اصلی صفحه مرتبط هستند می‌شود. بیشتر برای نوارهای کناری در صفحات بکار می‌روند.
  • footer

  • برچسب footer برای عنوان کردن پانوشت‌های صفحه و هر قسمت از آن بکار می‌روند. این برچسب و برچسب header ممکن است در یک صفحه چندین بار بکار برده شوند.

با نگاهی دوباره به برچسب‌های عنوان شده متوجه می‌شویم که آنها جایگزینی برای برچسب div می‌باشند. برای فهم بهتر، در زیر شکلی از کاربرد این برچسب‌ها آورده شده است.

html5 tags

سادگی انتقال از XHTML

هرچند زبانهای برنامه‌نویسی XHTML 1.0، HTML 4.01 و HTML5 بسیار به هم شبیه هستند ولی اختلافات اندکی نیز باهم دارند که ممکن است هر کسی را به اشتباه بیاندازد. در HTML5 امکانی آورده شده است که انتقال از نسخه‌های قدیمی را بسیار ساده می‌کند. برای مثال کد زیر یک کد قابل قبول در HTML5 می‌باشد:

<input id="name" type="text">

ولی برای سادگی انتقال از XHTML کد زیر نیز قابل قبول است:

<input id="name" type="text" />

این امر باعث می‌شود برنامه نویسانی که با XHTML کار می‌کنند بسادگی بتوانند خود را با HTML5 وفق دهند. این قانون برای برچسب‌های meta و تمامی برچسب‌های غیر جفتی کار می‌کند.

###گسترش APIها### مهمترین ویژگی که در HTML5 گنجانده شده API های جدید آن است که نیاز به برنامه‌های جانبی از جمله Flash و Google Gear را بر طرف می‌کند.

  • ####Offline Data Storage#### جالبترین ویژگی HTML5 قابلیت کار با داده‌ها به صورت آفلاین است. برنامه‌هایی مانند Thunderbird یا Outlook و GMail این اجازه را به کاربر می‌دهند تا زمانی که به اینترنت متصل نیستند به اطلاعات قدیمی دسترسی داشته باشند. بوسیله HTML5 این امکان را در مرورگر خود تجربه خواهید کرد.

  • ####Drag & Drop#### قابلیت کشیدن و انداختن عناصر در HTML5 پشتیبانی می‌شود ولی نه بطور کامل. این API به کدنویسی Javascript نیز نیاز دارد.

  • ####Video & Audio#### قرار دادن ویدئو در یک صفحه همیشه بوسیله تکنولوژی‌هایی مانند Flash صورت می‌گرفته است. ولی با استفاده از HTML5 بسادگی می‌توانید ویدئو یا موزیک خود را بوسیله یک برچسب در صفحه مورد نظرتان قرار دهید. بطور مثال:

<video width="400" height="360" src="vid.mp4">
   <param name="allowfullscreen" value="true" />
   <param name="allowscriptaccess" value="true" />
</video>
  • ####Geolocation#### قابلیت مکان یابی یکی از بهترین امکانات HTML5 می‌باشد. بوسیله این API بسادگی می‌توان از موقعیت کاربری که از وبسایت دیدن می‌کند مطلع شد.