HTML Academy · पाठ

अनऑर्डर्ड सूची: ul और li

ul और li एलिमेंट से बुलेट वाली सूचियाँ बनाएँ।

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

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

क्रमरहित सूची क्या है

क्रमरहित सूची वस्तुओं को बुलेट points के साथ दिखाती है — क्रम महत्वपूर्ण नहीं होता:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

सूची तत्व

<ul> (क्रमरहित सूची) तत्व सूची को समेटता है। केवल <li> elements ही इसके सीधे बच्चे होने चाहिए:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

CSS से बुलेट की शैली बदलना

CSS से सूची संकेतकों को नियंत्रित करें:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul के रूप में नेविगेशन

नेविगेशन मेनू अर्थ की दृष्टि से लिंक की सूची होते हैं:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li में कोई भी सामग्री हो सकती है

सूची-वस्तुओं में कोई भी प्रवाह सामग्री रखी जा सकती है:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

पंक्तिबद्ध सूचियाँ

CSS से सूची-वस्तुओं को क्षैतिज रूप से प्रदर्शित करें:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

ul के अर्थपूर्ण उपयोग

क्रमरहित सूचियों के सामान्य अर्थपूर्ण उपयोग:

नेविगेशन मेनू
सुविधाओं की सूचियाँ
टैग क्लाउड
संबंधित लिंक
व्यंजनों में सामग्री की सूचियाँ

कई वस्तुओं के लिए ul बनाम अनुच्छेद

जब आपके पास कई संबंधित वस्तुएँ हों, तो अलग-अलग अनुच्छेदों की तुलना में सूची अर्थ की दृष्टि से बेहतर होती है:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

list-style-image से सूची संकेतक

सूची बुलेट के रूप में कस्टम चित्र का उपयोग करें:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

list-style का संक्षिप्त रूप

list-style का संक्षिप्त रूप प्रकार, स्थिति और चित्र निर्धारित करता है:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

पहुँच-सुलभता

सूचियों के लिए पहुँच-सुलभता संबंधी टिप्पणियाँ:

स्क्रीन रीडर सूची का प्रकार और वस्तुओं की संख्या बताते हैं
list-style: none का उपयोग करने पर कुछ स्क्रीन रीडर इसे सूची के रूप में बताना बंद कर सकते हैं — अर्थपूर्ण संरचना बनाए रखने के लिए role="list" जोड़ें

<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

त्वरित जाँच

ul का एकमात्र मान्य सीधा बच्चा तत्व कौन-सा है?

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

पुनरावृत्ति: क्रमरहित सूचियाँ

क्रमरहित सूची की आवश्यक बातें:

<ul> ऐसी सूची को समेटता है जिसमें क्रम महत्वपूर्ण नहीं होता
<li> ही एकमात्र मान्य सीधा बच्चा है
डिफ़ॉल्ट बुलेट: डिस्क; इसे list-style-type से बदलें
नेविगेशन मेनू अर्थ की दृष्टि से लिंक वाली <ul> सूचियाँ होते हैं
यदि आप CSS से बुलेट हटा दें, तो role="list" जोड़ें

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

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

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

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

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

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

क्या “अनऑर्डर्ड सूची: ul और li” पाठ निःशुल्क है?

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

“अनऑर्डर्ड सूची: ul और li” में मैं क्या सीखूँगा?

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

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

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

“अनऑर्डर्ड सूची: ul और li” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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