بررسی تخصصی تفاوت html4 و html5 + اینفوگرافیک

تفاوت بین html4 و html5

اگر کمی با مفاهیم برنامه‌نویسی وب آشنایی داشته باشید، میدانید که هر وب سایت از ۲ بخش Front-End‌ و Back-End‌ تشکیل شده است. در گام‌های اولیه برای نوشتن و طراحی Front-End‌ نیاز دارید که به سراغ HTML بروید. Html یک زبان برنامه‌نویسی نیست بلکه یک زبان نشانه‌گذاری است. در این مقاله هدف ما آموزش صفر تا صد html‌ نیست بلکه قصد داریم تفاوت html4 و html5 را به طور تخصصی بررسی کنیم. در انتهای این مقاله شما متوجه تفاوت‌های کلی html4 و html5 ، تغییرات attribute ها و تفاوت تگ‌ها در این ۲ ورژن میشوید، همچنین توانایی استفاده ازتگ‌های جدید html5‌ را پیدا خواهید کرد و مهم‌تر از همه اینکه مهاجرت از html4 به html5 برای شما امکان‌پذیر میشود.

Html4‌ بیشتر از ۱۰ سال است که جز ابزار توسعه وب استاندارد بشمار میرود. در واقع کنسرسیوم جهانی وب(سازمانی است که استانداردهای مربوط به فناوری‌های وب را مشخص و تایید میکند)، html4‌ را به عنوان یک زبان نشانه‌گذاری استاندارد برای مرورگرها تایید و تصویب کرده است.

با ظهور تلفن‌های هوشمند خیلی از شرایط زندگی تغییر کرده است. این تغییرات در نحوه ایجاد وب سایت‌ها نیز تاثیرگذار بوده‌است. امروزه توسعه دهندگان وب علاوه بر اینکه باید نیاز رایانه‌ها و لپ‌تاپ‌ها را هنگام توسعه در نظر بگیرند، کاربرانی که با گوشی موبایل به وب‌سایت آن‌ها سر میزنند نیز به دغدغه‌های آن‌ها اضافه شده‌است.

تفاوت بین html4 و html5

اگرچه هنوز html4 منسوخ نشده‌است اما به طور کامل پاسخگوی نیازهای جدید کاربران نیست، در این جا Html5‌ به عنوان ناجی وارد صحنه می‌شود! Html5‌ انعطاف‌پذیری بیشتری دارد و در مقایسه با همتای مسن‌تر خود پیشرفته‌تر است. پس مهاجرت از html4 به html5 توفیق اجباری به حساب می‌آید.

تفاوت‌های کلی بین html4‌ و html5

Syntax ساده

سینتکس html5‌ به مراتب ساده‌تر از html4‌ است.

عناصر Multimedia

Html5 با تگ‌های video‌ و audio از فایل‌های چندرسانه‌ای در وب پشتیبانی می‌کند. این در صورتی است که در html4 فایل‌های چندرسانه‌ای از طریق پلاگین‌های Silverlight و flash‌ در وب در دسترس بودند.

دسترسی به موقعیت جغرافیایی کاربر

در html4‌ دسترسی به مکان جغرافیایی بازدیدکنندگان از وب‌سایت کار دشواری بود اما این مشکل در html5 برطرف شده است. Js geolocation‌ در html5 به این منظور استفاده می‌شود.

ذخیره سازی در سمت client

در html4‌ برای ذخیره داده‌های مهم در سمت client‌ از cache‌ مرورگر استفاده می‌شود. اما cache‌ مرورگر محدود است و مکانیزم ذخیره‌سازی relational‌ را پشتیبانی نمیکند. در html5‌ این موضوع از طریق پایگاه داده web  حل میشود.

ارتباط بین client‌ و server

در html4‌ ارتباط بین client‌ و server‌ از طریق streaming و polling انجام میشود چون هیچ socket وب‌ای در html4 وجود ندراد. برعکس در html5‌ سوکت وب‌هایی موجود است که اجازه برقراری ارتباط کاملا دوطرفه میان client‌ و server‌ را میدهد.

مکانیزم Threading در جاوااسکریپت

در html4‌ جاوااسکریپت و interface‌ مرورگر که کاربر با آنها در تعامل است در یک thread اجرا میشوند که روی عملکرد تاثیر منفی میگذارد. اما html5 شامل یکسری API جاوا اسکریپت است که به جاوااسکریپت و interface مرورگر این امکان را میدهد که در thread‌های جداگانه‌ای اجرا شوند که باعث بهبود performance‌ میشود.

سازگاری با مرورگرها

همانطور که قبلا ذکر کردیم، Html4 یک استاندارد تثبیت شده برای تمام مرورگرهاست که بیش‌تر از ۱۰ سال است که از آن استفاده می‌شود. به همین دلیل html4 تقریبا با تمام مرورگرهای وب سازگار است. از طرفی html5‌ هنوز در فرآیند تکامل است و برچسب‌های جدید نیز به آن اضافه شده‌است. بنابراین html5‌ به لحاظ سازگاری با مرورگرها از html4 عقب‌تر است.

تفاوت تگ‌ها در html4 و html5

چندین تگ در html5 نسبت به html4 حذف شدند یا تغییر کردند که در این قسمت به آن‌ها اشاره می‌کنیم:

تگ <Applet> حذف و تگ <Object> در html5 اضافه شد

در html4 از تگ <Applet> برای نمایش اپلت‌های مختلف در مرورگر‌ها استفاده می‌شد. هرچند این تگ در html5‌ حذف شده است اما از تگ <Object>‌ برای نمایش آیتم‌هایی که نوع اپلت دارند، استفاده میشود.

تگ <Acronym> حذف و تگ <Abbr> در html5 اضافه شد

در html4 از تگ <Acronym> جهت مخفف کردن کلمات استفاده میشد. (مثلا  World Health Organization را به صورت WHO مخفف میکند) در html5  این تگ حذف شده است و به این منظور از تگ <Abbr>‌ استفاده میشود.

تفاوت در استفاده از تگ <hr> در html5

در html4‌ و تمام نسخه‌های قبل html‌ این تگ به منظور کشیدن یک خط استفاده میشد. اما در html5‌ قابلیت این تگ تغییر کرده است و به منظور تعریف شکاف موضوعی در صفحه وب،‌ استفاده میشود.

تفاوت در استفاده از تگ <a> در html5

در html4‌ و تمام نسخه‌های قبل html‌ این تگ به منظور  لینک دادن به جایی،‌استفاده میشد. اما در html5‌ قابلیت این تگ تغییر کرده است و تنها به عنوان یک hyperlink‌ از آن استفاده میشود. البته اگر ویژگی href را از تگ <a> حذف کنیم، میتوان از آن به عنوان place holder‌ برای سایر hyperlink ها استفاده کرد.

ویژگی schema از تگ <meta> در html5 حذف شده است

تگ <meta>‌ در بخش header‌ در html‌ تعریف میشود که شامل اطلاعاتی  درباره data‌‌ی درون مرورگر که به کاربر نمایش میدهد است. در html4‌ تگ متا شامل یک ویژگی به نام schema‌ بود که یک شمای کلی از document‌ به ما ارائه میداد. این ویژگی در html5‌ حذف شده است.

تغییرات در attribute‌ها

  • در html4‌ و htmlهای قبل از آن از تگ <script>‌ برای متصل کردن کدهای جاوااسکریپت به html‌ استفاده میشد. در html5‌ به این منظور نیاز به استفاده از تگ خاصی نیست.
  • در html4‌ و htmlهای قبل از آن تگ <table>‌ میتوانست attribute‌های زیادی داشته باشد. اما در html5‌فقط میتواند border‌ داشته باشد که value‌ آن میتواند zero‌ یا one‌ باشد.
  • در ورژن قبلی html‌ تگ <meta>‌ فاقد attribute charset بود. این attribute به منظور انکد کردن محتوای مرورگرها استفاده میشود که در html5‌ اضافه شده است.

تگ‌های جدید html5

مهاجرت از html4 به html5

<canvas>

Canvas  یک محیط مستطیل شکل در html‌ است. این تگ به منظور رسم اشکال گرافیکی با کمک جاوااسکریپت استفاده میشود. در واقع این تگ فقط یک container‌ یا نگهدارنده محتوای گرافیکی است. تگ <canvas> شامل متدهای مختلفی برای رسم مسیر مستقیم، دایره، باکس، کاراکترها و اضافه کردن عکس است.

تگ‌ها مربوط به مالتی مدیا

Html5‌ تگ‌هایی به منظور دسترسی به مالتی مدیا به ما ارائه میدهد. تگ‌های <audio>,<embed>,<source>,<track> و <video>‌ از جمله این تگ‌ها هستند.

<video> 

این تگ یک راه استاندارد به منظور قرار دادن ویدئو در صفحه وب است. فایلی که از طریق این تگ آپلود میکنیم میتواند فرمت Mp4, WebM, Ogg داشته باشد.

<audio>

این تگ یک راه استاندارد به منظور قرار دادن فایل صوتی در صفحه وب است. فایلی که از طریق این تگ آپلود میکنیم میتواند فرمت Mp3, Wav, Ogg داشته باشد.

<article>

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

<main>

این تگ مطالبی را توصیف میکن که تنها مختص سندی است که در آن استفاده شده است. مطالبی که مکرر در اسناد دیگر مورد استفاده قرار میگیرند نباید در این تگ قرار داده شوند. تگ <main>‌ باید تنها یکبار در صفحه استفاده شود. باید توجه داشته باشید از این تگ در تگ‌های <article>, <aside>, <header>, <footer>, <nav> نباید استفاده کنید.

<mark>

به شما این امکان را میدهد که متن را highlight‌ کنید.

چرا باید از html5‌ استفاده کنیم؟(اینفوگرافیک)

در ادامه اینفوگرافیکی مشاهده می‌کنید که بیانگر مزایای html5 نسبت به html4‌ است. این اینفوگرافیک به صورت خلاصه مشکلات و کاستی‌های html4 و راه‌حل‌های html5 برای آن مشکلات را بیان می‌کند. در نتیجه دلیل مهاجرت از html4 به html5 را درک خواهید کرد:

مهاجرت از html4 به html5

در انتها از شما ممنونم که تا پایان این مقاله همراه ما بودید. اگر تجربه‌ای در رابطه با تگ‌های جدید html5 دارید، حتما با ما و سایر خوانندگان این مقاله به اشتراک بگذارید. امیدوارم این مقاله به شما در درک کلی html5‌ و تفاوت html4 و html5 کمک کرده باشد. راستی به نظ شما واقعا مهاجرت از html4 به html5 الزامی است؟

برای مطلع شدن از آخرین اخبار، مقاله‌ها و دوره‌های تصویری ما میتونید در کانال تلگرام چ‌ یاب عضو بشین: عضویت در کانال تلگرام

0%

زمان مینی آزمون : 1 دقیقه!


چقدر از دانسته‌های خود مطمئنید؟
در این مینی آزمون خود را به چالش بکشید!

1 / 3

کاربرد تگ canvas‌ چیست؟

2 / 3

کاربرد تگ <hr> در html5 چیست؟

3 / 3

در html4 با کمک کدام پلاگین المنت‌های مالتی مدیا را به وب اضافه میکنیم؟

برای مشاهده نتیجه مینی آزمون، ایمیل خود را وارد کنید.

امتیاز شما

0%

امتیاز شما به این آزمون؟

نظرات

avatar
280
  اشتراک با:  
مرا مطلع کن!