HTML Head
In this page:
<head>
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>head Container
head element शुरुआती html tag और दिखने वाले body tag के बीच में होता है। इसमें metadata, stylesheet links, page titles, और आपके document को configure करने के लिए ज़रूरी अन्य administrative scripts होते हैं।
उदाहरण: The head Container
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Visible content</p>
</body>
</html>Document Character Sets को Define करना
Webpages हजारों unique letters, math signs, और emojis दिखाते हैं। meta charset tag browser को बताता है कि इन symbols को बिना टूटे-फूटे, गड़बड़ कोड दिखाए सुरक्षित रूप से कैसे पढ़ना और render करना है।
- global languages और emojis को natively support करने के लिए हमेशा अपने document character set के रूप में UTF-8 तय करें।
- Accepted attributes:
- charset — utf-8 (Living Standard में इकलौता अनुमत value)
- http-equiv="Content-Type" content="text/html; charset=utf-8" — पुराना equivalent
उदाहरण: Defining Document Character Sets
<head>
<meta charset="UTF-8">
</head>Search Engine Metadata को Configure करना
Search engines मेटा description tags का इस्तेमाल आपकी clickable blue headline के नीचे summary snippets दिखाने के लिए करते हैं। एक descriptive description click-through rates बढ़ाता है।
- Google द्वारा truncate होने से बचाने के लिए अपने meta descriptions को 150 से 160 characters के बीच रखें।
- Accepted attributes:
- name — description | keywords | robots | author | viewport | theme-color
- content — उस name की value
- robots content — index | noindex | follow | nofollow
उदाहरण: Configuring Search Engine Metadata
<head>
<meta name="description" content="Learn HTML basics with simple examples.">
</head>बाहरी Stylesheets को Connect करना
link element आपके webpage को बाहरी CSS stylesheets से जोड़ने के लिए head section के अंदर रहता है। यह browser को बताता है कि आपके layout theme और design files कहाँ मौजूद हैं ताकि वह page को सही तरीके से render कर सके।
- हमेशा rel="stylesheet" attribute इस्तेमाल करें, ताकि browser को पता चले कि linked resource में design rules हैं।
- Accepted attributes:
- rel — stylesheet
- href — CSS फ़ाइल का URL
- media — media query, जैसे print | (max-width: 600px)
- integrity / crossorigin — Subresource Integrity
उदाहरण: Connecting External Stylesheets
<head>
<link rel="stylesheet" href="styles.css">
</head>Head में Scripts Inject करना
head section आमतौर पर उन JavaScript files को load करने के लिए इस्तेमाल होता है जिन्हें जल्दी parse होना चाहिए, जैसे page tracking, layout handlers, या font loaders।
- अपने head script tags पर defer attribute इस्तेमाल करें, ताकि कोड चलने से पहले आपका HTML structure लोड होना पूरा कर ले।
- Accepted attributes:
- src — बाहरी script का URL
- defer — boolean
- async — boolean
- type — module | text/javascript
उदाहरण: Injecting Scripts into the Head
<head>
<script src="tracker.js" defer></script>
</head>base Element
base element page पर हर relative link और form के लिए एक जगह पर default URL और default target सेट कर देता है।
हर एक link पर पूरा domain लिखने के बजाय, आप इसे head में एक बार declare करते हैं और हर relative href अपने-आप उसके सापेक्ष resolve हो जाता है।
- एक page में सिर्फ एक ही base element हो सकता है, और यह link या img tags जैसे URL इस्तेमाल करने वाले किसी भी अन्य element से पहले आना चाहिए।
- Accepted attributes:
- href — relative URLs के लिए base URL
- target — _self | _blank | _parent | _top
- सिर्फ एक base element, head में रखा गया
उदाहरण: The base Element
<head>
<base href="https://example.com/" target="_blank">
</head>Canonical Links
rel=canonical link search engines को बताता है कि जब एक जैसे content को कई अलग-अलग URLs के जरिए एक्सेस किया जा सकता हो (जैसे tracking parameters के साथ और बिना), तो कौन-सा एक URL page का official version है।
यह search engines को duplicate versions को अलग pages मानने और आपके ranking signals को उनके बीच बांटने से रोकता है।
- हर page पर एक self-referencing canonical tag जोड़ें, भले ही आपको लगे कि कोई duplicate नहीं है — यह accidental duplicate content के खिलाफ एक सस्ता safety net है।
- Accepted attributes:
- rel — canonical
- href — page के preferred version का absolute URL
उदाहरण: Canonical Links
<head>
<link rel="canonical" href="https://example.com/page">
</head>Resource Hints (preload, prefetch, preconnect)
Resource hints आपको browser को ज़रूरी resources के बारे में पहले से बता देने देते हैं, इससे पहले कि वह सामान्य रूप से उन्हें खोजे। preload वर्तमान page के लिए तुरंत ज़रूरी चीज़ लाता है, prefetch उस चीज़ को लाता है जो user के अगले page पर जाने पर काम आ सकती है, और preconnect किसी दूसरे domain से पहले ही connection खोल देता है ताकि बाद के requests तेज़ हो जाएं।
- अपने सबसे ज़रूरी above-the-fold font या hero image के लिए preload इस्तेमाल करें, क्योंकि वे अक्सर देर से load होते हैं और visible layout shifts कर देते हैं।
- Accepted attributes:
- rel — preload | prefetch | preconnect | dns-prefetch | modulepreload
- href — resource का URL
- as — script | style | font | image | fetch | audio | video | track
- crossorigin — anonymous | use-credentials (fonts के लिए ज़रूरी)
- type — MIME type
उदाहरण: Resource Hints (preload, prefetch, preconnect)
<head>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preconnect" href="https://fonts.example.com">
</head>noscript Element
noscript element में वह content होता है जो सिर्फ तब दिखता है जब browser में JavaScript disabled हो या वह इसे support न करता हो।
इससे आप users को silently टूटा हुआ page दिखाने के बजाय यह बताने वाला helpful message दिखा सकते हैं कि कुछ features के लिए JavaScript ज़रूरी है।
उदाहरण: The noscript Element
<noscript>
Please enable JavaScript to use the calculator tool.
</noscript>Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: