مهاجرت HTML5

انتقال از HTML4 به HTML5

این فصل به شما آموزش می‌دهد که چگونه یک صفحه HTML4 معمولی را به HTML5 معمولی منتقل کنید.

این فصل به شما نشان می‌دهد که چگونه یک صفحه HTML4 موجود را به صفحه HTML5 تبدیل کنید، بدون اینکه محتوای اصلی و ساختار آن آسیب ببیند.

Note:شما می‌توانید از تکنیک‌های مشابه برای انتقال از HTML4 و XHTML به HTML5 استفاده کنید.

HTML4 معمولی HTML5 معمولی
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

صفحه‌ی HTML4 معمولی

مثال

<!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.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;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 id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

آزمایش کنید

Change to HTML5 Doctype

Modify document type from HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Change to HTML5 doctype:

<!DOCTYPE html>

آزمایش کنید

Change to HTML5 encoding

Modify encoding information from HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Change to HTML5:

<meta charset="utf-8">

آزمایش کنید

Add shiv

All modern browsers support HTML5 semantic elements.

In addition, you can "teach" old browsers how to handle "unknown elements".

shiv added for Internet Explorer support:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

آزمایش کنید

Note:Read more about shiv in HTML5 browser support.

Add CSS for HTML5 semantic elements:

Please see the existing CSS styles:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Duplicate with equal CSS styles for HTML5 semantic elements:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

آزمایش کنید

to HTML5 <header> and <footer>

Change the <div> elements with id="header" and id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</div>

به عناصر معنایی HTML5 <header> و <footer> تغییر دهید:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

آزمایش کنید

به HTML5 <nav> تبدیل کنید

عنصر <div> با id="menu" را تغییر دهید:

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

به عناصر معنایی HTML5 <nav> تغییر دهید:

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

آزمایش کنید

به HTML5 <section> تبدیل کنید

عنصر <div> با id="content" را تغییر دهید:

<div id="content">
.
.
.
</div>

به عناصر معنایی HTML5 <section> تغییر دهید:

<section>
.
.
.
</section>

آزمایش کنید

به HTML5 <article> تبدیل کنید

تمام عناصر <div> با class="post" را تغییر دهید:

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

به عناصر معنایی HTML5 <article> تغییر دهید:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

آزمایش کنید

این استایل‌های «بلا نیاز» را حذف کنید:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

آزمایش کنید

صفحه‌ی معمولی HTML5

در نهایت می‌توانید برچسب <head> را حذف کنید. در HTML5 دیگر نیاز به آنها نیست:

مثال

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<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>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>

آزمایش کنید

تفاوت بین <article>، <section> و <div>

در استاندارد HTML5، تفاوت بین <article>، <section> و <div> بسیار کم و گیج‌کننده است.

در استاندارد HTML5، عنصر <section> به عنوان یک بلوک مرتبط تعریف شده است.

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

عنصر <div> به عنوان یک بلوک فرزند تعریف شده است.

چگونه باید این را درک کنیم؟

در مثال‌های بالا، ما از <section> به عنوان محفظه مرتبط <articles> استفاده کردیم.

اما، ما همچنین می‌توانیم <article> را به عنوان محفظه مقاله استفاده کنیم.

در اینجا چند مثال مختلف آورده شده است:

بودجه <article> در <article>:
<article>
<h2>شهرهای معروف</h2>
<article>
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان و پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</p>
</article>
<article>
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</article>
<article>
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</article>
</article>

آزمایش کنید

<article> در <div>：</article>
<article>
<h2>شهرهای معروف</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان و پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</p>
</div>
<div class="city">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</article>

آزمایش کنید

<article> در <section> در <div>：</article>
<article>
<section>
<h2>شهرهای معروف</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان و پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</p>
</div>
<div class="city">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="city">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</section>
<section>
<h2>کشورهای معروف</h2>
<div class="country">
<h2>انگلستان</h2>
<p>لندن پایتخت شهر انگلستان و پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</p>
</div>
<div class="country">
<h2>فرانسه</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="country">
<h2>ژاپن</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</div>
</section>
</article>

آزمایش کنید