इस आर्टिकल में हम आपको HTML Lists Tutorials in Hindi – Part 11 के बारे में बताएँगे.
List के द्वारा डॉक्यूमेंट में जरुरी चीजों को क्रम के अनुसार सेट कर सकते है. HTML में 3 तरह की लिस्ट होती है जिनके बारे में आज इस आर्टिकल में हम आपको बताएँगे.
- Ordered List
- Unordered List
- Description List
HTML Ordered List
इस लिस्ट का मतलब है किसी किसी भी लिस्ट को शुरू करने से पहले उसको किसी संख्या या शब्द से अंकित करके लिस्ट बनाना. इसके लिए हम <ol> element का इस्तेमाल करेंगे. हर item को दर्शाने के लिए हम <ol> element में <li> element का इस्तेमाल करेंगे.
Example
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
इस प्रकार हम एक order लिस्ट बना सकते है. इसकी आउटपुट हम आपको नीचे दिखा रहे है.
यहाँ पर by default नंबर आ रहे है. आप इसको चेंज करके roman या character भी लिख सकते है. इसके लिए आपको <ol> में type attribute का इस्तेमाल करना होगा. जैसे
- type=”A” => यह बड़ी ABC के लिए इस्तेमाल किया जाता है.
- type=”1″ => यह by default होता है. इसमें आपको 123 नंबर दिखाई देंगे
- type=”a” => यह छोटी abc के लिए इस्तेमाल किया जाता है.
- type=”I” => यह बड़े roman नंबर के लिए इस्तेमाल किया जाता है.
- type=”i” => यह छोटे roman नंबर के लिए इस्तेमाल किया जाता है.
Example
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
इसकी आउटपुट आप नीचे फोटो में देख सकते है.
HTML Unordered List
जैसे हमने आपको Order list के बारे में बताया था उसी प्रकार आप Unordered list का भी इस्तेमाल होता है. इसके लिए आपको <ul> element का इस्तेमाल करना होगा. इसके अन्दर आप <li> element का इस्तेमाल कर सकते है.
Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
इसकी आउटपुट हम आपको नीचे बता रहे है.
अगर हमें इसका marker टाइप चेंज करना है तो हम style=”list-style-type:value” का इस्तेमाल करके आसानी से इसके टाइप को चेंज कर सकते है. value में आप नीचे बताये गए type इस्तेमाल कर सकते है.
- disc
- circle
- square
- none
HTML Description Lists
HTML उपर बताये गए लिस्ट के अलावा Description Lists को भी सपोर्ट करता है. इसकी मदद से आप किसी भी item की Description तैयार कर सकते है. Description Lists को define करने के लिए <dl> element का इस्तेमाल किया जाता है. इसके अन्दर आपको आप <dh> जो की heading के लिए इस्तेमाल होता है और <dd> जो की Description heading के Data को दर्शाता है.
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
इसकी आउटपुट हम आपको नीचे बता रहे है.
HTML Nested List
हम HTML list item में nested लिस्ट भी बना सकते है. इसका इस्तेमाल dropdown menu बनाने के लिए किया जाता है.
Example
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>nested item one</li>
<li>nested item two</li>
</ul>
</li>
<li>item 3</li>
</ul>
इसकी आउटपुट हम आपको नीचे दिखा रहे है.
Important Note
Ordered List के साथ में हम counting के लिए attribute का इस्तेमाल भी कर सकते है. इसके लिए आपको start="number" डालना होगा. जब भी आप नंबर में कोई desire नंबर डालेंगे आपकी list उसी नंबर से शुरू होगी.
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
इसकी आउटपुट हम आपको नीचे दिखा रहे है.
HTML List CSS के बारे में हम आपको CSS Tutorials in Hindi part में बताएँगे.
