एचटीएमएल - प्रमुख तत्व
HTML <head>तत्व निम्नलिखित तत्वों के लिए एक कंटेनर है:
<title>, <style>,
<meta>, <link>, <script>, और <base>।
एचटीएमएल <सिर> तत्व
तत्व मेटाडेटा (डेटा के बारे में डेटा) के लिए एक कंटेनर है और इसे टैग और टैग <head>के बीच रखा जाता है ।<html><body>
HTML मेटाडेटा HTML दस्तावेज़ के बारे में डेटा है। मेटाडेटा प्रदर्शित नहीं होता है।
मेटाडेटा आमतौर पर दस्तावेज़ शीर्षक, वर्ण सेट, शैली, स्क्रिप्ट और अन्य मेटा जानकारी को परिभाषित करता है।
एचटीएमएल <शीर्षक> तत्व
तत्व दस्तावेज़ के <title>शीर्षक को परिभाषित करता है। शीर्षक केवल-पाठ्य होना चाहिए, और यह ब्राउज़र के शीर्षक पट्टी में या पृष्ठ के टैब में दिखाया जाता है।
<title>HTML दस्तावेज़ों में तत्व आवश्यक है !
सर्च इंजन ऑप्टिमाइजेशन (SEO) के लिए पेज टाइटल की सामग्री बहुत महत्वपूर्ण है! खोज परिणामों में पृष्ठों को सूचीबद्ध करते समय क्रम तय करने के लिए खोज इंजन एल्गोरिदम द्वारा पृष्ठ शीर्षक का उपयोग किया जाता है।
<title>तत्व :
- ब्राउज़र टूलबार में एक शीर्षक परिभाषित करता है
- पसंदीदा में जोड़े जाने पर पृष्ठ के लिए एक शीर्षक प्रदान करता है
- खोज इंजन-परिणामों में पृष्ठ के लिए एक शीर्षक प्रदर्शित करता है
इसलिए, शीर्षक को यथासंभव सटीक और अर्थपूर्ण बनाने का प्रयास करें!
एक साधारण HTML दस्तावेज़:
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <शैली> तत्व
<style>एक HTML पृष्ठ के लिए शैली की जानकारी को परिभाषित करने के लिए तत्व का उपयोग किया जाता है :
उदाहरण
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
एचटीएमएल <लिंक> तत्व
<link>तत्व वर्तमान दस्तावेज़ और बाहरी संसाधन के बीच संबंध को परिभाषित करता है ।
टैग का <link>
उपयोग अक्सर बाहरी स्टाइल शीट से लिंक करने के लिए किया जाता है:
उदाहरण
<link rel="stylesheet" href="mystyle.css">
युक्ति: CSS के बारे में सब कुछ जानने के लिए, हमारे CSS Tutorial पर जाएँ ।
एचटीएमएल <मेटा> तत्व
तत्व का <meta>उपयोग आमतौर पर वर्ण सेट, पृष्ठ विवरण, कीवर्ड, दस्तावेज़ के लेखक और व्यूपोर्ट सेटिंग्स को निर्दिष्ट करने के लिए किया जाता है।
मेटाडेटा पृष्ठ पर प्रदर्शित नहीं किया जाएगा, लेकिन ब्राउज़र (सामग्री या पृष्ठ को पुनः लोड कैसे करें), खोज इंजन (कीवर्ड), और अन्य वेब सेवाओं द्वारा उपयोग किया जाता है।
उदाहरण
उपयोग किए गए वर्ण सेट को परिभाषित करें:
<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">
अपनी वेबसाइट को सभी उपकरणों पर अच्छा दिखाने के लिए व्यूपोर्ट सेट करना:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
टैग का उदाहरण <meta>:
उदाहरण
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
व्यूपोर्ट सेट करना
व्यूपोर्ट एक वेब पेज का उपयोगकर्ता का दृश्य क्षेत्र है। यह डिवाइस के साथ बदलता रहता है - यह कंप्यूटर स्क्रीन की तुलना में मोबाइल फोन पर छोटा होगा।
आपको अपने सभी वेब पेजों में निम्नलिखित <meta>तत्व शामिल करने चाहिए:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
यह ब्राउज़र को पेज के आयामों और स्केलिंग को नियंत्रित करने के निर्देश देता है।
डिवाइस की width=device-widthस्क्रीन-चौड़ाई का पालन करने के लिए भाग पृष्ठ की चौड़ाई निर्धारित करता है (जो डिवाइस के आधार पर अलग-अलग होगा)।
initial-scale=1.0जब पृष्ठ पहली बार ब्राउज़र द्वारा लोड किया जाता है तो यह भाग प्रारंभिक ज़ूम स्तर सेट करता है।
यहां व्यूपोर्ट मेटा टैग के बिना वेब पेज और व्यूपोर्ट मेटा टैग वाले उसी वेब पेज का एक उदाहरण दिया गया है :
युक्ति: यदि आप इस पृष्ठ को फ़ोन या टैबलेट से ब्राउज़ कर रहे हैं, तो आप अंतर देखने के लिए नीचे दिए गए दो लिंक पर क्लिक कर सकते हैं।
एचटीएमएल <स्क्रिप्ट> तत्व
<script>तत्व का उपयोग क्लाइंट-साइड जावास्क्रिप्ट को परिभाषित करने के लिए किया जाता है ।
निम्नलिखित जावास्क्रिप्ट लिखता है "हैलो जावास्क्रिप्ट!" आईडी = "डेमो" के साथ एक HTML तत्व में:
उदाहरण
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
युक्ति: जावास्क्रिप्ट के बारे में सब कुछ जानने के लिए, हमारे जावास्क्रिप्ट ट्यूटोरियल पर जाएँ ।
एचटीएमएल <आधार> तत्व
तत्व किसी पृष्ठ के सभी सापेक्ष URL के <base>लिए आधार URL और/या लक्ष्य निर्दिष्ट करता है।
टैग में <base>या तो एक href या एक लक्ष्य विशेषता मौजूद होनी चाहिए, या दोनों।
एक दस्तावेज़ में केवल एक ही <base>
तत्व हो सकता है!
उदाहरण
किसी पृष्ठ पर सभी लिंक के लिए एक डिफ़ॉल्ट URL और एक डिफ़ॉल्ट लक्ष्य निर्दिष्ट करें:
<head>
<base href="https://www.w3schools.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>तत्व का उपयोग क्लाइंट-साइड जावास्क्रिप्ट को परिभाषित करने के लिए किया जाता है- तत्व किसी पृष्ठ में सभी सापेक्ष URL के
<base>लिए आधार URL और/या लक्ष्य निर्दिष्ट करता है
HTML हेड एलिमेंट्स
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।