اگر کمی با مفاهیم برنامه‌نویسی وب آشنایی داشته باشید، میدانید که هر وب سایت از ۲ بخش Front-End و Back-End تشکیل شده است. در گام‌های اولیه برای نوشتن و طراحی Front-End نیاز دارید که به سراغ HTML بروید. Html یک زبان برنامه‌نویسی نیست بلکه یک زبان نشانه‌گذاری است.
در این مقاله هدف ما آموزش صفر تا صد html نیست بلکه قصد داریم تفاوت html4 و html5 را به طور تخصصی بررسی کنیم. در انتهای این مقاله شما متوجه تفاوت‌های کلی html4 و html5 ، تغییرات attribute ها و تفاوت تگ‌ها در این ۲ ورژن میشوید، همچنین توانایی استفاده ازتگ‌های جدید html5 را پیدا خواهید کرد و مهم‌تر از همه اینکه مهاجرت از html4 به html5 برای شما امکان‌پذیر میشود.
Html4 بیشتر از ۱۰ سال است که جز ابزار توسعه وب استاندارد بشمار میرود. در واقع کنسرسیوم جهانی وب(سازمانی است که استانداردهای مربوط به فناوری‌های وب را مشخص و تایید میکند)، html4 را به عنوان یک زبان نشانه‌گذاری استاندارد برای مرورگرها تایید و تصویب کرده است.
با ظهور تلفن‌های هوشمند خیلی از شرایط زندگی تغییر کرده است. این تغییرات در نحوه ایجاد وب سایت‌ها نیز تاثیرگذار بوده‌است. امروزه توسعه دهندگان وب علاوه بر اینکه باید نیاز رایانه‌ها و لپ‌تاپ‌ها را هنگام توسعه در نظر بگیرند، کاربرانی که با گوشی موبایل به وب‌سایت آنها سر میزنند نیز به دغدغه‌های آنها اضافه شده‌است.
اگرچه هنوز 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
<canvas>
Canvas یک محیط مستطیل شکل در html است. این تگ به منظور رسم اشکال گرافیکی با کمک جاوااسکریپت استفاده میشود. در واقع این تگ فقط یک container یا نگهدارنده محتوای گرافیکی است. تگ <canvas> شامل متدهای مختلفی برای رسم مسیر مستقیم، دایره، باکس، کاراکترها و اضافه کردن عکس است.
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>تگ‌ها مربوط به مالتی مدیا
Html5 تگ‌هایی به منظور دسترسی به مالتی مدیا به ما ارائه میدهد. تگ‌های <audio>,<embed>,<source>,<track> و <video> از جمله این تگ‌ها هستند.
<video>
این تگ یک راه استاندارد به منظور قرار دادن ویدئو در صفحه وب است. فایلی که از طریق این تگ آپلود میکنیم میتواند فرمت Mp4, WebM, Ogg داشته باشد.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><audio>
این تگ یک راه استاندارد به منظور قرار دادن فایل صوتی در صفحه وب است. فایلی که از طریق این تگ آپلود میکنیم میتواند فرمت Mp3, Wav, Ogg داشته باشد.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio><article>
با کمک این تگ میتوانیم یک بخش مستقل را در صفحه وب نمایش دهیم. مثلا: مقاله‌ای از یک روزنامه، یک بلاگ کامل، کامنت کاربر یا محتواهایی از این قبیل.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article><main>
این تگ مطالبی را توصیف میکن که تنها مختص سندی است که در آن استفاده شده است. مطالبی که مکرر در اسناد دیگر مورد استفاده قرار میگیرند نباید در این تگ قرار داده شوند. تگ <main> باید تنها یکبار در صفحه استفاده شود. باید توجه داشته باشید از این تگ در تگ‌های <article>, <aside>, <header>, <footer>, <nav> نباید استفاده کنید.
<main>
<h2>Web Browsers</h2>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h3>Google Chrome</h3>
<p>Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
<article>
<h3>Microsoft Edge</h3>
<p>Edge is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h3>Mozilla Firefox</h3>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main><mark>
به شما این امکان را میدهد که متن را highlight کنید.
<p>Do not forget to buy <mark>milk</mark> today.</p>چرا باید از html5 استفاده کنیم؟(اینفوگرافیک)
در ادامه اینفوگرافیکی مشاهده می‌کنید که بیانگر مزایای html5 نسبت به html4 است. این اینفوگرافیک به صورت خلاصه مشکلات و کاستی‌های html4 و راه‌حل‌های html5 برای آن مشکلات را بیان میکند. در نتیجه دلیل مهاجرت از html4 به html5 را درک خواهید کرد:
در انتها از شما ممنونم که تا پایان این مقاله همراه ما بودید. اگر تجربه‌ای در رابطه با تگ‌های جدید html5 دارید، حتما با ما و سایر خوانندگان این مقاله به اشتراک بگذارید. امیدوارم این مقاله به شما در درک کلی html5 و تفاوت html4 و html5 کمک کرده باشد. راستی به نظ شما واقعا مهاجرت از html4 به html5 الزامی است؟
برای مطلع شدن از آخرین اخبار، مقاله‌ها و دوره‌های تصویری ما میتونید در کانال تلگرام چ یاب عضو بشین: عضویت در کانال تلگرام
