مهاجرت از HTML4 به HTML5

How to Migrate from HTML4 to HTML5

0 288

چطور از HTML4 به HTML5 مهاجرت کنیم؟

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

تفاوت ساختار کلی HTML5 و HTML4
تفاوت ساختار کلی HTML5 و HTML4

در واقع یک صفحه ی عادی در HTML4 به شکل زیر است:

مشاهده ی خروجی در JSBin

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

در قسمت اول این صفحه declaration مربوط به HTML4 را می بینید:

همانطور که میدانید این declaration برای HTML5 تنها به صورت DOCTYPE! است و نیازی به چیز اضافه ای ندارد بنابراین برای تبدیل آن به HTML5 می گوییم:

در خط بعد با کد زیر روبرو می شویم:

این کد مخصوص به HTML4 نیست. اگر از جلسات اولیه یادتان باشد attribute ای به نام lang داشتیم که مخفف language (به معنی «زبان») بود. در اینجا آن را روی En یا همان English گذاشته ایم چرا که صفحه ی وب ما به زبان انگلیسی نوشته شده است. اگر بخواهیم آن را فارسی کنیم می نویسیم:

همچنین از آنجا که حالت پیش فرض صفحات HTML روی LTR (زبان های چپ به راست مانند انگلیسی) است با زبان فارسی که راست چین است سازگار نمی باشد بنابراین dir را هم اضافه می کنیم:

در خط بعدی با encoding صفحه مواجه می شویم که مخصوص HTML4 است:

این encoding قدیمی است بنابراین باید آن را به HTML5 برسانیم:

اگر می خواهید از مرورگرهای بسیار قدیمی پشتیبانی کنید و یا ساختار صفحه تان را دست نزنید، می توانید کد HTML5Shiv را به صفحه اضافه کنید. در HTML5 عناصر معنایی جدیدی معرفی شدند که در مرورگرهای امروزی پشتیبانی می شوند اما مرورگرهای قدیمی آن ها را نمی شناسند. اگر مرورگر کاربر قدیمی باشد عناصر معنایی به صورت عناصری ناشناخته تلقی می شوند بنابراین از نظر استایل دهی مشکلی پیدا نمی کنیم و صفحه مان بهم نمیریزد اما اگر مرورگر کاربران بسیار قدیمی باشد (مانند Internet Explorer 8 و نسخه های قبل از آن) دیگر حتی اجازه ی استایل دهی به این عناصر ناشناخته را نخواهیم داشت.

حل این مشکل با استفاده از مجموعه کد کوتاهی به نام HTML5Shiv انجام می شود که در زبان جاوا اسکریپت نوشته شده است. برای اضافه کردن HTML5Shiv به صورت زیر عمل می کنیم:

تا اینجای کار HTML را کنار می گذاریم و به سراغ کدهای CSS می رویم! کدهای CSS فعلی ما (HTML4) از id ها و کلاس ها برای استایل دهی عناصر استفاده می کنند:

ویرایش کردن این قسمت از کدهای CSS آنقدر ها هم سخت نیست. تنها باید id ها و کلاس ها را با نام عناصر جا به جا کنیم:

در آخر نیز باید به سورس کد HTML برگردیم و عناصر قدیمی را که با id و کلاس مشخص کرده بودیم تبدیل به عناصر معنایی HTML5 کنیم. در این صورت کد کامل شده ی ما برابر است با:

مشاهده ی خروجی در JSBin

انتقادات از HTML5

یکی از مشکلات HTML5 که همیشه مورد نقد متخصصین این حوزه و برنامه نویسان بوده است، نبود تفاوت درست و مهمی بین عناصر <article> <section> و <div> است. به طور مثال <section> به صورت «مجموعه ای از عناصر مرتبط به هم» تعریف شده است، <article> به صورت «گروهی از عناصر مرتبط با هم و مستقل» تعریف شده است و <div> نیز به صورت «مجموعه ای از عناصر فرزند» تعریف شده است. سوال اینجاست که تفسیر این مسئله بر عهده ی کیست؟ چطور باید چنین تعریفاتی را پیاده سازی کرد؟

پاسخ این است: کاملا به شما بستگی دارد! تا جایی که تفسیر شما بر اساس این تعریفات و منطقی باشد می توانید هر طور خواستید از آن ها استفاده کنید. به مثال های مختلف زیر دقت کنید:

<article> در <article>

<div> در <article>

<div> در <section> در <article>

انتخاب روش مناسب بر عهده ی شماست؛ تمام این روش ها صحیح هستند. امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort