HTML Head Element: title, meta, charset हिंदी में
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
<head> element में page के बारे में जानकारी होती है। Head के अंदर कुछ भी page पर नहीं दिखता — लेकिन उसके बिना page browser या Google search में ठीक से काम नहीं करेगी।
Head में क्या जाता है
<title>— browser tab का text और Google search की headline।<meta charset="UTF-8">— character encoding। UTF-8 हर भाषा को संभालता है, हिंदी समेत। इसे हमेशा head में सबसे पहले रखें।<meta name="viewport" content="width=device-width, initial-scale=1.0">— page को phone की screen पर fit करता है। इसके बिना mobile browser छोटा-सा zoom-out किया हुआ desktop page दिखाते हैं।<meta name="description">— छोटा सारांश, जिसे Google search results में आपकी page के नीचे दिखा सकता है।<link rel="stylesheet" href="styles.css">— CSS file को जोड़ता है।<link rel="icon" href="favicon.png">— favicon।<script>— JavaScript जो page से पहले load होनी चाहिए (ज़्यादातर scripts body के अंत में रखनी चाहिए)।
Viewport tag, आसान शब्दों में
Phone की screens सँकरी होती हैं। Viewport tag phone को बताता है: "यह page responsive बनने के लिए बनाई गई है — इसे device की असली चौड़ाई पर दिखाओ"। हर आधुनिक page को इसकी ज़रूरत होती है। अगर आप कभी phone पर कोई site खोलें और वह छोटी-सी zoom-out दिखे, तो उस site में यही एक line नहीं है।
Head क्या है
<head> page का वह हिस्सा है जिसे visitor कभी नहीं देखता। इसमें page के बारे में जानकारी होती है: उसका title, उसका character set, phone पर उसे कैसा दिखना चाहिए, कौन-सी stylesheet load करनी है, और search engine को उसे कैसे बताना चाहिए। Browser कुछ भी बनाने से पहले head को पढ़ता है।
याद रखने की तरकीब: Head दिखता नहीं, काम सारा करता है।
Head में क्या जाता है
| Tag | मान | विवरण |
|---|---|---|
<title> | text | Page का title, tab में और search results में दिखता है। ज़रूरी है। |
<meta charset="utf-8"> | — | Character set। UTF-8 हर भाषा संभालता है, हिंदी समेत। |
<meta name="viewport"> | width=device-width | Phone को बताता है कि page को असली चौड़ाई पर दिखाए, zoom-out करके नहीं। |
<meta name="description"> | text | छोटा सारांश, जिसे Google search results में आपके link के नीचे दिखा सकता है। |
<link> | एक file path | Stylesheet, favicon या font को जोड़ता है। |
<style> | CSS rules | CSS जो सीधे page में लिखी हो। |
<script> | JavaScript | JavaScript, head में रखने पर आमतौर पर defer के साथ। |
<base> | एक web address | Page के सभी relative links के लिए base address तय करता है। |
किसी असली page के लिए अच्छा head ऐसा दिखता है:
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Page</title> <meta name="description" content="A short summary of this page."> </head>
<meta charset="utf-8"> को head के अंदर सबसे पहली चीज़ रखें। अगर browser character set जाने से पहले कोई text पढ़ ले, तो हिंदी शब्द और ₹ जैसे symbols टूटे हुए दिख सकते हैं।viewport tag mobile के लिए सबसे ज़रूरी एक line है। इसके बिना phone आपकी page को सिकोड़कर दिखाता है, छोटे-छोटे पढ़ने लायक नहीं अक्षरों के साथ। इसके साथ page सामान्य, पढ़ने लायक size में खुलती है।आम गलतियाँ
<title>भूल जाना — हर page को ठीक एक title चाहिए।- दिखने वाली content (headings, paragraphs) को head के अंदर रखना — वह body में जाती है।
- Viewport tag छोड़ देना — page हर phone पर टूटी हुई दिखती है।
- Description को लगभग 160 characters से लंबा लिखना — Google उसे search results में काट देता है।
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML from scratch with free lessons, examples and a certificate.">
<title>HTML Head — KAMALDNP Seekho</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page content goes here</h1>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. हेड में क्या जानकारी रहती है?
हेड में पेज का टाइटल, कैरेक्टर सेट, स्टाइलशीट और खोज विवरण रहता है, जो पेज पर दिखाई नहीं देता।
2. यूटीएफ़-8 सबसे पहले क्यों लिखा जाता है?
यूटीएफ़-8 हिंदी समेत हर भाषा को संभालता है, इसलिए इसे हेड में सबसे पहले रखने से अक्षर सही दिखते हैं।
3. व्यूूपोर्ट टैग मोबाइल पर क्या करता है?
यह फ़ोन को बताता है कि पेज को उसकी असली चौड़ाई पर दिखाए, ताकि पेज छोटा और ज़ूम-आउट होकर न दिखे।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
