HTML <head> एलिमेंट का उपयोग कैसे करें

अपनी वेबसाइट पर 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> एलिमेंट के अंदर रखा जा सकता है:

• <title>
• <link>
• <style>
• <meta>
• <script>
• <base>
• <noscript>

उदाहरण

आइए कुछ सामान्य रूप से उपयोग किए जाने वाले मेटाडेटा एलिमेंट के साथ <head> एलिमेंट का उपयोग करने के कुछ उदाहरण देखें।

<title> एलिमेंट

<title> एलिमेंट आपके HTML दस्तावेज़ के शीर्षक को परिभाषित करता है, जो ब्राउज़र के पेज टैब में प्रदर्शित होता है:

<!DOCTYPE html> <html> <head> <title>Document title</title> </head> <body></body> </html>

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

<style> एलिमेंट

<style> एलिमेंट में आपके HTML दस्तावेज़ के लिए स्टाइलिंग जानकारी होती है (टाइपोग्राफी, स्पेसिंग, रंग, एनिमेशन, आदि) जो CSS में लिखी जाती है:

<!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>

<link> एलिमेंट

HTML दस्तावेज़ों पर शैलियाँ लागू करने का अधिक आधुनिक तरीका <link> एलिमेंट के साथ बाहरी CSS स्टाइलशीट आयात करना है:

<!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>

जानना अच्छा है: यदि आप एक ही दस्तावेज़ में <style> और <link> एलिमेंट दोनों का उपयोग करते हैं, तो शैलियाँ आपके दस्तावेज़ में उन्हें शामिल करने के क्रम में लागू होंगी। CSS कैस्केड करता है, इसलिए जो भी अंत में आता है (ऊपर से नीचे तक) पिछली शैलियों को ओवरराइड कर देगा, यदि वे समान HTML एलिमेंट को संबोधित करते हैं।

<script> एलिमेंट

<script> एलिमेंट का उपयोग दो अलग-अलग तरीकों से जावास्क्रिप्ट निष्पादित करने के लिए किया जाता है:

1. अपने दस्तावेज़ के अंदर सीधे जावास्क्रिप्ट कोड एम्बेड करके (जैसे आपने <style> एलिमेंट के साथ देखा)।
2. src विशेषता के माध्यम से बाहरी जावास्क्रिप्ट स्क्रिप्ट फ़ाइलों को आयात करके।

अपने दस्तावेज़ के अंदर सीधे जावास्क्रिप्ट कोड एम्बेड करें:

<!DOCTYPE html> <html> <head> <title>Document title</title> <script> // Make background color red document.body.style.backgroundColor = "red" </script> </head> <body></body> </html>

एक बाहरी जावास्क्रिप्ट फ़ाइल आयात करें:

<!DOCTYPE html> <html> <head> <title>Document title</title> <script src="/scripts/main.js"></script> </head> <body></body> </html>