HTML <head>
का उपयोग करना सीखें आपकी वेबसाइट पर तत्व।
HTML <head>
तत्व आपके वेब पृष्ठों के बारे में मेटाडेटा (सूचना) के लिए एक कंटेनर है, जैसे पृष्ठ शीर्षक, शैली और स्क्रिप्ट।
<head>
. के अंदर की सामग्री तत्व मुख्य रूप से है आपके साइट विज़िटर द्वारा नहीं, मशीनों द्वारा पढ़ा और संसाधित किया जाता है (उदाहरण के लिए एक ब्राउज़र)।
<head>
तत्व को <header>
. के साथ भ्रमित नहीं होना चाहिए तत्व, जो एक अलग उद्देश्य को पूरा करता है।
<head>
एलिमेंट को ओपनिंग के ठीक नीचे रखा गया है <html>
टैग, और ओपनिंग से ठीक पहले <body>
टैग:
<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>
निम्नलिखित HTML तत्वों को <head>
. के अंदर रखा जा सकता है तत्व:
- <शीर्षक>
- <लिंक>
- <शैली>
<meta>
<base>
उदाहरण
आइए कुछ उदाहरण देखें कि <head>
. का उपयोग कैसे करें कुछ सामान्य रूप से उपयोग किए जाने वाले मेटाडेटा तत्वों के साथ तत्व।
<शीर्षक> तत्व
<title>
तत्व आपके HTML दस्तावेज़ के शीर्षक को परिभाषित करता है, जो ब्राउज़र पेज टैब में प्रदर्शित होता है:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body></body>
</html>
यदि आप अपने माउस को किसी वेबसाइट के पेज टैब पर ले जाते हैं और इसे कुछ सेकंड के लिए स्थिर रखते हैं, तो आपको पूरे पेज का शीर्षक प्रदर्शित करने वाला एक छोटा पॉपअप मिलेगा।
द <शैली> तत्व
<style>
तत्व में सीएसएस में लिखे आपके एचटीएमएल दस्तावेज़ (टाइपोग्राफी, रिक्ति, रंग, एनिमेशन, आदि) के लिए स्टाइलिंग जानकारी शामिल है:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<style type="text/css">
body {
background-color: red;
}
p {
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body></body>
</html>
द <लिंक> एलिमेंट
HTML दस्तावेज़ों में शैलियों को लागू करने का अधिक आधुनिक तरीका है, <link>
के साथ बाहरी CSS स्टाइल शीट का आयात करना। तत्व:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<link href="/styles/main.css" rel="stylesheet" />
</head>
<body></body>
</html>
जानकर अच्छा लगा:यदि आप <style>
. दोनों का उपयोग करते हैं और <link>
उसी दस्तावेज़ में तत्व, शैलियाँ उस क्रम में लागू की जाएँगी जिस क्रम में आप उन्हें अपने दस्तावेज़ में शामिल करते हैं। सीएसएस कैस्केड, इसलिए जो कुछ भी आखिरी आता है (ऊपर से नीचे तक) पिछली शैलियों को ओवरराइड कर देगा, अगर वे समान HTML तत्वों को संबोधित करते हैं।