آموزش HTML – فصل بیست و نهم: تغییر کدهای HTML 4 به 5 HTML

فصل بیست و نهم آموزش های HTML نتران، درباره چگونگی جا به جایی از HTML 4 به HTML 5 است. این فصل تشریح می کند که چگونه بدون تخریب محتوا و ساختار اصلی، یک صفحه HTML 4 را به یک صفحه HTML 5 تبدیل کنیم. شما با ایندستور العمل می توانید یک جا به جایی بدون دردسر را بین XHTML و HTML 5 انجام دهید.

توسط: حامد ارسلانپور در 5 سال پیش (دسته ها: آموزش, آموزش برنامه نویسی, آموزش طراحی وب)

آموزش HTML – فصل بیست و نهم: تغییر کدهای HTML 4 به 5 HTML

یک نمونه از صفحه HTML 4

<!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>Netrun</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; 2020 Netrun. All rights reserved.</p>
</div>

</body>
</html>

برای تغییر کد های مثال بالا از HTML 4 به HTML 5 به شیوه زیر عمل کنید:

تغییر doctype به HTML 5

تغییر دادن doctype حال حاضر که این مورد است:

به داکتایپ HTML 5:

تغییر دادن Encoding

تغییر دادن اطلاعات Encoding که اکنون به صورت زیر است:

به اینکدینگ HTML 5:

اضافه کردن html5shiv

المان های معنایی جدید HTML 5 در تمام مرورگر های مدرن پشتیبانی می شود. اضافه بر این شما می توانید به مرورگر های قدیمی تر یاد بدهید که چگونه با المان های ناشناخته کنار بیایند. هرچند اینترنت اکسپلورر 8 و قدیمی تر از آن، استایل دادن به المان های ناشناخته را مجاز نمی دانند، راه حلی وجود دارد که این مشکل را حل می کند.

html5shiv یک ابزار فوق العاده جاوا اسکریپت است که استایل دادن به المان های اچ تی ام 5 را در نسخه های قبل از 9 اینترنت اکسپلورر میسر می کند.

اضافه کردن html5shiv:

تغییر دادن به المان های معنایی HTML 5

سی اس اسی که در مثال بالا دیدید، حاوی id ها و کلاس های برای استایل دادن به المان ها است:

سی اس اس بالا را با استایل های المان های معنایی HTML 5 جایگزین کنید:

و در نهایت المان های HTML را به المان های معنایی HTML 5 تغییر دهید:

تفاوت های بین article و section و div

به طور کلی در زبان HTML تفاوتی بین المان های article، section و div نیست.

در استاندارد HTML 5 المان <section> یک بلوک از المان های مرتبط است.

المان <article> یک بلوک مستقل است که از ترکیب المان های مرتبط تعریف می شود.

المان <div> یک بلاک حاوی المان های فرزند است.

چگونه این موضوع را تفسیر کنیم؟

در مثال بالا ما از <section> به عنوان یک جایگاه برای قرار گرفتن <article> های مرتبط استفاده کردیم. ولی می توانستیم از article به عنوان جایگاه برای article ها هم استفاده کنیم.

#آموزش HTML