HTML5 چیست و چه تفاوتی با HTML دارد؟

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

HTML5 چیست

اگر میخواهید بدانید که دقیقا HTML5 چیست، پیشنهاد میکنیم فیلم زیر را مشاهده کنید

چرا باید از HTML5 استفاده کنیم؟

HTML5 اخرین نسخه از HTML است که به کمک طراحان و برنامه نویسان وب آمده، تا طراحی وب را برای آن‌ها راحت تر کند. اگر بخواهیم بگوییم که HTML5 چیست ، میتوانیم بگوییم HTML5 اخرین نسخه از HTML است که آمده است بسیاری از ویژگی ها را برای طراحان وب مهیا کرده است.

در ادامه بیشتر با HTML5 آشنا میشویم و به سوال HTML5 چیست پاسخ میدهیم.

اگر هنوز با HTML آشنایی ندارید، پیشنهاد میکنیم حتما این فیلم آموزشی را مشاهده کنید: HTML چیست و چه کاربردی دارد؟

HTML5 = افزایش کارایی

HTML5 اصولا آمده است که طراحی وب را برای طراحان و برنامه نویسان وب راحت تر کند. ویژگی هایی که در HTML5  معرفی شده است (که در ادامه آن‌هارا معرفی میکنیم) بسیاری از کارهارا راحت تر کرده اند.

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

برخی از مهم ترین ویژگی های HTML5

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

• پشتیبانی کامل از CSS3
• گرافیک های ۲بعدی و ۳بعدی
• پشتیبانی از SVG ها
• پشتیبانی کامل از صوت و ویدئو
• ساخت اپلیکیشن ها و پایگاه‌های داده لوکال (Local)
• تگ های معنا گرا (Semantic Tags)
• ویژگی های جدید برای فرم ها
• پشتیبانی از قابلیت Drag & Drop (کشیدن و رها کردن)

 پشتیبانی از HTML5

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

بسیاری از مرورگرهای معروف،در چند سال اخیر، همگی از HTML5 بصورت کامل ساپورت و پشتیبانی میکنند. مهم نیست که شما کاربر گوگل کروم باشید، یا فایرفاکس. مهم این است که نسخه مرورگر (Browser) خود را به آخرین نسخه بروزرسانی کنید.

مهم ترین ویژگی HTML5 از نظر من!

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

در گذشته وقتی که میخواستیم صفحات وب را طراحی کنیم، برای بخش بندی صفحات وب، از تگ های div استفاده میکردیم. برای مثال وقتی میخواستیم هدر سایت را طراحی کنیم، عموما از تکه کد زیر استفاده میکردیم:

< div id="header">
   // header
</ div>

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

• تگ <header> : برای ساخت هدر سایت استفاده میشود و باید محتوی هدر سایت شما باشد.
• تگ <nav> : برای ساخت منو ناوبری (Navigation Menu) سایت استفاده میشود و باید محتوی منوی سایت شما باشد.
• تگ <article> : برای ساخت مقالات و محتوای سایت استفاده میشود و باید شامل محتوای سایت شما باشد.
• تگ <aside> : برای ساخت منوی کناری (sidebar) سایت استفاده میشود و باید محتوی سایدبار سایت شما باشد.
• تگ <section> : برای ساخت قسمت‌هایی از سایت استفاده میشود که اسم خاصی ندارد و صرفا یک قسمت در سایت هستند.
• تگ <footer> : برای ساخت بخش پایینی (Footer) سایت استفاده میشود و باید محتوی فوتر سایت شما باشد.

البته تعداد تگ های معناگرا (Semantic Tags) بیشتر از این هاست، ولی در لیست بالا معروف ترین و پرکاربردترین آن‌ها را خدمتتان معرفی کردیم. اگر به دنبال لیست کامل تری از این تگ ها هستید، این صفحه در w3schools میتواند بسیار مفید باشد.

اما میرسیم به مهم ترین ویژگی تگ های معنا گرا در HTML5:

تگ های معنا گرا یا Semantic tag ها یک ویژگی فوق العاده دارند. آن‌ها میتوانند قسمت های مختلف صفحه وب را به موتورهای جستجو معرفی کنند. در واقع وقتی که شما برای مقالا‌ت‌تان از تگ <article> استفاده میکنید، به موتور های جست و جو این پیام را میدهید که محتویات این تگ، مقاله و محتوای من است که باید آن‌را به کاربران خود نشان دهی. و بطور کلی تمام این تگ ها، معنایی را همراه خودشان به موتورهای جست و جو ارسال میکنند. بوسیله ی این تگ ها، موتورهای جست و جو، بهتر میتوانند قسمت های مختلف سایت‌مان را تشخیص دهند.

نکته‌ی بسیار مهم: البته باید حواسمان باشد که در هر تگ، محتوایی که واقعا مربوط به همان تگ است را در آن قرار دهیم. مثلا واقعا محتوا و مقاله ها را داخل تگ <article> و واقعا هدر سایت را داخل تگ <header> قرار دهیم. بعضا مشاهده شده است که بعضی از دوستان از این تگ ها در جاهای نادرستی استفاده کرده اند.

HTML5 با CSS3 = یک جادوی بزرگ!

در پاسخ به سوال HTML5 چیست باید بگوییم که HTML5 به تنهایی نمیتواند قدرت خاصی داشته باشد. HTML5 و کلا HTML، به یک مکمل فوق العاده به نام CSS وجود دارد. این دو تکنولوژی با کمک هم، میتوانند صفحات وب فوق العاده ای را خلق کنند. در مقاله‌‌ی بعدی درباره CSS و CSS3 اطلاعات کاملی را ارائه میدهیم.

در این مقاله سعی کردیم یک پاسخ جامع برای سوال HTML5 چیست مطرح کنیم. نظر شما درباره‌ی HTML5 چیست ؟ بنظرتان چقدر طراحی وب را راحت تر و سریع تر کرده است؟ چه تجربه‌ی کاری‌ با HTML5 دارید؟