ویژگیهای HTML5

جدیدترین نسخه از HTML (زبان تگ گذاری صفحات وب) با نام HTML5 در حال توسعه است. نماد (لوگو) رسمی HTML5 را در شکل روبرو مشاهده می کنید. بسیاری از مرورگرها به تدریج در نسخه های جدید خود ویژگی های HTML5 را پیاده سازی کرده و پشتیبانی می کنند. این ویژگی ها، جدید و بعضاً بی نظیر هستند و دنیای وب را متحول می سازند.

HTML5 جایگاه HTML در طراحی
در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد:
توصیف ساختار معنایی اطلاعات
تولید رابط کاربری و فرم های ورود اطلاعات
البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود.

فرایند تکامل HTML5
HTML 4 در سال ۱۹۹۷ منتشر شد. با گذشت زمان نیاز به ایجاد تغییرات برای برآوردن نیازهای جدید احساس میشد. روند کند توسعه استانداردهای وب که تحت نظارت W3C انجام میشد باعث شد تا گروه WHATWG متشکل از علاقمندان و نمایندگانی از شرکت های فعال در این عرصه نظیر Mozilla ، Opera و Apple در سال ۲۰۰۴ تشکیل شود. حاصل کار چند ساله این گروه در اواسط سال ۲۰۰۷ برای تدوین استاندارد HTML5 مورد قبول W3C واقع شد. HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (W3C) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد.

نشانه های جدید
HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند. بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video. همچنین بعضی از عناصر حذف شده اند. مانند تگ center.

چه امکاناتی را میتوان از Html5 انتظار داشت؟

فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابر کوکی”.
اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.
پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.
مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های twitter شما را برچسب گذاری کند.
فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.
تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون هیچ مشکلی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت، انجمن، سایتهای drag-and-drop نوشت.
تفاوت ها با HTML 4
لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:
عناصر جدید – section, video, progress, nav, meter, time, aside, canvas
عناصر صفحه – header, section, footer, figure
ویژگی های جدید برای تگ Input – date/time, email, url
ویژگی های جدید – ping, charset, async
ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat
عناصر حذف شده – center, font, strike
تغییرات HTML5
تغییرات HTML5 بیشتر در رابطه با هر چه بهتر برآوردن دو هدفی است که پیشتر گفته شد.
» تگ های جدیدی که برای توصیف بهتر ساختار معنایی اطلاعات افزوده شده عبارتند از:
section , article , aside, header , footer , nav , dialog , figure

» تغییرات جدید برای طراحی بهتر فرم های ورود اطلاعات، افزوده شدن انواع جدیدی از input نظیر :
datetime, datetime-local, date, month, week, time, number, range, email, url
تگ های جدید output و datalist
» برخی از تگ های جدید برای پویا تر شدن محتوا و رابط کاربری:
audio, video, canvas, meter, progress, event-source, …

:: برای مشاهده تگ های جدید اضافه شده به نسخه ۵ و توضیح کوتاهی در مورد هر یک، به صفحه HTML 5 Reference مراجعه نمایید. تگ های جدید با (NEW) مشخص شده است. (در سایت W3schools)

ساختار کلی یک صفحه وب مبتنی بر HTML۵
همانطور که گفته شد HTML5 تغییرات بسیاری نسبت به نسخه پیشین خود داشته است. یکی از مهمترین ویژگی های HTML5 مشخص نمودن نوع محتوا است که می‌تواند تحولی در عرصه‌ موتورهای جستجو باشد به این صورت که شما با مشخص کردن مکان دقیق مطالبتان، آنها را از قسمت‌های دیگر سایت که همیشه ثابت هستند جدا کرده و باعث دسته‌بندی صحیح محتوا برای موتورهای جستجو می‌شوید.
در اینجا با تصویری ساده درباره این قابلیت HTML5 توضیح می دهیم.
ساختار کلی یک صفحه وب مبتنی بر از HTML۵

همانطور که در تصویر مشاهده میکنید تمامی قسمت‌ها توسط تگ‌هایی از یکدیگر جدا شده‌اند و این، کار را برای موتورهای جستجو راحت میکند.
در ادامه توضیح کوتاهی در مورد تگ های موجود در تصویر ارائه می دهیم:

<header>
همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص می‌سازد و تمامی عناصر مربوط به سربرگ بین دو تگ
<header> و </header> قرار می‌گیرند به صورت زیر:
<header>
.
.
</header>
<aside>
محتوای سایت که در کنار صفحه و جدا از محتوای اصلی تعریف شده و با محتوای قسمت های دیگر صفحه مرتبط می باشد در تگ <aside> قرار می گیرند. لینک های صفحه در این قسمت قابل تعریف می باشند.

<section>
از این تگ برای تعریف بخش ها در صفحه استفاده می شود. فصل ها ، سرصفحه ، پاورقی ، بخش های مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می گردد.

<article>
جهت تعریف محتوای خارجی از تگ <article> استفاده می شود. محتوای خارجی می تواند یک مقاله خبری از ارائه دهنده های خارجی، یک متن از وبلاگ و یا یک متن از یک بخش یا هر چیز دیگر از یک منبع خارجی باشد.

<footer>
تگ <footer> همانطور که از نامش پیداست برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ صفحه قرار می‌گیرند بین دو تگ <footer> و </footer> قرار می‌گیرند.

در اینجا این ویژگی ها را به صورت کلی بیان می کنم. در هر کلاس، نماد رسمی آن را نیز در مقابل آن مشاهده می کنید.

کلاس معنایی (Semantics)
HTML5 Semantics – وب معنایی معنا بخشیدن به ساختار HTML در مرکز HTML5 قرار دارد. مجموعه جدیدی از تگ های معنایی به HTML5 افزوده شده است و همین طور به همراه RDFa، Microdata و Microformats وب مفیدتری بر پایه داده برای برنامه ها و کاربران ایجاد می کند.

برای نمونه تگ هایی مثل section، article، footer، header و nav برای چنین منظوری تدارک دیده شده اند. با تگ article قسمتی که محتوا و مطلبی مانند یک مقاله قرار دارد را می توان مشخص کرد. با استفاده از nav می توان لینک های ناوبری سایت (navigation) را از سایر قسمت ها متمایز کرد.

همین طور Microdata که پروتکل مجزایی از HTML5 برای افزودن داده ساختاریافته به صفحه وب است بیشتر حول HTML5 توسعه یافته است.

کلاس ذخیره سازی و برنامه آفلاین (Offline & Storage)
HTML5 offline storage – ذخیره سازی و برنامه وب آفلاین این یکی از ویژگی هایی است که در نوع خود یک تحول بزرگ در صفحات و برنامه های تحت وب به شمار می رود. با به کار گیری ویژگی های این دسته، برنامه های وب سریعتر کار می کنند و حتی می توانند بدون اتصال به اینترنت به کار خود ادامه دهند. امکاناتی که در این رده به HTML افزوده شده اند عبارتند از:

HTML5 App Cache
Local Storage
Indexed DB
File API
تعدادی از این ویژگی ها این امکان را ایجاد می کنند که یک صفحه وب در یک مرورگر بتواند داده های خود را ذخیره و نگهداری کند و بتواند به صورت آفلاین کاری را انجام دهد و سپس در اتصال بعدی به اینترنت مجددا خود را با برنامه موجود در سرور به روز کند.

کلاس دسترسی به دستگاه ها (Device Access)
HTML5 Device Access – دسترسی به داده های دستگاه با استفاده از API موقعیت جغرافیایی که HTML5 ارائه می کند (Geolocation API) برنامه های وب می توانند ویژگی های غنی تر و آگاه تری نسبت به دستگاه کاربر ارائه کنند.

با اجازه کاربر، برنامه نویس می تواند اطلاعات موقعیت مکانی کاربر را دریافت کند و با توجه به این داده ها، موقعیت جغرافیایی کاربر را در اطلاعاتی که در صفحه به او ارائه می دهد تاثیر بدهد. برنامه نویس می تواند با استفاده از JavaScript به این داده ها دسترسی بیابد.

کلاس اتصال (Connectivity)
HTML5 Connectivity – اتصال اتصالی که بسیار بهینه تر هست به معنی یک چت همزمان تر، بازی های سریعتر و ارتباطات بهتر است. سوکت های وب (Web Sockets) داده ها را به شکل بهینه تری نسبت به قبل بین کلاینت و سرور رد و بدل می کنند.

پروتکل وب سوکت یک ارتباط کاملا دو طرفه بین کلاینت و برنامه سمت سرور فراهم می کند. با استفاده از این API در جاوا اسکریپت می توانید این ارتباط را در کلاینت مدیریت کنید.

کلاس چند رسانه ای (Multimedia)
HTML5 Multimedia – چند رسانه ای عبارت جالبی که در این باره بیان می شود این است که audio و video به شهروندان درجه اول HTML5 تبدیل می شوند. یعنی همانطور که قبلا تصویر img در گذشته به صورت پیش فرض پشتیبانی می شد از صوت و ویدئو نیز پشتیبانی می شود.

بنابراین با HTML5 تگ های audio و video نیز به مجموعه تگ های تولید صفحه وب افزوده می شوند و نیازی به استفاده از راه حل های دیگر با فلش یا جاوااسکریپت برای نمایش صدا و تصویر ندارید.

کلاس گرافیک و افکت (Graphics & Effects)
HTML5 Effects – افکت و استایل پیش از این برنامه نویسان وب برای جلوه های بصری در صفحات وب دچار محدودیت زیادی بودند. نهایتا از CSS، و جاوا اسکریپت و یا پلاگین هایی نظیر فلش برای مقاصد خود بهره می بردند ولی اکنون با با استفاده از SVG، canvas، WebGL و ویژگی های CSS3 می توانید کاربران خود را با جلوه های بصری شگفت زده کنید.

برای نمونه در CSS3 امکانات جالبی برای ساخت حرکت های ساده و حتی انیمیشن تعبیه شده است. تگ canvas تگ جدیدی است که برای رسم گرافیکی از آن در صفحات وب استفاده می شود. SVG نیز یک فرمت گرافیکی وکتور بوده است که اکنون HTML5 از آن به صورت درون متنی (inline) پشتیبانی می کند.

کلاس کارآیی و یکپارچه سازی (Performance & Integration)
HTML5 Performance – کارآیی در این دسته امکان تولید نرم افزار های وب و صفحات داینامیک به شکل سریعتری با به کارگیری تکنیک ها و تکنولوژی هایی نظیر Web Worker و XHR 2 فراهم شده است. کاربران در این صورت تجربه بهتری در کار با نرم افزار های تحت وب خواهند داشت که اکنون پاسخگویی و واکنش بهتری دارند.

برای نمونه با استفاده از worker ها می توان کدهایی را با جاوا اسرکیپت اجرا کرد که بتوانند به صورت همزمان در حال اجرا باشند ولی کار بازدید کننده با صفحه را متوقف نسازند.

کلاس نمایش و استایل (CSS3)
HTML5 Styling – استایل و سی اس اس تکنولوژی CSS3 بازه وسیعی از افکت ها و استایل ها را ارائه می کند. بدون اینکه شما مجبور باشید به ساختار معنایی صفحه را به هم بزنید و یا کارآیی را کاهش دهید. همین طور فرمت فونت باز وب (WOFF) انعطاف پذیری در تایپوگرافی و کنترل بسیار بیشتری از آنچه که تاکنون در وب بوده است می دهد.

در CSS3 خصوصیت ها و انتخابگر های جدیدی افزوده شده است. ویژگی های برای ایجاد انیمیشین، حرکات دو بعدی و سه بعدی، گوشه های گرد برای کادر ها، سایه برای متون و کادر ها از جمله امکانات CSS3 هستند.

HTML5 badge سایت W3C برای ترویج هر چه بیشتر استفاده از HTML5 لوگوهایی رسمی و به شکل های متفاوتی ارائه کرده است و درخواست می کند که از آنها در سایت های مختلف برای ترویج بیشتر آن استفاده شود. با مراجعه به این صفحه می توانید این لوگو ها را مشاهده کنید و یا آن را برای استفاده خود سفارشی کنید.