Previous Next

HTML List क्या है?

HTML में Lists का इस्तेमाल एक जैसे या related items को व्यवस्थित तरीके से दिखाने के लिए किया जाता है। Lists की मदद से information को पढ़ना और समझना आसान हो जाता है। HTML में मुख्य रूप से तीन प्रकार की lists होती हैं — Ordered List, Unordered List और Description List।

इसके अलावा <li> tag का इस्तेमाल list के individual items के लिए किया जाता है और एक list के अंदर दूसरी list बनाकर Nested List भी बनाई जा सकती है।

Ordered List (<ol>)

Ordered List का इस्तेमाल उन items के लिए किया जाता है जिनका कोई sequence, order या numbering हो। इसमें browser सामान्यतः items के आगे numbers दिखाता है, जैसे 1, 2, 3 आदि।

Ordered List बनाने के लिए <ol> tag और उसके अंदर प्रत्येक item के लिए <li> tag का इस्तेमाल किया जाता है।

Ordered List का Basic Example

HTML

इस example में <ol> पूरी ordered list को define करता है, जबकि प्रत्येक <li> एक individual list item को represent करता है। Browser इन items को default रूप से 1, 2 और 3 की numbering के साथ दिखाएगा।

Ordered List में Sequence

Ordered List तब ज्यादा useful होती है जब items का order important हो। उदाहरण के लिए किसी process के steps, instructions, ranking या किसी procedure के अलग-अलग steps को ordered list में दिखाया जा सकता है।

जैसे:

HTML सीखें
CSS सीखें
JavaScript सीखें

यहाँ items का sequence एक logical order को represent करता है।

Unordered List (<ul>)

Unordered List का इस्तेमाल उन items के लिए किया जाता है जिनका कोई specific sequence या numbering जरूरी नहीं है। इसमें browser सामान्यतः items के आगे bullet points दिखाता है।

Unordered List बनाने के लिए <ul> tag और प्रत्येक item के लिए <li> tag का इस्तेमाल किया जाता है।

Unordered List का Basic Example

HTML

इस example में browser items को bullet points के साथ display करेगा। यहाँ items का order important नहीं है, इसलिए <ul> का इस्तेमाल किया गया है।

Unordered List का इस्तेमाल कहाँ होता है?

Unordered Lists का इस्तेमाल website navigation items, features, product lists, ingredients, related topics और ऐसे कई content sections में किया जा सकता है जहाँ items को किसी particular order में दिखाना जरूरी नहीं होता।

Description List (<dl>)

Description List का इस्तेमाल किसी term के साथ उसकी definition, description या additional information दिखाने के लिए किया जाता है। यह dictionary या glossary जैसी information के लिए useful होती है।

Description List में मुख्य रूप से तीन tags इस्तेमाल होते हैं:

<dl> — पूरी Description List को define करता है।
<dt> — Definition Term यानी term या नाम को define करता है।
<dd> — Definition Description यानी उस term की description या meaning को define करता है।

Description List का Example

HTML

ऊपर के example में <dl> पूरी description list है। <dt> में term और <dd> में उस term की description दी गई है।

List Item (<li>)

<li> का मतलब List Item होता है। इसका इस्तेमाल list के प्रत्येक individual item को define करने के लिए किया जाता है।

<li> को सामान्यतः <ol> या <ul> के अंदर इस्तेमाल किया जाता है। Description List में <dt> और <dd> का इस्तेमाल होता है, इसलिए वहाँ <li> की आवश्यकता नहीं होती।

उदाहरण:

HTML

इस example में तीन अलग-अलग <li> elements हैं। Browser इन सभी को <ul> के अंदर list items के रूप में display करता है।

Nesting of Lists

HTML में एक list के अंदर दूसरी list बनाना Nested List कहलाता है। इसका इस्तेमाल तब किया जाता है जब किसी main item के अंदर उससे related sub-items दिखाने हों।

उदाहरण के लिए, अगर किसी website पर Fruits एक main category है और उसके अंदर Mango तथा Banana जैसे items हैं, तो इन्हें nested list के रूप में दिखाया जा सकता है।

Nested List का Example

HTML

इस example में पहली <ul> main list है। इसके अंदर Fruits एक list item है और Fruits के अंदर दूसरी <ul> रखी गई है। यह दूसरी list nested list है।

Ordered List के अंदर Unordered List

Nested lists में केवल <ul> के अंदर <ul> ही जरूरी नहीं है। आप जरूरत के अनुसार ordered और unordered lists को एक-दूसरे के अंदर भी use कर सकते हैं।

HTML

यहाँ main list <ol> है, इसलिए Frontend और Backend numbered items हैं। इनके अंदर <ul> का इस्तेमाल करके sub-items बनाए गए हैं।

Styling HTML Lists with CSS

HTML lists को CSS की मदद से काफी आसानी से customize किया जा सकता है। आप list के bullets या numbers, text color, background, spacing, padding, border और अन्य properties को बदल सकते हैं।

नीचे एक example में ordered और unordered list को CSS के साथ style किया गया है। इसमें list items के बीच spacing, background, border और colors को customize किया गया है।

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Styled HTML Lists</title>

h2 {
          margin-top: 20px;
        }

ul {
          list-style-type: square;
          padding: 15px 15px 15px 35px;
          background: #f2f2f2;
          border-radius: 8px;
        }

ol {
          padding: 15px 15px 15px 35px;
          background: #eeeeee;
          border-radius: 8px;
        }

li {
          padding: 8px;
          margin-bottom: 5px;
          background: white;
          border-radius: 5px;
        }
  </style>
  </head>

<body>

<h2>Frontend Technologies</h2>

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

<h2>Learning Steps</h2>

<ol>
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Learn JavaScript</li>
        </ol>

</body>
</html>

CSS में इस्तेमाल हुई मुख्य Properties

list-style-type — list के bullet या marker का type बदलने के लिए।
padding — list के अंदर spacing देने के लिए।
background — list के background को customize करने के लिए।
border-radius — list के corners को rounded बनाने के लिए।
margin-bottom — अलग-अलग list items के बीच spacing देने के लिए।

Complete HTML Lists Example

अब नीचे एक complete example दिया गया है जिसमें Ordered List, Unordered List, Description List और Nested List सभी को एक ही HTML page में इस्तेमाल किया गया है।

HTML

<!DOCTYPE html>
<html>

<head>
        <title>HTML Lists Demo</title>
    </head>

<body>

<h1>HTML Lists Demo</h1>

<h2>1. Ordered List</h2>

<ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>

<h2>2. Unordered List</h2>

<ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Oranges</li>
        </ul>

<h2>3. Description List</h2>

<dl>
            <dt>HTML</dt>
            <dd>HyperText Markup Language</dd>

<dt>CSS</dt>
            <dd>Cascading Style Sheets</dd>

<dt>JS</dt>
            <dd>JavaScript</dd>

</dl>

<h2>4. Nested List</h2>

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

<li>Backend
                <ul>
                    <li>PHP</li>
                    <li>Python</li>
                </ul>
            </li>

</ul>

</body>
</html>

Important Points to Remember

<ol> का इस्तेमाल ordered या numbered list बनाने के लिए किया जाता है।
<ul> का इस्तेमाल unordered या bulleted list बनाने के लिए किया जाता है।
<li> list के individual item को represent करता है।
<dl> description list को define करता है।
<dt> description list के term को define करता है।
<dd> term की description या details को define करता है।
एक list के अंदर दूसरी list बनाकर nested list बनाई जा सकती है।
CSS की मदद से lists के bullets, numbering, spacing, colors और overall design को customize किया जा सकता है।

Conclusion

HTML Lists webpage के content को व्यवस्थित और readable बनाने का एक आसान तरीका हैं। <ol> का इस्तेमाल तब किया जाता है जब items का sequence important हो, जबकि <ul> का इस्तेमाल सामान्य items के लिए किया जाता है। दूसरी तरफ <dl> terms और उनकी descriptions को represent करने के लिए useful है।

<li> की मदद से individual list items बनाए जाते हैं और nested lists की मदद से main items के अंदर sub-items भी दिखाए जा सकते हैं। CSS के साथ इन lists को अपने webpage के design के अनुसार आसानी से style किया जा सकता है।

Previous Next

Code copied!

Page Views

Visit ID

Not tracked yet

Visit Time

Time on Page

0 seconds

Request

Full Name *

Email Address *

Mobile Number

Message *

INITIALIZING...