HTML ग्लोबल एट्रिब्यूट्स
In this page:
<tagname id="value" class="value" style="value" title="value" hidden>content</tagname>class और id एट्रिब्यूट्स
class attribute group styling के लिए कई elements को एक साथ जोड़ता है, जबकि id attribute page पर किसी एक specific element को एक पूरी तरह unique identifier देता है।
- हर ID आपके पूरे HTML page structure में पूरी तरह unique होनी चाहिए।
- Accepted attributes:
- class — space-separated class names
- id — unique identifier, no spaces
उदाहरण: The class and id Attributes
<p class="highlight">Grouped</p>
<p id="intro">Unique</p>style एट्रिब्यूट
style attribute किसी एक element पर सीधे inline CSS styles लागू करता है। इसकी specificity काफी ज़्यादा होती है, यानी यह external stylesheets के rules को override कर देता है।
- quick testing के लिए inline styles का इस्तेमाल करें, लेकिन बड़े projects में कोड साफ रखने के लिए external stylesheets पर शिफ्ट करें।
- Accepted values:
- style — semicolon-separated CSS declarations, e.g. color: red; margin: 0
उदाहरण: The style Attribute
<p style="color: blue;">Inline styled text</p>title एट्रिब्यूट
title attribute किसी element के बारे में कुछ अतिरिक्त जानकारी देता है। ज़्यादातर desktop browsers में, यह जानकारी element पर mouse hover करने पर एक छोटे tooltip के रूप में दिखती है।
- title tooltips को छोटा और मददगार रखें।
- Accepted values:
- title — advisory text, usually shown as a tooltip
उदाहरण: The title Attribute
<p title="Extra information">Hover over me</p>lang और dir एट्रिब्यूट्स
lang attribute आपके content की भाषा बताता है, और dir attribute text की direction (ltr यानी left-to-right, या rtl यानी right-to-left) तय करता है, जो accessibility और search engine optimization दोनों के लिए ज़रूरी है।
- अपने opening html tag के अंदर हमेशा page की primary language डिक्लेयर करें।
- Accepted attributes:
- lang — BCP 47 language code, e.g. en | fr | ar | zh-CN
- dir — ltr | rtl | auto
उदाहरण: The lang and dir Attributes
<html lang="ar" dir="rtl">
</html>hidden और tabindex एट्रिब्यूट्स
hidden attribute किसी element को पूरी तरह page layout से छिपा देता है। tabindex attribute elements को page के keyboard tab navigation sequence में शामिल या बाहर रखता है।
- custom, styled elements को keyboard से focusable बनाने के लिए tabindex="0" सेट करें।
- Accepted attributes:
- hidden — boolean | until-found
- tabindex — 0 (focusable, in order) | -1 (focusable by script only) | positive integer (avoid)
उदाहरण: The hidden and tabindex Attributes
<p hidden>You cannot see this</p>
<div tabindex="0">Focusable div</div>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: