Head और Meta टैग्स
आज हम head के अंदर देखते हैं — browser tab का title, charset, viewport, और search results के लिए meta description।
- 1
Document head क्या है
पिछले लेसन में पेज के दिखने वाले landmarks नाम दिए। आज दस्तावेज़ का दूसरा कमरा खोलते हैं:
<head>। Visitor इसे page body की तरह नहीं देखता। Browser और search engines पहले इसे पढ़ते हैं।Head में tab का
<title>, character set, phones पर page कैसे scale हो, और छोटाmetadescription रखते हैं। ये चार टुकड़े आज का लेसन हैं। - 2
समस्या: ब्राउज़र टैब, एन्कोडिंग और मोबाइल स्क्रीन को कैसे कंट्रोल करें
किसी वेबपेज को ब्राउज़र टैब पर अपना नाम दिखाना होता है, अक्षरों की सही एन्कोडिंग चाहिए ताकि हिंदी और इमोजी टूटे नहीं, और मोबाइल फोन पर रिस्पॉन्सिव स्केलिंग चाहिए ताकि पेज सूक्ष्म रूप में न दिखे।
यह सारी तकनीकी जानकारी यूज़र के पढ़ने वाले पैराग्राफ्स में नहीं डाली जा सकती। इसीलिए HTML में
<head>को एक अदृश्य कंट्रोल रूम बनाया गया है, जहाँ ब्राउज़र और सर्च इंजन के लिए मेटाडेटा सुरक्षित रहता है। - 3
Browser और Search Engines Head Metadata को रेंडरिंग से पहले कैसे पढ़ते हैं
ब्राउज़र स्क्रीन पर पिक्सल पेंट करने से पहले
<head>को प्रोसेस करता है।charset="UTF-8"तुरंत डिकोडर को सक्रिय करता है ताकि कोई भी कैरेक्टर गड़बड़ न हो।viewportटैग मोबाइल ब्राउज़र को निर्देश देता है कि वह वेबसाइट की चौड़ाई सीधे मोबाइल की स्क्रीन के बराबर रखे (width=device-width) और 1:1 ज़ूम बनाए रखे। - 4
आज की प्रैक्टिस: Encoding, Viewport और Document Title का सेटअप
नीचे दिए गए कोड में
<head>और<body>का अंतर देखें। ध्यान दें कि हेड में लिखी गई तकनीकी जानकारी कभी भी मुख्य वेबपेज के कैनवस पर प्रत्यक्ष रूप से नहीं दिखती। - 5
बेस्ट प्रैक्टिस: <head> के अंदर टैग्स का सही क्रम
Charset head के ऊपर की ओर रखो। Title साफ़ और अलग रखो। Description एक-दो वाक्यों में पेज का सार। Open Graph और favicon बाद में, ज़रूरत पड़े तो।
वेबपेज के कैनवस पर दिखाई नहीं देता। ब्राउज़र टैब, मोबाइल स्केलिंग और Google सर्च क्रॉलर्स को निर्देश देता है।
वेबसाइट का मुख्य कैनवस। वह हर चीज़ जिसे यूज़र देखता है, पढ़ता है या जिस पर क्लिक करता है, body के अंदर ही लिखी जाती है।
आप क्या सीखेंगे
- 1head में page metadata रहता है
- 2title browser tab का नाम है
- 3charset character encoding सेट करता है
- 4viewport phones की layout में मदद करता है
- 5meta description पेज का सार बताता है
लाइन-बाय-लाइन
<meta charset="UTF-8">खाली meta tag जो character encoding सेट करता है। टेक्स्ट सही decode हो, इसलिए head में जल्दी लगाओ।
name="viewport" content="width=device-width, initial-scale=1.0"Phones से कहता है device की चौड़ाई इस्तेमाल करो। इसके बिना कई mobiles zoomed-out desktop पेज दिखाते हैं।
name="description" content="..."पेज का छोटा सार। Search engines अक्सर result title के नीचे यही दिखाते हैं।
<title>CodeX Cider - HTML</title>दस्तावेज़ का title। Browser tab और bookmarks पर आता है। Body के
<h1>से अलग है।
खुद ट्राई करो
ऐसा <head> लिखो जिसमें charset, viewport, पसंदीदा खाने वाले पेज का description, और साफ़ <title> हो। Tiny <body> में एक heading रखो।
हिंट: Meta और title head में। दिखने वाला टेक्स्ट body में।
गलती कहाँ होती है
- 1.
<title>या meta tags body में रखना। इनका घर head है। - 2.Phones पर खुलने वाली साइट पर viewport meta छोड़ना। Layout अक्सर छोटी और पढ़ने में मुश्किल दिखती है।
इंटरव्यू की तैयारी
Q: <title> और <h1> में क्या बुनियादी अंतर है?↓
<title> <head> के अंदर रहता है और ब्राउज़र टैब व गूगल सर्च में पेज का नाम दिखाता है। जबकि <h1> <body> के अंदर होता है और वेबपेज पर प्रत्यक्ष रूप से दिखने वाली मुख्य हेडिंग है।
Q: <meta charset="UTF-8"> लगाना क्यों ज़रूरी है?↓
UTF-8 दुनिया की लगभग सभी भाषाओं की लिपियों और प्रतीकों (इमोजी, हिंदी, संस्कृत, आदि) को सपोर्ट करता है। इसके बिना ब्राउज़र गैर-अंग्रेज़ी शब्दों को विकृत या टूटे अक्षरों में दिखा सकता है।
Q: Viewport meta टैग का क्या काम है?↓
यह मोबाइल ब्राउज़रों को निर्देश देता है कि वेबसाइट की चौड़ाई डिवाइस की स्क्रीन के अनुकूल (width=device-width) रखें, जिससे पेज बिना ज़ूम आउट हुए मोबाइल-फ्रेंडली दिखता है।