چگونه از ورژن های قدیمی HTML به HTML5 مهاجرت کنیم؟ منظور از مهاجرت به HTML5 چیست؟ تغییر کد ها از HTML4 به HTML5 چگونه است؟ چطور میتونیم از HTML4 به HTML5 مهاجرت کنیم؟ همه این سوالات را در این مقاله مورد بررسی قرار می‌دهیم.
سرفصل‌های پست
مهاجرت به html5
در این مقاله قصد داریم که به موضوع مهاجرت از نسخه های قدیمی HTML به HTML5 صحبت کنیم.
در این مقاله نحوه تبدیل صفحات HTML4 به HTML5 بدون از بین بردن چیزی از محتوای اصلی به تصویر کشیده می شود. شما می توانید از روش های گفته شده برای مهاجرت از XHTML به HTML5 استفاده کنید.
نمونه یک صفحه HTML4
در زیر نمونه کدی از یک صفحه HTML4 را مشاهده می‌کنید. در این مقاله می‌خواهیم این کد را از HTML4 به HTML5 بروزرسانی کنیم.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
در ادامه شروع به بروزرسانی کد ها به HTML5 می‌کنیم. با ما همراه باشید.
تغییر خاصیت Doctype در HTML5
اولین خاصیت یا کدی که هر صفحه HTML در خود دارد خاصیت Doctype هستش. این خاصیت به ما اعلام میکند که صفحه ای که درحال استفاده از آن هستیم از نظر استاندارد از استاندارد HTML استفاده میکند.
در زیر استاندارد Doctype برای HTML4 را مشاهده می‌کنید.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
تبدیل Doctype به HTML5
در نسخه HTML5 دیگر توضیحات بسیار زیادی که در Doctype های نسخه های قدیمی وجود دارد دیگر حذف شده است و به جای آن فقط یک Doctype HTML مانند نمونه زیر قرار می‌دهیم و دیگر از طولانی نویسی پرهیز شده است.
<!DOCTYPE html>
مهاجرت انکود ها
همانطور که در مقاله آشنایی با Charset ها و آشنایی با Meta Tag ها بار ها انکود های مختلف را توضیح دادیم. باز هم لازمه که نمونه ای از انکود ها را اینبار برای مهاجرت بررسی کنیم.
در زیر نمونه ای از Charset موجود در HTML4 را مشاهده می‌کنید که باید برای پشتیبانی آن در نسخه HTML5 به صورت کامل تغییر کند.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
مهاجرت به انکود HTML5
در انکود نسخه HTML5 مانند Doctype اطلاعات اضافه مثل http-equiv و … حذف شده و با قرار دادن یک خاصیت به نام charset دیگر کار تمام است و انکود شما به HTML5 تبدیل می‌شود. دقیقا کد زیر جایگزینی برای کدی است که در بالا برای HTML4 استفاده شده است.
<meta charset="utf-8">
اضافه کردن html5shiv برای پشتیبانی مرورگر های قدیمی
در html5 یک عنصر معنایی جدید اضافه شده است که توسط همه مروگر مدرن پشتیبانی می شود. به علاوه شما می توانید به مرورگر های قدیمی بیاموزید.
به هر حال، مرورگر IE8 و قبل از آن اجازه استایل دهی به عناصر ناشناس را نمی دهد. بنابراین html5shiv یک راه حل جاوا اسکریپتی است که اجازه می دهد عناصر ناشناخته در html5 برای مرورگر IE9 و قبل از آن قابل استایل دهی باشند.
<!--[if lt IE 9]> <script src="https://mizfa.com/blog/wp-content/litespeed/localres/aHR0cHM6Ly9vc3MubWF4Y2RuLmNvbS8=libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->
در رابطه با این موضوع در مقاله رفع مشکل HTML5 در مرورگر های مختلف به صورت کامل توضیح داده‌ایم.
تغییر تگ‌های معنایی و شروع مهاجرت به HTML5
امیدوارم قبل از ورود به این مقاله، در رابطه با تگ های معنایی موجود در HTML5 اطلاعات داشته باشید.
اگر در رابطه با این مقالات نمی‌دانید، پیشنهاد می‌کنم حتما قبلش اطلاعات لازم را در این رابطه بدست آورید، همچنین می‌توانید مقاله ما در رابطه با آشنایی با HTML5 را بخوانید.
کد های CSS :
برای تغییر کد های css که حاوی id و class برای استایل دهی هستند از نمونه زیر استفاده کنید:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
جایگزینی کد های استایل css برای عناصر معنایی html5 به شکل زیر:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
جایگزینی تگ‌های معنایی
و در نهایت با تغییر تگ‌های قدیمی به تگ‌های معنایی در html5 کار ما به صورت کامل تمام می شود.
<body> <header> <h1>Monday Times</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <section> <h2>News Section</h2> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet..</p> </article> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet..</p> </article> </section> <footer> <p>© 2014 Monday Times. All rights reserved.</p> </footer> </body>
نتیجه نهایی مهاجرت
خب کارمون به پایان رسید و تمامی تگ‌های قدیمی را بروزرسانی کردیم و حالا یک کد HTML5 داریم.
برای اینکه بهترین نتیجه را مشاهده کنید، کد های این مقاله را در Codepen قرار دادم که خروجی زنده آن را ببینید.
36873
تفاوت بین <article>، <section> و <div>
در اینجا یک تفاوت مبهم در نسخه استاندارد html5 بین عناصر article, section و div وجود دارد. در استاندارد html5، section برای تعریف یک بلوک مرتبط با عناصر داخلی استفاده می شود.
عنصر <article> به عنوان یک بلوک عنصر کامل، خودنگهدارنده عناصر مرتبط استفاده می شود.
عنصر <div> برای تعریف عناصر زیر مجموعه این بلاک استفاده می شود.
چگونه تعاریف بالا را تفسیر کنیم؟
در مثال بالا ما یک section را به عنوان یک نگهدارنده برای یک article استفاده کردیم. اما می توانستیم article را در داخل article به عنوان یک نگهدارنده استفاده کنیم.
در این اینجا چند مثال از تفاوت آن ها می آوریم:
36873
پایان ترم
[box type=”info” class=”question-from-users” width=””]با توجه به توضیحات این مقاله، آیا می‌توانیم بدون هیچ مشکلی نسخه های قدیمی HTML را به HTML5 بروزرسانی کنیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله در رابطه با مهاجرت از نسخه های قدیمی HTML به آخرین نسخه HTML یعنی HTML5 صحبت کردیم.
امیدوارم از این مقاله استفاده کافی را برده باشید و اگر کد‌های شما قدیمی هست آن را بروز کنید.
اگر سوال، پیشنهاد یا انتقادی داشتید؛ خیلی خوشحال میشم که بپرسید و منم در اولین فرصت به آنها پاسخ میدم. تا مقاله بعدی فعلا…
5 پاسخ
جواب سوال:
بله می توان جایگزین نمود ، تنها مشکلش فرآیند جایگزین کردن با دستورات جدید و استفاده از اسکریپت برای تعریف برخی تگ های جدید و سایر روش ها و زمان لازم برای پیاده سازی اینهاست
پاسخ سوال :
بله ولی با استفاده از اعمال دستوراتی جایگزین نظیر تصویر ارسالی
سلام محمد درود بر تو و ممنون از اینکه به صورت تصویری نمایش دادی.
سلام با تشکر از مطالب مفید و عالیتون.میخواستم بپرسم اگر مثلا ما یک عنصر divبا آیدی d1 داشته باشیم؛در html5 ما به جای اینکه در css نام سلکتور رو به صورت مثلا #d1 بنویسیم حتما باید به صورت div#d1 بنویسیم؟یعنی در نوشتن نام سلکتور حتما باید نام عنصر رو قبل از نام آیدی یا کلاس بیاریم؟
سلام الهام
نه حتما لازم نیست ولی بدون اگر این کار بکنی دقیق تر کد زدی.