HTML5 چیست؟ | ظرفیت های HTML5

HTML5 چیست؟

ترکیب HTML5 و CSS3 ابزار قدرتمندی جهت ارائه وب سایتهایی زیبا و جذاب است. امکانات html5 به قدری گسترده است که ناگزیر افزودن برخی از آنها به سبب مراعات حال توسعه دهندگان مرورگرها نظیر مایکروسافت ( اکسپلورر) ، گوگل (کروم) و ... به آینده موکول شده است.


اگر پانزده سال به گذشته برگردید و نگاهی به صفحات وب بیندازید با متن های کسالت آوری مواجه خواهید شد و شاید یک شگفتی ! یک تصویر در میان انبوهی از نوشته ها و حاشیه ها.

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

HTML5 چیست؟

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

قبل از هر چیز باید بدانیم که HTML5 نسخه ویرایش شده HTML4  نیست زیرا HTML5 شامل تمامی عناصر نسخه قبلی و XHTML 1.0 است و در طراحی آن نکات بسیاری مورد توجه قرار گرفته است تا بر روی مرورگرهای قبلی به صورت کارآمد و مناسب نمایش داده شود.

HTML5 برای عناصر و تگ های موجود تعریف تازه ای ارائه میدهد ، همچنین عناصر جدیدی به آن اضافه شده است که این دو عامل در صورت استفاده صحیح و بجا ، سبب طراحی محتوی با کدی معناگرا میشوند. برخی از تگ های اضافه شده عبارتند از : HEADER, FOOTER, SECTION, ARTICLE, NAV, ASIDE

یکی دیگر از خصوصیات HTML5 پشتیبانی از جدیدترین تکنولوژی های چند رسانه ای است به گونه ای که به راحتی توسط انسان قابل خواندن و مشاهده باشد و هم برای کامپیوترها و ماشینها قابل درک باشد.

چرا تگ های جدید به HTML5 اضافه شدند؟

اگر شما طراح سایت باشید ، مطمئنا از کلاس nav برای نمایش تصاویر یا یک پاراگراف استفاده نخواهید کرد. دلیل ایجاد عناصر جدید ، معناگرا شدن بیشتر است و نامگذاری این تگها بر اساس برچسب های عمومیت یافته میان اکثر طراحان صفحات وب است. در زیر کاربرد برخی از تگ ها توضیح داده شده است.

  • header : اطلاعات ابتدایی و لینک ها کمکی. هر محتویی که قبلا درون برچست <div id="header" > قرار می گرفت.
  • section : یک بخش عمومی که مجموعه ای از محتوی هاست. هر بخش از section (فرزندان) دارای عنوان است. میتوانید به صورت تو در تو از این تگ استفاده کنید. سایر تگ های موجود در section باید دارای ارتباط محتویی باشند. از این تگ فقط برای سبک دهی (STYLE) از طریق CSS CSS مخفف عبارت Cascade Style Sheet و برای سبک دادن به محتوی یک سند اچ تی ام ال استفاده میشود. استفاده نکنید. چنانچه محتوی این تگ شامل یکی از تگ های h2 تا h6 نباشد و آنرا در وب سایت W3C ارزیابی کنید پیام هشداری دریافت خواهید کرد.
  • article : عنصر article یک ترکیب کامل و مستقل در یک سند ، صفحه وب و برنامه کاربردی است و به صورت مستقل توزیع و یا قابل انتشار مجدد است. موارد استفاده از ان در پست های انجمن ها ، یک بخش از مجله یا روزنامه ، مقاله ، ویجت های تعاملی ، یک پست وبلاگ و یا هر مورد مستقل دیگر است. به طور معمول دارای یک عنوان ( h1 - h6 ) مستقل و در ارتباط با محتوی است.
  • nav : از این تگ در درجه اول جهت لینک های پیمایش کلی (منو) سایت و ناوبری (Navigation)استفاده میشود و در درجه بعدی مجموعه ای از لینک های پیمایش برای کمک به ناوبری سایت. محدودیتی در تعداد استفاده از این تگ وجود ندارد. استفاده از این تگ در footer توصیه نمیشود.
  • aside : یک بخش از صفحه که محتوی آن به طور ضمنی با محتوی اصلی در ارتباط است و میتوان آنرا جدای از محتوی دانست. از این تگ برای ستونهای فرعی ، لینکهای فرعی و بلوک های آگهی و مواردی از این قبیل میتوان استفاده کرد.
  • footer : پاورقی و اطلاعاتی که قبلا با برچسب footer در طراحی استفاده میکردید.

جهت آگاهی و کسب اطلاعات بیشتر میتوانید به توضیحات W3C مراجعه نمایید.

ایجاد توالی رنگ ها با استفاده از CSS3 در پس زمینه ، تبدیل متن به تصویر با استفاده از Javascript ، پشتیبانی از فرمتهای مختلف ویدئویی ، پخش و توقف ویدئو ، کنترل های محلی ، تبدیل ویدئو به فرمتهای قابل پخش بر روی وب با استفاده از سایر تکنولوژی ها و امکانات بسیار دیگر از جمله قابلیت های HTML5 است که خارج از ظرفیت های این یادداشت است. نمونه کوچکی از قابلیت های HTML5 را میتوانید از طریق این لینک استفاده از تگ canvas و جاوا اسکریپت برای تبدیل متن به عکس مشاهده کنید. چند خط ساده و یک نتیجه شگفت انگیز !

چرا HTML5 مهم است؟

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

محمود عزیزی / شنبه 21 تیر 1393