HTML Academy · पाठ

id, class, style और title

किसी भी HTML एलिमेंट पर मुख्य वैश्विक एट्रिब्यूट लागू करें।

पाठ 1, कुल 4 में से13 चरण

id, class, style और title, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

वैश्विक विशेषताएँ

वैश्विक विशेषताएँ किसी भी HTML तत्व पर लागू की जा सकती हैं:

id — अद्वितीय पहचानकर्ता
class — एक या अधिक CSS वर्ग
style — इनलाइन CSS
title — टूलटिप का पाठ
और भी बहुत-सी: lang, hidden, tabindex, data-*...

id विशेषता

id विशेषता किसी तत्व को अद्वितीय पहचानकर्ता देती है:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

id के उपयोग

id विशेषता के कई उपयोग हैं:

CSS लक्ष्यीकरण: #hero-banner { ... }
JavaScript से चयन: document.getElementById('signup-form')
खंड नेविगेशन: <a href="#installation">
ARIA लेबलिंग: aria-labelledby="modal-title"

class विशेषता

class विशेषता एक या अधिक CSS वर्ग निर्धारित करती है:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id बनाम class

किसका उपयोग कब करें:

id — पृष्ठ का कोई एक विशिष्ट तत्व
class — कई तत्वों पर लागू की जाने वाली शैली का पैटर्न

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

style विशेषता

style विशेषता इनलाइन CSS जोड़ती है:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

इनलाइन style का उपयोग कब करें

इन मामलों में इनलाइन style स्वीकार्य है:

JavaScript से निर्धारित गतिशील मान
वे मान जिन्हें CSS लिखते समय जाना संभव नहीं होता (उपयोगकर्ता द्वारा निर्धारित रंग, चौड़ाइयाँ)
ईमेल HTML (ईमेल क्लाइंट बाहरी CSS हटा देते हैं)

स्थिर दृश्य प्रस्तुतिकरण संबंधी विकल्पों के लिए style का उपयोग न करें — उन्हें CSS में होना चाहिए।

title विशेषता

title विशेषता होवर करने पर टूलटिप का पाठ दिखाती है:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

title की सुगम्यता संबंधी सीमाएँ

title विशेषता में सुगम्यता संबंधी महत्वपूर्ण समस्याएँ हैं:

कीबोर्ड नेविगेशन से उपलब्ध नहीं
टच स्क्रीन पर दिखाई नहीं देती
स्क्रीन रीडर का व्यवहार असंगत होता है
महत्वपूर्ण जानकारी केवल title में कभी न रखें

महत्वपूर्ण जानकारी के लिए aria-label या दिखाई देने वाले पाठ का उपयोग करें।

विशिष्टता: id बनाम class बनाम इनलाइन

CSS की विशिष्टता निम्नतम से उच्चतम क्रम में:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

class के नामकरण की परंपराएँ

class के नामकरण की लोकप्रिय परंपराएँ:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

त्वरित जाँच

id विशेषता के बारे में मुख्य नियम क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: id, class, style और title

मुख्य वैश्विक विशेषताएँ:

id — पूरे पृष्ठ पर अद्वितीय; CSS, JavaScript, खंडों और ARIA के लिए उपयोगी
class — दोबारा उपयोग योग्य; कई वर्गों को रिक्त स्थानों से अलग किया जाता है
style — इनलाइन CSS (कम से कम उपयोग करें; बाहरी CSS को प्राथमिकता दें)
title — टूलटिप; कीबोर्ड या टच का उपयोग करने वाले लोगों के लिए सुगम नहीं
CSS में id की विशिष्टता > class की विशिष्टता

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “id, class, style और title” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “id, class, style और title” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“id, class, style और title” में मैं क्या सीखूँगा?

किसी भी HTML एलिमेंट पर मुख्य वैश्विक एट्रिब्यूट लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“id, class, style और title” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ