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>- एक ही webpage पर कई elements पर same ID attribute इस्तेमाल करना।
- critical instructions दिखाने के लिए title tooltips पर निर्भर रहना, जो mobile users को miss हो जाएंगी।
- CSS visibility: hidden से elements hide करना और फिर भी screen readers से उन्हें पढ़वाने की उम्मीद करना।
- Global attributes (जैसे class, id, और style) आपके webpage पर किसी भी HTML element पर लागू किए जा सकते हैं।
- group styles के लिए class, unique identifiers के लिए id, और quick inline CSS overrides लागू करने के लिए style इस्तेमाल करें।
- tooltips के लिए title, language settings define करने के लिए lang और dir, और element visibility और keyboard focus control करने के लिए hidden या tabindex इस्तेमाल करें।
standard HTML5 global attributes सभी web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: