एचटीएमएल5 ब्राउज़र समर्थन

आप एहोली ब्राउज़रों को HTML5 का सहारा दे सकते हैं।

एचटीएमएल5 ब्राउज़र समर्थन

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

इसके अलावा, सभी ब्राउज़र, नए या पुराने, अज्ञात एलिमेंटों को स्वत: इनलाइन एलिमेंट के रूप में संभालते हैं.

इसलिए, आप पुराने ब्राउज़रों को "अज्ञात" HTML एलिमेंटों का संभालन करने में मदद कर सकते हैं.

टिप्पणी:आप यहां तक कि पुराने स्टोन एज के IE6 को अज्ञात HTML एलिमेंट का संभालन सिखा सकते हैं.

HTML5 एलिमेंट को ब्लॉक स्टाइल के रूप में वर्णित करता है

HTML5 ने आठ नएसांकेतिक HTML एलिमेंट। सभी इसके लिएब्लॉक स्टाइलएलिमेंट

आप CSS को display प्रयोग किया गया है blockयह सुनिश्चित करने के लिए, पुराने ब्राउज़रों में सही व्यवहार:

उदाहरण

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

HTML में नए एलिमेंट जोड़ना

आप HTML में किसी भी नए एलिमेंट को ब्राउज़र के ट्रिक के द्वारा जोड़ सकते हैं:

इस उदाहरण में, HTML में एक नाम के एक नया एलिमेंट जोड़ा गया है <myHero> नए एलिमेंटों के लिए और उसके लिए display शैली निर्धारित करता है:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

खुद से प्रयास करें

जोड़े गए जावास्क्रिप्ट वाक्य document.createElement("myHero")केवल IE के लिए ही उपयोगी है.

इंटरनेट एक्सप्लोरर की समस्या

इस योजना को सभी नए HTML5 एलिमेंटों के लिए उपयोग किया जा सकता है, लेकिन:

ध्यान दें:इंटरनेट एक्सप्लोरर 8 और उससे पहले के संस्करण, अज्ञात एलिमेंटों पर शैली जोड़ने की अनुमति नहीं देते हैं.

सौभाग्य से, Sjoerd Visscher ने "HTML5 Enabling JavaScript" बनाया "the shiv":

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

इस कोड एक टिप्पणी है, लेकिन IE9 के प्रारंभिक संस्करण इसे पढ़ते हैं (और इसे समझते हैं).

पूर्ण शिव समाधान

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>मेरा पहला आलेख</h1>
<article>
लंदन इंग्लैंड की राजधानी शहर है。 
यह यूनाइटेड किंगडम में सबसे अधिक जनसंख्या वाला शहर है, 
13 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ。
</article>
</body>
</html>

खुद से प्रयास करें

shiv कोड की लिंक को <head> एलिमेंट में स्थापित करना चाहिए क्योंकि Internet Explorer नए एलिमेंटों को पढ़ने से पहले पहचानना चाहता है。

HTML5 स्केलेटन

उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 स्केलेटन</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 स्केलेटन</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 सेमैंटिक</a></li>
  <li><a href="html5_geolocation.asp">HTML5 जीओलोकेशन</a></li>
  <li><a href="html5_canvas.asp">HTML5 ग्राफिक्स</a></li>
</ul>
</nav>
<section>
<h1>मशहूर शहर</h1>
<article>
<h2>लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी शहर है। यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,</p>
<p>जिसके महानगर क्षेत्र में 13 मिलियन से अधिक निवासी हैं।</p>
</article>
<article>
<h2>पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है।</p>
</article>
<article>
<h2>टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र है,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र।
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. सभी अधिकार अवधारित.</p>
</footer>
</body>
</html>

खुद से प्रयास करें