در این فصل به طور مفصل در مورد چگونگی مهاجرت از HTML4 به HTML5 صحبت می کنیم.
در این مقاله بیان می کنیم که چگونه یک صفحه HTML4 را بدون از بین بردن محتوای اصلی و یا ساختار به HTML5 تبدیل کنید. شما در هنگام طراحی سایت می توانید 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>
|
تفاوت بین تگ های <article>، <section> و <div>
یک تفاوت گیج کننده در استاندارد HTML5 بین <article>،> <section و <div> وجود دارد.
• در HTML5، عنصر <section>، به عنوان یک بلوک از عناصر مرتبط تعریف شده است.
• تگ <article> تعریفی از یک بلوک (block) جامع و کامل از عناصر مرتبط است.
• و عنصر <div> بیانگر یک بلوک حاوی عناصر کودک است.
در اینجا برای درک بهتر این تفاوت ها چند مثال ارائه کرده ایم.
مثال 1: <article> در <article>
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>
مثال 2: <div> در <article>
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article>
مثال 3: <div> در <section> در <article>
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article>