Basic structure of an HTML5 document in hindi
वर्त्तमान समय में न्यू एचटीएमएल5 वर्जन हाइपरटेक्स्ट मार्कअप लैंग्वेज में वेब पेज डॉक्यूमेंट स्ट्रक्चर लेआउट को अधिक सिंपल बनाया गया है, जिससे कि मौजूदा डिज़ाइन वेब पेज वेब पेज पढ़ने में आसान हो, रेस्पॉन्सिव हो, डायनामिक प्रीव्यू हो, और नई मॉडर्न वेब ब्राउज़र डिस्प्ले फुल्ली कम्पेटिबल हो।
So, let’s know the basic document structure of HTML5.
HTML5 Element Explanation.
<!DOCTYPE html> declaration.
यह वेब ब्राउज़र को एचटीएमएल5 वेब पेज में डॉक्यूमेंट स्ट्रक्चर डिक्लेरेशन वर्जन को इंडीकेट करती है, और वेब ब्राउज़र आपके वेब पेज को एचटीएमएल5 न्यू स्क्रिप्ट के नए वर्जन के अनुसार रीड और एनालाइज करता है, जहा <!DOCTYPE html> एचटीएमएल5 वेब पेज के स्क्रिप्ट कोड में हमेशा टॉप पर ऐड या डिस्प्ले किया जाता है।
<html lang=”en”> tag.
आपका या मौजूदा एचटीएमएल5 वेब पेज कोनसी लैंग्वेज में लिखा गया है, यदि यहाँ एचटीएमएल वेब पेज लैंग्वेज en है, तो वेब पेज लैंग्वेज इंग्लिश है, यदि यहाँ एचटीएमएल लैंग्वेज hi है, तो वेब पेज लैंग्वेज डिफ़ॉल्ट हिंदी है, जिसे सर्च इंजन वेब क्रॉलर द्वारा रीड कर इंडेक्स किया जाता है.
<head> tag.
एचटीएमएल5 वर्जन डॉक्यूमेंट के बारे में मेटा-इनफार्मेशन ऐड की जाती है, जिसमे वेब पेज करैक्टर एन्कोडिंग, वेब पेज व्यूपोर्ट सेटिंग, वेब डॉक्यूमेंट टाइटल, और इंटरनल या एक्सटर्नल सीएसएस स्टाइलशीट लिंक इनफार्मेशन डिस्प्ले होती है।
<meta charset=”UTF-8″> tag.
यह मौजूदा वेब पेज में डॉक्यूमेंट करैक्टर एन्कोडिंग को इंडीकेट करता है। जहा वर्त्तमान में UTF-8 एक व्यापक करैक्टर एन्कोडिंग फॉर्मेट है, जो वेब पेज में कई करैक्टर और सिम्बल्स को ग्लोबली सपोर्ट करता है।
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.
ऊपर दिया गया कोड वेब पेज में व्यूपोर्ट की विड्थ को अलग अलग डिवाइस की विड्थ और इनिशियल डिवाइस ज़ूम लेवल को 1 पर सेट करके मोबाइल डिवाइस में डिस्प्ले और ज़ूम करता है।
<title> tag.
मौजूदा वेब पेज में डॉक्यूमेंट टाइटल को डिस्प्ले करता है, जो वेब ब्राउज़र में ओपन न्यू टैब बार या नई विंडो टैब में वेब पेज टाइटल के रूप में डिस्प्ले होता है।
<link rel=”stylesheet” href=”styles.css”> tag.
यहाँ आप अपने वेब ब्राउज़र में उपयोग होने वाले सीएसएस इंटरनल और एक्सटर्नल स्क्रिप्टिंग लैंग्वेज लिंक को डिस्प्ले या ऐड कर सकते है।
<script defer src=”script.js”></script> tag.
यह टैग आपके एचटीएमएल5 वेब पेज को एक्सटर्नल जावास्क्रिप्ट फ़ाइल से लिंक करता है। यहाँ defer टैग एलिमेंट ऐट्रिब्यूट्स को जावास्क्रिप्ट डॉक्यूमेंट को पार्स करने के बाद स्क्रिप्ट एक्सेक्यूट किया जाएगा।
<body> tag.
एचटीएमएल वेब पेज डॉक्यूमेंट में ऐड किये गए टैग और वेब पेज डिजिटल कंटेंट इनफार्मेशन डिस्प्ले होती है, जो इंटरनेट यूजर को उसके टर्मिनल वेब ब्राउज़र में डिस्प्ले होती है।
<header> tag.
डिज़ाइन वेब पेज में हैडर मेनू या वेब कंटेंट या नेविगेशनल लिंक को डिस्प्ले करता है। जहा हैडर टैग का उपयोग वेब पेज में हैडर मेनू, वेबपेज लिंक नेविगेशन, को क्रिएट करने में होता है।
<nav> tag.
nav टैग मौजूदा वेब पेज में उसी डॉक्यूमेंट के अंदर अन्य वेब पेजेज या सेक्शन के लिंक के साथ अलग अलग नेविगेशन लिंक सेक्शन को इंडीकेट करता है।
<main> tag.
यह वेब पेज में <body> टैग में डिस्प्ले डिजिटल कंटेंट इनफार्मेशन को डिस्प्ले करता है।
<section> tag.
मौजूदा वेब पेज में वेब कंटेंट इनफार्मेशन के इंडिविजुअल सेक्शन समूह को पर्टिकुलर आर्डर में डिस्प्ले करता है। जहा प्रत्येक वेब पेज सेक्शन में एक यूनिक वेब पेज टाइटल लिंक इन्फोर्मशन प्रीव्यू होती है।
<footer> tag.
फुटर टैग वेब पेज के बॉटम में फुटर जानकारी को डिस्प्ले करता है, जिसमे वेबसाइट कॉपीराइट नोटिस, या वेबसाइट कांटेक्ट इनफार्मेशन, या इम्पोर्टेन्ट वेब पेज लिंक हो सकते हो सकते है।
HTML5 Document Structure Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Web Page Title</title>
<link rel=”stylesheet” href=”styles.css”>
<script defer src=”script.js”></script>
</head>
<body>
<header>
<h1>Simple Html5 Website Structure</h1>
<nav>
<ul>
<li><a href=”#”>Home Page</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Disclaimers</a></li>
</ul>
</nav>
</header>
<body bgcolor=aqua></body>
<main>
<section>
<h2>About Us</h2>
<p>Vcanhelpsu Provides You Computer Programming Courses.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>Contact ua at – vcanhelpsu@gmail.com.</p>
</section>
<section>
<h2>Disclaimers</h2>
<p>You Can See Website Disclaimers.</p>
</section>
</main>
<footer>
<p align=center>Copyright at © 2024 vcanhelpsu.com</p>
</footer>
</body>
</html>
