یک نمونه از صفحه 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>© 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 ها هم استفاده کنیم.