एचटीएमएल5 मिग्रेशन

HTML4 से HTML5 में स्थानांतरित

इस चैप्टर में, एक टिपिकरित HTML4 पृष्ठ को टिपिकरित HTML5 पृष्ठ में स्थानांतरित करने का तरीका बताया जाता है。

इस चैप्टर में, एक मौजूदा HTML4 पृष्ठ को HTML5 पृष्ठ में बदलने का तरीका दिखाया जाता है जिससे मूल सामग्री और संरचना नुकसान के बिना बदला जा सके。

टिप्पणी:आप एक ही कौशल से HTML4 और XHTML को HTML5 में स्थानांतरित कर सकते हैं。

टिपिकरित HTML4 टिपिकरित HTML5
<div id="header"> <header>
<डिव आईडी="मेनू"> <nav>
<डिव आईडी="कंटेंट"> <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">
<एचटीएमएल लैंग="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<स्टाइल>
  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>
<डिव आईडी="मेनू">
  <ul>
    <li>समाचार</li>
    <li>खेल</li>
    <li>मौसम</li>
  </ul>
</div>
<डिव आईडी="कंटेंट">
<h2>समाचार खंड</h2>
<div id="post">
  <h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. सभी अधिकार अवधारित.</p>
</div>
</body>
</html>

स्वयं प्रयोग करें

HTML5 Doctype में बदलें

डॉक्यूमेंट टाइप को संशोधित करें, HTML4 DOCTYPE से:

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

DOCTYPE को संशोधित करें:

<डॉक्यूएमेंट टाइप="html">

स्वयं प्रयोग करें

HTML5 एनकोडिंग में बदलें

एनकोडिंग सूचना को संशोधित करें, HTML4 से:

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

HTML5 में बदलें:

<मेटा चार्सेट="utf-8">

स्वयं प्रयोग करें

shiv जोड़ें

सभी आधुनिक ब्राउज़र HTML5 समान्तर एलीमेंट का समर्थन करते हैं。

इसके अलावा, आप पुराने ब्राउज़रों को "अज्ञात एलीमेंट" का संभालन "शिक्षा" कर सकते हैं。

Internet Explorer समर्थन के लिए जोड़े गए shiv:

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

स्वयं प्रयोग करें

टिप्पणी:shiv के बारे में अधिक जानकारी पढ़ने के लिए HTML5 ब्राउज़र समर्थन में पढ़ें。

HTML5 भाषात्मक एलीमेंट के लिए CSS जोड़ें

इसके लिए मौजूदा CSS शैली देखें:

डिव#हेडर,डिव#फुटर,डिव#कंटेंट,डिव#पोस्ट {
    बॉर्डर:1पिक्सेल सॉलिड ग्रे,मार्गिन:5पिक्सेल,मार्गिन-बोटम:15पिक्सेल,पैडिंग:8पिक्सेल,बैकग्राउंड-कलर:व्हाइट;
}
डिव#हेडर,डिव#फुटर {
    color:white;background-color:#444;margin-bottom:5px;
}
डिव#कंटेंट {
    background-color:#ddd;
}
डिव#मेनू यूल {
    margin:0;padding:0;
}
डिव#मेनू यूल ली {
    display:inline; margin:5px;
}
HTML5 समान्तर एलीमेंट के लिए समान CSS शैली के साथ डुप्लीकेट करें:
हेडर,फुटर,सेक्शन,आर्टिकल {
    बॉर्डर:1पिक्सेल सॉलिड ग्रे,मार्गिन:5पिक्सेल,मार्गिन-बोटम:15पिक्सेल,पैडिंग:8पिक्सेल,बैकग्राउंड-कलर:व्हाइट;
}
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;
}

स्वयं प्रयोग करें

आइडी=\

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. सभी अधिकार अभिरक्षित.</p>
</div>

एचटीएमएल5 सांकेतिक तत्व <हेडर> और <फुटर> में संशोधित करें:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <पी>© 2016 CodeW3C.com. सभी अधिकार अभिलंबित.</पी>
</footer>

स्वयं प्रयोग करें

एचटीएमएल5 <नेव> में बदलें

आईडी="मेनू" के <डिव> एलीमेंट को:

<डिव आईडी="मेनू">
  <ul>
    <li>समाचार</li>
    <ली>स्पोर्ट्स</a></ली>
    <li>मौसम</li>
  </ul>
</div>

एचटीएमएल5 सांकेतिक तत्व <नेव> में संशोधित करें:

<nav>
  <ul>
    <li>समाचार</li>
    <ली>स्पोर्ट्स</a></ली>
    <li>मौसम</li>
  </ul>
</nav>

स्वयं प्रयोग करें

एचटीएमएल5 <सेक्शन> में बदलें

आईडी="कंटेंट" के द डिव एलीमेंट को:

<डिव आईडी="कंटेंट">
.
.
.
</div>

एचटीएमएल5 सांकेतिक तत्व <सेक्शन> में संशोधित करें:

<section>
.
.
.
</section>

स्वयं प्रयोग करें

एचटीएमएल5 <आर्टिकल> में बदलें

क्लास="पोस्ट" के सभी <डिव> एलीमेंट को:

<डिव क्लास="पोस्ट">
  <h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</div>

एचटीएमएल5 सांकेतिक तत्व <आर्टिकल> में संशोधित करें:

<article>
  <h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</article>

स्वयं प्रयोग करें

इन "अब आवश्यक नहीं होने वाले" स्टाइलों को हटाएँ:

डिव#हेडर,डिव#फुटर,डिव#कंटेंट,डिव#पोस्ट {
    बॉर्डर:1पिक्सेल सॉलिड ग्रे,मार्गिन:5पिक्सेल,मार्गिन-बोटम:15पिक्सेल,पैडिंग:8पिक्सेल,बैकग्राउंड-कलर:व्हाइट;
}
डिव#हेडर,डिव#फुटर {
    color:white;background-color:#444;margin-bottom:5px;
}
डिव#कंटेंट {
    background-color:#ddd;
}
डिव#मेनू यूल {
    margin:0;padding:0;
}
डिव#मेनू यूल ली {
    display:inline; margin:5px;
}

स्वयं प्रयोग करें

एक तीव्र एचटीएमएल5 पृष्ठ

अंत में आप <हेडर> टैग हटा सकते हैं. एचटीएमएल5 में उनकी आवश्यकता नहीं है:

उदाहरण

<डॉक्यूएमेंट टाइप="html">
<एचटीएमएल लैंग="en">
<टाइटल>एचटीएमएल5</टाइटल>
<मेटा चार्सेट="utf-8">
<![if lt IE 9]>
<स्क्रिप्ट स्रोत="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</स्क्रिप्ट>
<![endif]-->
<स्टाइल>
बॉडी {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
हेडर,फुटर,सेक्शन,आर्टिकल {
    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>समाचार</li>
    <li>खेल</li>
    <li>मौसम</li>
  </ul>
</nav>
<section>
<h2>समाचार खंड</h2>
<div id="post">
  <h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>समाचार लेख</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum</p> 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. सभी अधिकार अवधारित.</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>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
</article>
<article>
<h2>पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है。</p>
</article>
<article>
<h2>टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र。</p>
</article>
</article>

स्वयं प्रयोग करें

<article> में <div> :
<article>
<h2>मशहूर शहर</h2>
<div class="city">
<h2>लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी शहर है।यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,</p>
<p>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
</div>
<div class="city">
<h2>पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है。</p>
</div>
<div class="city">
<h2>टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र。</p>
</div>
</article>

स्वयं प्रयोग करें

<article> में <section> में <div> :
<article>
<section>
<h2>मशहूर शहर</h2>
<div class="city">
<h2>लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी शहर है।यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,</p>
<p>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</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>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
</div>
<div class="country">
<h2>फ्रांस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है。</p>
</div>
<div class="country">
<h2>जापान</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र。</p>
</div>
</section>
</article>

स्वयं प्रयोग करें