हेड सेक्शन में उपयोग किए जाने वाले टैग
यह लेख हेड सेक्शन में उपयोग किए जाने वाले टैग को समझाता है।
यह हेड सेक्शन में उपयोग किए जाने वाले टैग जैसे <link>, <script>, <style> की व्याख्या करता है।
YouTube Video
हेड सेक्शन में उपयोग किए जाने वाले टैग
<title> टैग
1<title>Document Title</title><title>टैग दस्तावेज़ का शीर्षक निर्धारित करता है। यह शीर्षक ब्राउज़र की टैब में प्रदर्शित होता है और बुकमार्क और खोज परिणामों में उपयोग होता है।
<link> टैग
<link>टैग का उपयोग बाहरी संसाधनों को वर्तमान दस्तावेज़ से जोड़ने के लिए किया जाता है। इसका उपयोग सामान्यतः बाहरी CSS फ़ाइलों को जोड़ने के लिए किया जाता है, लेकिन इसे आइकन और अन्य बाहरी संसाधनों के लिए भी उपयोग किया जा सकता है।
<link> टैग की rel विशेषता
rel विशेषता का उपयोग <link> टैग में जुड़े जा रहे संसाधन और वर्तमान दस्तावेज़ के बीच संबंध को निर्दिष्ट करने के लिए किया जाता है। rel विशेषता के लिए कई प्रकार के मान होते हैं, लेकिन यहाँ हम विशेष रूप से महत्वपूर्ण और अक्सर उपयोग किए जाने वाले मानों की व्याख्या करेंगे।
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetका उपयोग बाहरी स्टाइलशीट को जोड़ने के लिए किया जाता है।
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"ब्राउज़र की टैब या बुकमार्क में प्रदर्शित आइकन को परिभाषित करता है। सही फ़ेविकॉन निर्दिष्ट करके, साइट की ब्रांडिंग और दृश्य पहचान को बढ़ावा मिलता है।
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadका उपयोग पेज रेंडरिंग शुरू होने से पहले संसाधनों को अग्रिम रूप से लोड करने के लिए किया जाता है। यह उन संसाधनों के लिए विशेष रूप से उपयोगी है जहाँ समयबद्धता महत्वपूर्ण होती है, जैसे फोंट या बड़े चित्र। यह प्रदर्शन को सुधारता है और उपयोगकर्ता के अनुभव को बेहतर बनाता है।
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalका उपयोग खोज इंजनों को किसी पृष्ठ के मानक संस्करण के बारे में सूचित करने के लिए किया जाता है। डुप्लिकेट सामग्री के मामले में, मानक URL का संकेत देने से SEO दृष्टिकोण से खोज इंजन रैंकिंग को समेकित करने में मदद मिलती है और यह सुनिश्चित होता है कि सामग्री सही ढंग से इंडेक्स हो।
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternateका उपयोग विभिन्न भाषाओं या स्वरूपों के पृष्ठों को खोज इंजनों और ब्राउज़रों को सूचित करने के लिए किया जाता है। बहुभाषी साइटों में, आप प्रत्येक भाषा संस्करण के लिएhreflangविशेषता के साथ संयोजन में URL निर्दिष्ट कर सकते हैं ताकि उपयोगकर्ताओं को उपयुक्त भाषा में पृष्ठ प्रदान किए जा सकें।
manifest
1<link rel="manifest" href="/manifest.json">manifestब्राउज़र को एक मैनिफेस्ट फ़ाइल प्रदान करता है जिसमें एक PWA (प्रोग्रेसिव वेब ऐप) के लिए कॉन्फ़िगरेशन जानकारी होती है। इस फ़ाइल में ऐप आइकन, थीम रंग और डिस्प्ले मोड जैसी जानकारी होती है, जो मोबाइल डिवाइस पर PWA को इंस्टॉल और चलाने में मदद करती है।
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- बाहरी संसाधनों का संदर्भ देते समय, डोमेन का DNS समाधान पहले से करना पेज लोडिंग गति को सुधार सकता है। यह विशेष रूप से उन पेजों के लिए प्रभावी है जिनमें कई बाहरी संसाधन हों या जहां तेज़ उपयोगकर्ता अनुभव की आवश्यकता हो।
<style> टैग
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>टैग का उपयोग आंतरिक स्टाइल शीट को परिभाषित करने के लिए किया जाता है। यह पृष्ठ पर तत्वों को CSS शैली लागू करने के लिए उपयोग किया जाता है, जिससे आप बाहरी फाइलों का उपयोग किए बिना CSS लिख सकते हैं।
<script> टैग
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>टैग का उपयोग HTML दस्तावेज़ में जावास्क्रिप्ट कोड को एम्बेड करने के लिए किया जाता है। आप बाहरी जावास्क्रिप्ट फाइलों को भी लिंक कर सकते हैं, जिससे पृष्ठ का गतिशील व्यवहार नियंत्रित होता है। स्क्रिप्ट फ़ाइल को निर्दिष्ट करने के लिएsrcएट्रिब्यूट का उपयोग करें।
async और defer विशेषताएँ
<script> टैग दो एट्रिब्यूट्स का समर्थन करता है, async और defer, जो स्क्रिप्ट लोडिंग और निष्पादन के समय को प्रभावित करते हैं। सामान्यतः, स्क्रिप्ट्स ब्राउज़र द्वारा क्रमिक रूप से संसाधित किए जाते हैं, लेकिन इन एट्रिब्यूट्स का उपयोग करके पेज प्रदर्शन और लोडिंग अनुभव को बेहतर बनाया जा सकता है।
async विशेषता
1<script src="script.js" async></script>asyncएट्रिब्यूट का उपयोग करने से स्क्रिप्ट को एसिंक्रोनस रूप से लोड करने की अनुमति मिलती है। ब्राउज़र अन्य संसाधनों के साथ स्क्रिप्ट को समानांतर में लोड करता है और लोडिंग पूरी होने पर इसे तुरंत निष्पादित करता है।asyncमुख्य रूप से स्वतंत्र स्क्रिप्ट्स के लिए उपयुक्त है और तब उपयोग किया जाता है जब स्क्रिप्ट अन्य स्क्रिप्ट्स या DOM के लोडिंग पर निर्भर न हो।
defer विशेषता
1<script src="script.js" defer></script>deferएट्रिब्यूट का उपयोग करने से स्क्रिप्ट को एसिंक्रोनस रूप से लोड करने की अनुमति मिलती है, लेकिन इसे HTML पार्सिंग पूरी होने के बाद निष्पादित किया जाता है। स्क्रिप्ट का निष्पादन पेज डिस्प्ले को रोकता नहीं है, जिससे उपयोगकर्ता अनुभव बढ़ता है।deferतब प्रभावी होता है जब स्क्रिप्ट्स को DOM के पूरी तरह लोड होने के बाद निष्पादित करने की आवश्यकता हो। उदाहरण के लिए, यह तब उपयुक्त होता है जब आप चाहते हैं कि स्क्रिप्ट पेज के पूरे लेआउट और एलिमेंट्स के लोड हो जाने के बाद चले।
CORS नीति और crossorigin विशेषता
बाहरी स्क्रिप्ट्स को लोड करते समय, सुरक्षा प्रतिबंध Same-Origin Policy पर आधारित हो सकते हैं। ऐसे मामलों में, संसाधन साझा करने की अनुमति देने के लिए crossorigin एट्रिब्यूट का उपयोग किया जा सकता है।
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin गुण को निम्नलिखित दो मानों के साथ सेट किया जा सकता है:।
anonymous: प्रमाण-पत्रों को शामिल किए बिना अनुरोध भेजता है।use-credentials: प्रमाण-पत्रों को शामिल करते हुए अनुरोध भेजता है।
type विशेषता
<script> टैग स्क्रिप्ट के प्रकार को निर्दिष्ट करने के लिए type एट्रिब्यूट का उपयोग कर सकता है। डिफ़ॉल्ट रूप से, जावास्क्रिप्ट का उपयोग किया जाता है, लेकिन आप कुछ विशेष प्रकार की स्क्रिप्ट्स (जैसे, मॉड्यूल प्रकार जावास्क्रिप्ट या टेम्पलेट भाषा) को भी निर्दिष्ट कर सकते हैं।
जावास्क्रिप्ट मॉड्यूल्स
1<script type="module" src="module.js"></script>-
ECMAScript 2015 (ES6) से, जावास्क्रिप्ट मॉड्यूल्स पेश किए गए हैं, जो कोड को मॉड्यूल्स में विभाजित करने की अनुमति देते हैं और पुन: उपयोगिता को बढ़ाते हैं।
type="module"को निर्दिष्ट करके, आप स्क्रिप्ट को एक मॉड्यूल के रूप में मान सकते हैं। -
मॉड्यूल्स को अन्य मॉड्यूल्स में
importऔरexportका उपयोग करके विभाजित किया जा सकता है।
गैर-जावास्क्रिप्ट स्क्रिप्ट्स
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- जावास्क्रिप्ट के अलावा अन्य स्क्रिप्ट्स को भी
<script>टैग के भीतर निर्दिष्ट किया जा सकता है। उदाहरण के लिए, JSON-LD जैसी संरचित डेटा का वर्णन करते समयtype="application/ld+json"का उपयोग करें। यहां, JSON-LD एक ऐसा प्रारूप है जो वेब पेज पर डेटा को संरचित करता है, जिससे सर्च इंजन और अन्य एप्लिकेशन डेटा को अधिक गहराई से समझ सकते हैं।
<script> टैग का उपयोग करने पर नोट्स
- स्क्रिप्ट्स का क्रम: जिस लाइब्रेरी पर स्क्रिप्ट्स निर्भर करते हैं, उन्हें निर्भर स्क्रिप्ट्स से पहले लोड करना आवश्यक है। उदाहरण के लिए, jQuery का उपयोग करने वाली स्क्रिप्ट्स को स्वयं jQuery के बाद लोड करना चाहिए।
- प्रदर्शन अनुकूलन: पेज लोड स्पीड को प्रभावित करने से बचने के लिए, केवल आवश्यकतानुसार ही स्क्रिप्ट्स लोड करें और अनावश्यक स्क्रिप्ट्स चलाने से बचें।
- सुरक्षा उपाय: बाहरी स्क्रिप्ट्स का उपयोग करते समय, यह सुनिश्चित करें कि वे विश्वसनीय स्रोतों से लोड की जाएँ ताकि दुर्भावनापूर्ण स्क्रिप्ट्स के एम्बेडिंग को रोका जा सके।
<base> टैग
1<base href="https://example.com/"><base>टैग डॉक्यूमेंट में सभी सापेक्ष URLs के लिए आधार URL सेट करता है।hrefएट्रिब्यूट में निर्दिष्ट URL लिंक्स और चित्रों में सापेक्ष पथों के लिए आधार बन जाता है। इसे आमतौर पर पृष्ठ पर केवल एक बार ही उपयोग किया जाता है।
<noscript> टैग
1<noscript>Your browser does not support JavaScript!</noscript><noscript>टैग उस सामग्री को परिभाषित करता है जो तब प्रदर्शित होती है जब ब्राउज़र में जावास्क्रिप्ट अक्षम होती है। यह उन वातावरणों के लिए विकल्प सामग्री प्रदान करने के लिए उपयोग किया जाता है जहां जावास्क्रिप्ट समर्थित नहीं है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।