HTML Attributes
In this page:
<tagname attribute="value">content</tagname>href Attribute
यह attribute आपके link को बताता है कि उसे बिल्कुल कहां जाना है। यह वैसा ही है जैसे Rahul किसी Patna auto-driver को अपनी destination बता रहा हो ताकि वह गलत कॉलोनी में न पहुंच जाए।
href attribute भूल जाना anchor tag को एक dead link बना देता है जो click करने पर कुछ नहीं करता।
- external sites को link करते समय हमेशा https से शुरू होने वाला secure address उपयोग करें।
- Accepted attributes:
- href — absolute URL | relative path | #fragment | mailto:address | tel:number
- a, area और link elements पर valid
- target — _self | _blank | _parent | _top
- rel — noopener | noreferrer | nofollow ...
उदाहरण: The href Attribute
<a href="https://example.com">Visit our site</a>src Attribute
Images जादुई रूप से screen पर नहीं आ सकतीं। src attribute एक home address की तरह काम करता है, जो ब्राउज़र को बताता है कि image file असल में कहां रखी है। एक broken src path लाइव साइट पर images के display न होने का सबसे आम कारणों में से एक है।
- अपने project को व्यवस्थित रखने के लिए सभी images को assets नाम के एक folder में रखें।
- Accepted attributes:
- src — resource का URL (absolute या relative path)
- img, script, iframe, video, audio, source, track, embed और input type=image पर valid
- srcset — width (w) या density (x) descriptors के साथ comma-separated image URLs की list
उदाहरण: The src Attribute
<img src="images/photo.jpg">alt Attribute
कभी-कभी Muzaffarpur में internet साथ नहीं देता, या कोई screen reader Priya को page पढ़ने में मदद कर रहा होता है। alt attribute image लोड न होने पर एक text backup देता है।
Alt text SEO के लिए भी मायने रखता है, क्योंकि search engines किसी image को 'देख' नहीं सकते और उसके content को समझने के लिए इस text पर निर्भर रहते हैं।
- banner जैसे सामान्य शब्दों के बजाय छोटे, मददगार descriptions लिखें।
- Accepted attributes:
- alt — image का वर्णन करने वाला छोटा text
- alt="" — empty value एक विशुद्ध decorative image दर्शाता है
- img, area और input type=image पर valid
उदाहरण: The alt Attribute
<img src="photo.jpg" alt="A red bicycle leaning against a wall">title Attribute
किसी के mouse hover करने पर एक छोटा tooltip दिखाना चाहते हैं? title attribute वैसा ही है जैसे Amit user के कान में एक छोटा सा hint फुसफुसा रहा हो।
जरूरी जानकारी के लिए title attribute का अत्यधिक उपयोग करना एक बुरा विचार है, क्योंकि यह hover के बिना touch devices पर अदृश्य रहता है।
- इस text को संक्षिप्त और सीधा रखें।
- Accepted values:
- title — कोई भी advisory text, आमतौर पर hover पर tooltip के रूप में दिखता है
- Global attribute: हर element पर valid
- alt या visible label का विकल्प नहीं है
उदाहरण: The title Attribute
<p title="Hover to see this tooltip">Hover over this text</p>Global Attributes: class और id
class और id लगभग हर HTML element पर उपलब्ध global attributes हैं -- class कई elements को एक ही styling या behavior share करने के लिए group करता है, जबकि id page पर बिल्कुल एक element को CSS, JavaScript, या in-page links के लिए uniquely identify करता है।
- Accepted attributes:
- class — class names की space-separated list
- id — document के अंदर unique identifier (कोई spaces नहीं)
- दोनों global attributes हैं जो हर element पर valid हैं
उदाहरण: Global Attributes: class and id
<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>
<p id="intro">Unique paragraph</p>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: