Introduction of html list in Hindi
HTML मे data को point मे बताने के लिये List का इस्तेमाल होता है। HTML List हमारी document structure को बनाए रखती है जिससे हमारा content पठनीय और अर्थपूर्ण नजर आता है।
HTML List के प्रकार
- Unordered List -UL List
- Ordered List – OL List
- Description List – DL List
- Nested List
Unordered List
हम unordered list को <ul> tag से define करते है। इसके अंदर प्रत्येक list <li> tag से start होती है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>An unordered HTML list</h2> <p>HTML list in Hindi</p> <ul> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> </body> </html>
इसमे list item के पहले bullet लग जाते है इसलिए इसको bulleted list भी कहते है।
इसके साथ आप type attribute का भी इस्तेमाल कर सकते हो। type attribute की मदद से आप bullet की जगह अन्य list style लगा सकते है। जैसे की
- Circle
- Square
- Disc
- None
उदाहरण
<!DOCTYPE html> <html> <body> <h2>An unordered HTML list</h2> <p>HTML list in Hindi</p> <ul type="circle"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul type="square"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul type="disc"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul type="none"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> </body> </html>
आप type की जगह CSS के अंदर list-style-type property का भी इस्तेमाल कर सकते हो।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>An unordered HTML list</h2> <p>HTML list in Hindi</p> <ul style="list-style-type:circle;"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul style="list-style-type:square;"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul style="list-style-type:disc;"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> <ul style="list-style-type:none;"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ul> </body> </html>
Ordered List
हम ordered list को <ol> tag से define करते है। इसके अंदर प्रत्येक list <li> tag से start होती है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>An ordered HTML list</h2> <p>HTML list in Hindi</p> <ol> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> </body> </html>
इसके साथ आप type attribute का भी इस्तेमाल कर सकते हो। type attribute की मदद से आप अन्य list style भी लगा सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>An ordered HTML list</h2> <ol type="1"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> <ol type="A"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> <ol type="a"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> <ol type="I"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> <ol type="i"> <li>computer</li> <li>Mobile</li> <li>tablet</li> </ol> </body> </html>
Description List
Description List को define करने के लिए <dl> tag का इस्तेमाल करते है। इसके अंदर <dd> और <dt> tag का इस्तेमाल करते है।
<dd> tag name को define करता है। और <dt> tag name को describes करता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>A Description List</h2> <dl> <dt>computer</dt> <dd>- it is bigger size than mobile</dd> <dt>Mobile</dt> <dd>- it is small device</dd> </dl> </body> </html>
Nested List
Nested List का मतलब है एक list के अंदर दूसरी list को बनाना।
उदाहरण
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>computer</li>
<li>Mobile
<ul>
<li>samsung</li>
<li>apple</li>
</ul>
</li>
<li>tablet</li>
</ul>
</body>
</html>