HTML Head Element - Jassif Team

HTML - The Head Element

HTML <head>तत्व निम्नलिखित तत्वों के लिए एक कंटेनर है:<title>, <style>, <meta>, <link>, <script>, और<base>.

📌HTML <head> तत्व:

<head>तत्व मेटाडेटा (डेटा के बारे में डेटा) के लिए एक कंटेनर और<html>टैग और<body>टैग के बीच रखा गया है

HTML दस्तावेज़ के बारे में HTML मेटाडेटा डेटा। मेटाडेटा पृष्ठ पर प्रदर्शित नहीं किया जाएगा.

मेटाडेटा आमतौर पर दस्तावेज़ शीर्षक, फ़ॉन्ट सेट, शैली, स्क्रिप्ट और अन्य मेटा जानकारी को परिभाषित करता है।

The HTML <title> Element

<title>तत्व दस्तावेज़ के शीर्षक को परिभाषित करता है। शीर्षक केवल पाठ्य होना चाहिए और ब्राउज़र के शीर्षक बार या पृष्ठ पर एक टैब में प्रदर्शित होना चाहिए।

⚠️महत्वपूर्ण:

<title>HTML दस्तावेज़ों में तत्व आवश्यक है!

पेज हेडर की सामग्री खोज इंजन रैंकिंग के लिए बहुत महत्वपूर्ण है! खोज परिणामों में पृष्ठों को सूचीबद्ध करते समय क्रम निर्धारित करने के लिए खोज इंजन द्वारा पृष्ठ शीर्षलेख का उपयोग किया जाता है।

<title>तत्व:

ब्राउज़र टूलबार में हेडर को परिभाषित करता है
जब पृष्ठ को पसंदीदा में जोड़ा जाता है तो एक शीर्षक देता है
खोज इंजन-परिणाम पृष्ठ के लिए एक शीर्षक प्रदर्शित करते हैं

इसलिए शीर्षक को यथासंभव सटीक और सार्थक बनाने का प्रयास करें!

Example

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

The HTML <style> Element

<style>एकल HTML पृष्ठ के लिए शैली जानकारी को परिभाषित करने के लिए तत्व का उपयोग किया जाता है:

Example

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

The HTML <link> Element

<link>तत्व वर्तमान दस्तावेज़ और बाहरी संसाधन के बीच संबंध को परिभाषित करता है।

<link>टैग का उपयोग अक्सर बाहरी स्टाइल शीट संलग्न करने के लिए किया जाता है:

Example

<link rel="stylesheet" href="mystyle.css">

💡सहायता नोट:

सीएसएस के बारे में सब कुछ जानने के लिए हमारे सीएसएस ट्यूटोरियल पर जाएँ।

The HTML <meta> Element

<meta>तत्व का उपयोग आमतौर पर फ़ॉन्ट, पृष्ठ विवरण, कीवर्ड, दस्तावेज़ लेखक और व्यूपोर्ट सेटिंग्स निर्दिष्ट करने के लिए किया जाता है।

मेटाडेटा पृष्ठ पर प्रदर्शित नहीं होता है, लेकिन ब्राउज़र (सामग्री कैसे प्रदर्शित करें या पृष्ठ को फिर से लोड करें), खोज इंजन (कीवर्ड) और अन्य वेब सेवाओं द्वारा उपयोग किया जाता है।

Examples

उपयोग किए जाने वाले वर्ण सेट को परिभाषित करें:

<meta charset="UTF-8">

खोज इंजन के लिए कीवर्ड परिभाषित करें:

<meta name="keywords" content="HTML, CSS, JavaScript">

अपने वेब पेज विवरण को परिभाषित करें:

<meta name="description" content="Free Web tutorials">

किसी पृष्ठ के लेखक को परिभाषित करें:

<meta name="author" content="John Doe">

दस्तावेज़ को हर 30 सेकंड में ताज़ा करें:

<meta http-equiv="refresh" content="30">

Example of <meta> tags:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Setting The Viewport

व्यूपोर्ट किसी वेब पेज का उपयोगकर्ता-दृश्य भाग है। यह डिवाइस के अनुसार भिन्न होता है - यह मोबाइल फ़ोन पर कंप्यूटर स्क्रीन से छोटा हो सकता है।

आपके सभी वेब पेजों का अनुसरण किया जाएगा<meta>तत्व जोड़ें:

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

यह ब्राउज़र को पृष्ठ के आयाम और स्केलिंग को नियंत्रित करने के विकल्प देता है।

width=device-widthडिवाइस की स्क्रीन-चौड़ाई (जो डिवाइस के अनुसार भिन्न होती है) के आधार पर घटक पृष्ठ की चौड़ाई निर्धारित करता है।
initial-scale=1.0जब घटक पहली बार ब्राउज़र द्वारा लोड किया जाता है तो प्रारंभिक ज़ूम स्तर सेट करता है

📱व्यूपोर्ट तुलना:

व्यूपोर्ट मेटा टैग के बिना एक वेब पेज और व्यूपोर्ट मेटा टैग के साथ एक ही वेब पेज का एक उदाहरण:

Without the viewport meta tag

मोबाइल डिवाइस पर ठीक से प्रदर्शित नहीं हो सकता

With the viewport meta tag

सभी डिवाइस पर सही ढंग से प्रदर्शित करें

युक्ति: यदि आप इस पृष्ठ को फ़ोन या टैबलेट पर ब्राउज़ कर रहे हैं, तो अंतर देखने के लिए आप नीचे दिए गए दो लिंक पर क्लिक कर सकते हैं।

The HTML <script> Element

<script>तत्व का उपयोग शाखा-पक्ष जावास्क्रिप्ट को परिभाषित करने के लिए किया जाता है।

जावास्क्रिप्ट के बाद "हैलो जावास्क्रिप्ट!" वह HTML तत्व में id='demo' के साथ लिखता है:

Example

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

💡सहायता नोट:

जावास्क्रिप्ट के बारे में सब कुछ जानने के लिए, हमारे जावास्क्रिप्ट ट्यूटोरियल पर जाएँ।

The HTML <base> Element

<base>तत्व किसी पृष्ठ पर सभी आश्रित यूआरएल के लिए आधार यूआरएल और/या गंतव्य निर्दिष्ट करता है।

⚠️महत्वपूर्ण:

<base>टैग में href या लक्ष्य विशेषता या दोनों शामिल होने चाहिए।

प्रति दस्तावेज़ केवल एक<base>केवल तत्त्व ही अस्तित्व में रह सकता है!

Example

<head>
<base href="https://www.jassifteam.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

अध्याय का सारांश

<head>तत्व मेटाडेटा (डेटा के बारे में डेटा) के लिए एक कंटेनर।
<head>अंग<html>टैग और<body>टैग के बीच रखा गया है
<title>तत्व आवश्यक है और यह दस्तावेज़ के शीर्षक को परिभाषित करता है
<style>तत्व का उपयोग किसी एकल दस्तावेज़ के लिए शैली की जानकारी को परिभाषित करने के लिए किया जाता है
<link>टैग का उपयोग अक्सर बाहरी स्टाइल शीट को संलग्न करने के लिए किया जाता है
<meta>तत्व का उपयोग आमतौर पर फ़ॉन्ट, पृष्ठ विवरण, कीवर्ड, दस्तावेज़ लेखक और व्यूपोर्ट सेटिंग्स निर्दिष्ट करने के लिए किया जाता है
<script>तत्व का उपयोग शाखा-पक्ष जावास्क्रिप्ट को परिभाषित करने के लिए किया जाता है
<base>तत्व किसी पृष्ठ पर सभी आश्रित यूआरएल के लिए आधार यूआरएल और/या गंतव्य निर्दिष्ट करता है

Exercise

❓निम्नलिखित में से कौन सा तत्व हेडर अनुभाग में नहीं रखा जाना चाहिए?

<title>

✗ ग़लत! <शीर्षक> तत्व को शीर्षक अनुभाग में रखा जाना चाहिए।

<link>

✗ ग़लत! बाहरी सीएसएस फ़ाइलों से लिंक करने के लिए <लिंक> तत्व को हेडर अनुभाग में रखा गया है।

<body>

✓ ठीक है! <body> तत्व को हेडर अनुभाग में नहीं रखा जाना चाहिए। इसे <head> के बाद एक अलग तत्व के रूप में रखा गया है।

HTML head Elements

टैग	व्याख्या
`<head>`	दस्तावेज़ के बारे में जानकारी परिभाषित करता है
`<title>`	किसी दस्तावेज़ के शीर्षक को परिभाषित करता है
`<base>`	किसी पृष्ठ पर सभी लिंक के लिए एक डिफ़ॉल्ट पता या डिफ़ॉल्ट गंतव्य परिभाषित करता है
`<link>`	किसी दस्तावेज़ और बाहरी संसाधन के बीच संबंध को परिभाषित करता है
`<meta>`	HTML दस्तावेज़ के बारे में मेटाडेटा को परिभाषित करता है
`<script>`	एक शाखा-पक्ष स्क्रिप्ट को परिभाषित करता है
`<style>`	किसी दस्तावेज़ के लिए शैली जानकारी को परिभाषित करता है

📚नोट:

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।

पहले अगला