HTML Document Structure In Hindi

HTML Document Structure.

The basic structure of an HTML document

एचटीएमएल (हाइपरटेक्स्ट मार्कअप लैंग्वेज) किसी भी ऑनलाइन ऑफलाइन होस्ट की गई वेबसाइट दस्तावेज़ एक वेब पेज की नींव है। इसमें वेब पेजेस, वेबसाइट, css, जावास्क्रिप्ट टैग्स/तत्वों का एक पूर्व निर्धारित संरचित सेट होता है. जो आपके द्वारा डिज़ाइन वेब पेज सामग्री और उसके वर्त्तमान वेबसाइट पेज लेआउट को परिभाषित करता है।

Here you can see the basic structure of an HTML document.

Every newly designed html web page default main html document template is something like this.

<!DOCTYPE html> <!– Default html5 Document Type Declaration –>

<title>Basic Doctype declaration example</title> <!– Display the title of active web page in web browser tab –>

</head>

<h1>Display Basic Html5 Template</h1>

<nav>

<ul>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Contact Us</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Disclaimers</a></li>

</ul>

</nav>

</header>

<h2>This is a simple test website</h2>

<p>this is a simple paragraph html tag explain</p>

</main>

</footer>

</body>

</html>

The basic structure of the default html document is explained as follows.

<!DOCTYPE html> – !DOCTYPE एचटीएमएल यह वेब डेवलपर द्वारा मौजूदा एचटीएमएल डॉक्यूमेंट वर्शन के बारे में डिफ़ॉल्ट डिक्लेरेशन है। जो सामान्यता वर्त्तमान में एचटीएमएल 5 वेब पेज वर्शन या डॉक्यूमेंट टेम्पलेट एक्सटेंशन को दर्शाता है.
<html lang=’en’> – यह आपके मौजूदा वेब पेज की मूल भाषा तत्व जिसमें अन्य सभी एचटीएमएल वेबसाइट वेब पेजेज तत्व शामिल हैं। आपके सभी वेबसाइट की डिफ़ॉल्ट दस्तावेज़ की भाषा (इस उदाहरण में अंग्रेजी) निर्दिष्ट करने के लिए एचटीएमएल लैंग टैग विशेषता को दर्शाता है। ये लैंग्वेज विभिन्न देश और महाद्वीपों के आधार पर हिंदी, इंग्लिश, फ्रेंच, रसियन, चीनी, आदि हो सकती है.
<head> – इस अनुभाग में दस्तावेज़ हैडिंग इनफार्मेशन के बारे में मेटा-जानकारी डिस्प्ले होती है, एक्सटर्नल उपयोग होने वाली एचटीएमएल डॉक्यूमेंट css स्टाइलशीट (जैसे स्टाइलशीट और स्क्रिप्ट) के लिंक और दस्तावेज़ का शीर्षक जानकारी प्रदर्शित की जाती है।
<meta charset=’UTF-8′> – मौजूदा वेब पेज के डिफ़ॉल्ट एचटीएमएल दस्तावेज़ के लिए करैक्टर एन्कोडिंग निर्दिष्ट करता है. यहाँ वर्त्तमान में मौजूदा एचटीएमएल पेज के लिए (UTF-8) का व्यापक रूप से टेक्स्ट एन्कोडिंग फॉर्मेट उपयोग की गई है।
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> – मौजूदा सर्च इंजन के विभिन्न उपकरणों पर प्रतिक्रियाशील वेब डिज़ाइन के लिए व्यूपोर्ट सेटिंग्स को दर्शाता है।
<title> – आपके द्वारा वर्त्तमान में उपयोग वेब पेज के टाइटल इनफार्मेशन को परिभाषित करता है. जो आपके द्वारा वेब ब्राउज़र के टैब में डिफ़ॉल्ट प्रदर्शित होता है।
<link rel=’stylesheet’ href=’styles.css’> – मौजूदा वेबसाइट के सिंगल या मल्टीप्ल वेब पेज को एक साथ स्टाइल करने के लिए वैकल्पिक रूप से एक बाहरी सीएसएस स्क्रिप्ट फाइल (कैस्केडिंग स्टाइल शीट्स) फ़ाइल कोड से लिंक किया जाता है।
<body> – बॉडी किसी भी वेब पेज का मुख्य सामग्री क्षेत्र होता है. जिसमें सभी दृश्यमान वेब पेज कंटेंट, डाटा एंड इनफार्मेशन सामग्री को प्रदर्शित किया जाता है।
<header> – किसी भी वेबसाइट वेबपेज के टॉप में हैडर एलिमेंट्स प्रदर्शित होता है. हैडर एरिया में आमतौर पर इसमें वर्त्तमान वेबसाइट के टाइटल, वेबसाइट लोगो, और हैडर नेविगेशन मेनू, सोशल मीडिया लिंक्स, आदि एलिमेंट्स डिफ़ॉल्ट प्रदर्शित होते हैं।
<main> – इसमें मौजूदा वेब पेज की मुख्य सामग्री शामिल होती है. जैसे वेबसाइट टाइटल, वेब पेज पैराग्राफ कंटेंट, वेब इमेजेज और अन्य वेब एलिमेंट्स डिफ़ॉल्ट स्टोर होते है।
<footer> – इसमें मौजूदा वेब पेज की फुटर इनफार्मेशन प्रदर्शित होती है. जिसमें अक्सर वेबसाइट फुटर मेनू, इम्पोर्टेन्ट लिंक्स, कॉपीराइट जानकारी, वेबसाइट कांटेक्ट डिटेल्स और कुछ प्रमुख प्रासंगिक पृष्ठों के लिंक प्रदर्शित होते हैं।

The <!DOCTYPE> declaration

<!DOCTYPE> डिक्लेरेशन, जिसे अक्सर हर एचटीएमएल डॉक्यूमेंट टाइप डिक्लेरेशन या केवल हर एचटीएमएल DOCTYPE फर्स्ट डिफ़ॉल्ट टैग डिक्लेरेशन के रूप में जाना जाता है. DOCTYPE डिक्लेरेशन एचटीएमएल हर दस्तावेज़ की शुरुआत में एक महत्वपूर्ण डिफ़ॉल्ट स्टेटमेंट है. जो वर्त्तमान में उपयोग किए जा रहे एचटीएमएल डॉक्यूमेंट के प्रकार और एचटीएमएल फाइल संस्करण को परिभाषित करता है। यहाँ हर एचटीएमएल वेब पेज फाइल में doctype डिक्लेरेशन का प्राथमिक उद्देश्य सभी मॉडर्न वेब ब्राउज़र या एचटीएमएल पार्सर को वेब पेज प्रस्तुत करते समय पालन किए जाने वाले सभी वेब स्टैण्डर्ड नियमों और विशिष्टताओं के बारे में सूचित करना होता है।

Here you are shown the basic syntax of the default <!DOCTYPE> declaration in every html document.

<!DOCTYPE declaration_name PUBLIC “public_identifier” “system_identifier”>

So let’s take a better look at the different components of the <!DOCTYPE> declaration.

declaration_name – यह वर्त्तमान में उपयोग किए जा रहे एचटीएमएल दस्तावेज़ प्रकार का नाम निर्दिष्ट करता है। आधुनिक वेबसाइट डेवलपमेंट के लिए, आप आमतौर पर एचटीएमएल 5 DOCTYPE घोषणा का उपयोग करते हैं. जो कि केवल <!DOCTYPE html> डिक्लेरेशन फॉर्मेट है।
Public – पब्लिक यह आपको इंगित करता है कि DOCTYPE घोषणा में एक पब्लिक आइडेंटिफायर मौजूद है।
“public_identifier” – पब्लिक आइडेंटिफायर एक वैकल्पिक स्ट्रिंग है. जो दस्तावेज़ को एक विशिष्ट स्टैण्डर्ड या विनिर्देश के साथ जोड़ता है। जो व्यवहार में, एचटीएमएल 5 वर्शन के लिए, पब्लिक आइडेंटिफायर का उपयोग शायद ही कभी किया जाता है। यह एचटीएमएल मार्कअप लैंग्वेज के पुराने संस्करणों में अधिक सामान्य है. जहां इसका उपयोग डॉक्यूमेंट टाइप डेफिनिशन (डीटीडी) द्वारा निर्दिष्ट करता था।
“system_identifier” – सिस्टम आइडेंटिफायर एक अन्य वैकल्पिक स्ट्रिंग है. जो DTD का स्थान या उसके रेफ़्रेन्स को निर्दिष्ट करता है। एचटीएमएल 5 लैंग्वेज में, सिस्टम आइडेंटिफायर का आमतौर पर उपयोग नहीं किया जाता है. क्योंकि एचटीएमएल 5 वर्शन बाहरी DTD पर निर्भर नहीं करता है।

आज के समय आधुनिक वेब डेवलपमेंट में, एचटीएमएल 5 DOCTYPE डिक्लेरेशन अधिकांश वेब पेजों के लिए एक कॉमन और जरूरी डिक्लेरेशन है।

<!DOCTYPE html>

<html>, <head>, and <body> elements

एचटीएमएल (हाइपरटेक्स्ट मार्कअप लैंग्वेज) में, <html>, <head>, और <body> एलिमेंट फंडामेंटल स्ट्रक्चर टैग या तत्व हैं. जिनका उपयोग किसी भी एचटीएमएल वेब पेज, वेबसाइट की मनचाही संरचना और वेब सामग्री जिसमे वेब कंटेंट, एनीमेशन,मल्टीमीडिया, ऑडियो, वीडियो, इमेजेज, लिंक्स, आदि को परिभाषित करने के लिए किया जाता है।

यहां आपको html लैंग्वेज के प्रत्येक तत्व का विस्तार से अवलोकन दिया गया है।

<html> tag/element.

<html> एचटीएमएल टैग या एलिमेंट एचटीएमएल दस्तावेज़ का मूल तत्व है। यह हर नए और पुराने एचटीएमएल में डेवेलोप डिज़ाइन वेब पेज की संपूर्ण सामग्री को अपने में समाहित या ग्रुप करता है।

एचटीएमएल मार्कअप लैंग्वेज में आपको आम तौर पर दो मुख्य सेक्शन मिलते हैं. जिसमे वेबपेज <head> सेक्शन और <body> सेक्शन होते है। हेड सेक्शन में वेब पेज हैडिंग डिटेल और बॉडी सेक्शन में सम्पूर्ण वेबसाइट या वेब पेज के कंटेंट और रिसोर्सेज स्टोर या प्रदर्शित होते है.

शुरुआती सभी <html> टैग में आमतौर पर लैंग या देश विदेश के अनुसार डिफ़ॉल्ट वेबसाइट लैंग्वेज विशेषता प्रदर्शित होती है. जो वर्त्तमान में मौजूदा सभी सर्च इंजन की बेहतर पहुंच और खोज इंजन अनुकूलन वेबसाइट हर वेब पेज (एसईओ) के लिए दस्तावेज़ की भाषा को निर्दिष्ट करती है।

Basic example.

<head> tag/element

<head> हेड टैग मेटाडेटा और वेब पेज के बारे में अन्य जानकारी के लिए एक इनफार्मेशन कंटेनर की तरह है। हेड टैग में मौजूदा वेब पेज की पृष्ठ के लिए दृश्यमान सामग्री शामिल नहीं होती है। सामान्यता यह वर्त्तमान वेब पेज के करैक्टर एन्कोडिंग, व्यू पोर्ट सेटिंग्स आदि इनफार्मेशन दर्शाता है.

<head> अनुभाग में रखे गए सामान्य तत्वों में शामिल हैं।

<meta> टैग सर्च इंजन में मौजूदा वेब पेज कैरेक्टर एन्कोडिंग, व्यूपोर्ट सेटिंग्स और अन्य वेब मेटाडेटा को सर्च इंजन सर्च रिजल्ट में निर्दिष्ट करने के लिए उपयोग करते है।

<title> आपके द्वारा डिज़ाइन मौजूदा वेब पेज का टाइटल प्रदर्शित या सेट करने के लिए <title> टैग को उपयोग करते है. जो किसी भी ओपन वेब ब्राउज़र के टाइटल बार या करंट ओपन टैब में प्रदर्शित होता है।

किसी भी सामान्य से दिखने वाले बोरिंग वेबसाइट या वेब पेज को स्टाइलशीट और फ़ेविकॉन जैसे बाहरी संसाधनों को जोड़ने के लिए <लिंक> टैग से अधिक आकर्षक या कमर्शियल बनाने के लिए उपयोग करते है।

किसी भी वेबसाइट वेब पेज में उसी फाइल में css जोड़ने के लिए इनलाइन सीएसएस के लिए <style> टैग का उपयोग करते है. जबकि सामान्य तोर पर एक्सटर्नल css स्टाइलशीट का उपयोग करना अधिक प्रचलन है।

मौजूदा एचटीएमएल फाइल में एक्सटर्नल जावास्क्रिप्ट फ़ाइलों से लिंक करने या किस जावास्क्रिप्ट प्रोग्राम कोड को एम्बेड करने के लिए <script> टैग को एचटीएमएल में उपयोग करते है।

मौजूदा वेब पेज एसईओ, सोशल मीडिया शेयरिंग, और बहुत कुछ के लिए विभिन्न अन्य मेटाडेटा तत्व इनफार्मेशन को उपयोग करते है।

Example of a simple <head> section.

<html>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Head tag explanation</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

<body> html tag/element.

<body> एचटीएमएल बॉडी टैग/तत्व में वेब पेज की सभी दृश्यमान सामग्री जिसमे वेब पेज टेक्स्ट, इमेजेज, टेबल्स, फ्रेम्स, मल्टीमीडिया, ऑडियो,वीडियो, एनीमेशन,3d आदि ऑब्जेक्ट होते है. जिसे वेब उपयोगकर्ता किसी भी वेब ब्राउज़र में वेबपेज या वेबसाइट उस पर जाने पर देखते हैं।

एचटीएमएल वेब पेज बॉडी में वेब पेज टाइटल (<h1>, <h6>), पैराग्राफ (<p>), छवियां (<img>), लिंक (<a>), लिस्ट (<ul>, <ol>,) <li>), फॉर्म (<form>, <input>, <button>), और बहुत कुछ जैसे एचटीएमएल टैग तत्व शामिल हैं। ।

<body> बॉडी एचटीएमएल टैग तत्व के अंदर की सामग्री ही वास्तविक वेबपेज फॉर्मेट या लेआउट को बनाती है, और इसे मौजूदा वेब ब्राउज़र में क्लाइंट रिक्वेस्ट के अनुसार प्रस्तुत किया जाता है।

Here’s an example of a simple web page <body> section.

<html>

<title>This ia a title tag </title>

<body>

<h1>Lets explain html body tag</h1>

</header>

<nav>

<ul>

<li><a href=”#”>Posts</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Contact Us</a></li>

</ul>

</nav>

<main>

<p>We can add number of web page body elements here</p>

</main>

</footer>

</body>

</html>

Meta tags for document metadata

एचटीएमएल मार्कअप लैंग्वेज में मेटा टैग का उपयोग किसी वेब दस्तावेज़ के बारे में मेटाडेटा जानकारी सभी सर्च इंजन को प्रदान करने के लिए किया जाता है। मेटा डाटा किसी भी वेबसाइट या एचटीएमएल वेब पेज मेटाडेटा में वर्त्तमान में वेब पेज कैरेक्टर एन्कोडिंग, व्यूपोर्ट सेटिंग्स, ऑथरशिप विवरण, सर्च कीवर्ड और बहुत कुछ सर्च इंजन को मौजूदा वेब पेज के बारे में दी जाने वाली जानकारी शामिल हो सकती है। एचटीएमएल मेटा टैग आमतौर पर किसी भी डिज़ाइन एचटीएमएल दस्तावेज़ के <head> सेक्शन में डिस्प्ले किये जाते हैं।

Here are some commonly used meta tag formats for any html document metadata.

Character encoding (<meta charset=”’>):

यह ऊपर दिए गए एक्साम्प्ल में मेटा टैग एचटीएमएल दस्तावेज़ में प्रयुक्त करैक्टर एन्कोडिंग को प्रदर्शित करता है। वर्त्तमान में UTF-8 सबसे अधिक व्यापक रूप से उपयोग की जाने वाली एचटीएमएल डॉक्यूमेंट कैरेक्टर एन्कोडिंग है, और यह क्लाइंट वेब ब्राउज़र में वर्ल्ड वाइड वेब में विभिन्न भाषाओं के कैरेक्टरों की एक विस्तृत श्रृंखला का समर्थन करती है।

Rate this post

HTML Document Structure.

The basic structure of an HTML document

Related posts

Similar Posts

Leave a Comment Cancel Reply