HTML में information को व्यवस्थित तरीके से दिखाने के लिए Lists और Tables का बहुत important role है। किसी webpage पर topics की list, steps, categories, product information, student marks, price details या किसी अन्य structured data को display करने के लिए HTML के अलग-अलग elements का उपयोग किया जाता है।

इस Part 3 में हम HTML के List, Description List, Table और Data-related elements को simple Hindi-English mixed language में examples के साथ सीखेंगे।

1. `<ul>` Tag – Unordered List

<ul> का पूरा नाम Unordered List है। इसका उपयोग ऐसी list बनाने के लिए किया जाता है जिसमें items का कोई particular numerical order जरूरी नहीं होता।

Browser सामान्यतः list items के सामने bullet points दिखाता है।

Example

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

		

Output में तीन bullet points दिखाई देंगे।

कब इस्तेमाल करें?

<ul> का उपयोग इन situations में किया जा सकता है:

Website menu
Features
Categories
Skills
Related topics
Shopping items

2. `<ol>` Tag – Ordered List

<ol> का पूरा नाम Ordered List है। इसका उपयोग ऐसी list के लिए किया जाता है जिसमें items का order important हो।

Browser सामान्यतः items को numbers के साथ display करता है।

Example

			
<ol>
    <li>Open Notepad</li>
    <li>Write HTML Code</li>
    <li>Save the File</li>
    <li>Open it in Browser</li>
</ol>

		

इसका output लगभग इस प्रकार होगा:

Open Notepad
Write HTML Code
Save the File
Open it in Browser

Ordered List की Type

type attribute के माध्यम से numbering style बदली जा सकती है।

			
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

		

यह A, B, C आदि के रूप में numbering कर सकता है।

3. `<li>` Tag – List Item

<li> का अर्थ List Item है।

यह <ul> और <ol> के अंदर individual list item बनाने के लिए इस्तेमाल होता है।

Example

			
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>

		

यहाँ तीनों <li> elements individual list items हैं।

<li> को सामान्यतः अकेले नहीं, बल्कि <ul> या <ol> के अंदर इस्तेमाल किया जाता है।

4. `<dl>` Tag – Description List

<dl> का पूरा नाम Description List है।

इसका उपयोग terms और उनके descriptions को represent करने के लिए किया जाता है।

Example

			
<dl>
    <dt>HTML</dt>
    <dd>HTML is used to create the structure of web pages.</dd>
    <dt>CSS</dt>
    <dd>CSS is used to style web pages.</dd>
</dl>

		

यह glossary या terminology list के लिए बहुत useful है।

5. `<dt>` Tag – Description Term

<dt> का उपयोग description list में term या name को define करने के लिए किया जाता है।

Example

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

यहाँ HTML description term है।

6. `<dd>` Tag – Description Details

<dd> description list के term की description या details को represent करता है।

Example

			
<dl>
    <dt>HTML</dt>
    <dd>Language used to structure web pages.</dd>
    <dt>CSS</dt>
    <dd>Language used to style web pages.</dd>
</dl>

		

इस तरह <dt> और <dd> मिलकर definition या description list बनाते हैं।

HTML Tables

HTML में table का उपयोग rows और columns में structured data display करने के लिए किया जाता है।

उदाहरण:

Name	Class	Marks
Rahul	10	85
Priya	10	92

इस तरह का data HTML table से बनाया जा सकता है।

7. `<table>` Tag

<table> element HTML table create करने के लिए इस्तेमाल होता है।

Example

			
<table>
    <tr>
        <td>Name</td>
        <td>Class</td>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>10</td>
    </tr>
</table>

		

<table> पूरा table container होता है।

8. `<caption>` Tag

<caption> table का title या caption define करता है।

Example

			
<table>
    <caption>Student Details</caption>
    <tr>
        <th>Name</th>
        <th>Class</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>10</td>
    </tr>
</table>

		

यह table के बारे में बताने वाला heading/title provide करता है।

9. `<tr>` Tag – Table Row

<tr> का अर्थ Table Row है।

इसका उपयोग table में एक row बनाने के लिए किया जाता है।

Example

			
<table>
    <tr>
        <td>Rahul</td>
        <td>90</td>
    </tr>
</table>

		

यहाँ <tr> एक complete row को represent करता है।

10. `<th>` Tag – Table Header Cell

<th> का उपयोग table में header cell बनाने के लिए किया जाता है।

Example

			
<table>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
</table>

		

Browser सामान्यतः <th> text को bold और centered style में display करता है, हालांकि actual styling CSS से control करना बेहतर है।

11. `<td>` Tag – Table Data Cell

<td> का अर्थ Table Data है।

इसका उपयोग table के अंदर normal data cell बनाने के लिए किया जाता है।

Example

			
<table>
    <tr>
        <td>Rahul</td>
        <td>85</td>
    </tr>
</table>

		

हर <td> एक data cell represent करता है।

12. `<thead>` Tag

<thead> table के header rows को group करने के लिए इस्तेमाल होता है।

Example

			
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>
    </thead>
</table>

		

यह table structure को अधिक meaningful बनाता है।

13. `<tbody>` Tag

<tbody> table के मुख्य data rows को group करता है।

Example

			
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>92</td>
        </tr>
    </tbody>
</table>

		

यह table के main body data को represent करता है।

14. `<tfoot>` Tag

<tfoot> table के footer rows को group करने के लिए इस्तेमाल किया जाता है।

इसका उपयोग totals या summary information के लिए किया जा सकता है।

Example

			
<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Book</td>
            <td>₹200</td>
        </tr>
        <tr>
            <td>Notebook</td>
            <td>₹100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <th>₹300</th>
        </tr>
    </tfoot>
</table>

		

यहाँ footer में total amount दिखाया गया है।

15. `<colgroup>` Tag

<colgroup> table के एक या अधिक columns को group करने के लिए इस्तेमाल होता है।

यह विशेष रूप से column-level styling या column properties define करने में useful हो सकता है।

Example

			
<table>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>85</td>
    </tr>
</table>

		

<colgroup> के अंदर <col> elements रखे जा सकते हैं।

16. `<col>` Tag

<col> table के एक या अधिक columns के लिए properties define करने के लिए इस्तेमाल किया जाता है।

Example

			
<table>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>85</td>
    </tr>
</table>

		

एक column की styling CSS के साथ की जा सकती है।

			
<table>
    <colgroup>
        <col style="background-color: lightgray;">
        <col>
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>85</td>
    </tr>
</table>

		

17. `rowspan` Attribute

rowspan HTML tag नहीं है, बल्कि table cell का attribute है। इसका उपयोग एक cell को multiple rows में span कराने के लिए किया जाता है।

Example

			
<table border="1">
    <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td rowspan="2">Rahul</td>
        <td>Math</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Science</td>
        <td>85</td>
    </tr>
</table>

		

यहाँ Rahul वाला cell दो rows में फैला हुआ है।

18. `colspan` Attribute

colspan भी tag नहीं बल्कि attribute है।

इसका उपयोग एक cell को multiple columns में span कराने के लिए किया जाता है।

Example

			
<table border="1">
    <tr>
        <th colspan="3">Student Information</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>10</td>
        <td>90</td>
    </tr>
</table>

		

यहाँ Student Information तीन columns की जगह लेता है।

Data-related HTML Elements

HTML में कुछ elements ऐसे भी हैं जो visible information को machine-readable information से associate करने में मदद करते हैं।

19. `<data>` Tag

<data> element visible content को machine-readable value से associate करता है।

Example

			
<p>
    Product:
    <data value="101">HTML Book</data>
</p>

यहाँ user को HTML Book दिखाई देता है, जबकि value="101" machine-readable value provide करता है।

20. `<time>` Tag

<time> element किसी specific time या date को represent करने के लिए इस्तेमाल किया जाता है।

Example

			
<p>
    Published on
    <time datetime="2026-08-30">
        August 30, 2026
    </time>
</p>

		

datetime attribute machine-readable date/time value provide कर सकता है।

Time Example

			
<p>
    Class starts at
    <time datetime="10:00">
        10:00 AM
    </time>
</p>

		

21. `<data>` और `<time>` में Difference

दोनों elements data को machine-readable information से associate कर सकते हैं, लेकिन उनका purpose अलग है।

<data> सामान्य data/value के लिए useful है।

<data value="123">Product</data>

<time> dates और times के लिए designed है।

<time datetime="2026-08-30">August 30, 2026</time>

Complete List Example

अब एक webpage पर unordered list, ordered list और description list को एक साथ देखते हैं।

			
<h2>Web Development Technologies</h2>
<h3>Popular Technologies</h3>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<h3>Learning Steps</h3>
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>
<h3>Technology Details</h3>
<dl>
    <dt>HTML</dt>
    <dd>Used to create webpage structure.</dd>
    <dt>CSS</dt>
    <dd>Used to style webpages.</dd>
    <dt>JavaScript</dt>
    <dd>Used to add interactivity.</dd>
</dl>

		

Complete HTML Table Example

अब एक complete student marks table बनाते हैं।

			
<table border="1">
    <caption>Student Marks</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Math</th>
            <th>Science</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>10</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>10</td>
            <td>95</td>
            <td>92</td>
        </tr>
        <tr>
            <td>Amit</td>
            <td>10</td>
            <td>80</td>
            <td>88</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Average</th>
            <th>88</th>
            <th>88</th>
        </tr>
    </tfoot>
</table>

		

यह एक properly structured HTML table का basic example है।

Lists और Tables में Difference

Lists और tables दोनों information organize करने के लिए इस्तेमाल होते हैं, लेकिन उनका purpose अलग है।

List

जब information items की sequence या collection के रूप में हो, तो list उपयोग करें।

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

		

Table

जब information naturally rows और columns में हो, तो table उपयोग करें।

			
<table>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>90</td>
    </tr>
</table>

		

Table का उपयोग केवल page layout बनाने के लिए नहीं करना चाहिए। Modern webpages में layout के लिए CSS का उपयोग किया जाता है।

Part 3 में Covered Tags

इस part में हमने Lists, Tables और Data-related elements cover किए।

List Elements

			
<ul>
<ol>
<li>
<dl>
<dt>
<dd>

		

Table Elements

			
<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
<colgroup>
<col>

		

Data-related Elements

			
<data>
<time>

Important Table Attributes

ये tags नहीं बल्कि commonly used attributes हैं:

			
rowspan
colspan

Quick Revision

Tag	Main Purpose
`<ul>`	Unordered list
`<ol>`	Ordered list
`<li>`	List item
`<dl>`	Description list
`<dt>`	Description term
`<dd>`	Description details
`<table>`	Creates a table
`<caption>`	Table title/caption
`<thead>`	Table header group
`<tbody>`	Main table data
`<tfoot>`	Table footer group
`<tr>`	Table row
`<th>`	Table header cell
`<td>`	Table data cell
`<colgroup>`	Groups table columns
`<col>`	Defines properties for columns
`<data>`	Machine-readable data value
`<time>`	Date/time information

Conclusion

Lists और tables HTML के बहुत important parts हैं। <ul>, <ol> और <li> की मदद से हम simple lists बना सकते हैं, जबकि <dl>, <dt> और <dd> glossary या term-description information के लिए useful हैं।

Tables के लिए <table>, <tr>, <th> और <td> सबसे basic elements हैं। बड़े और properly structured tables में <caption>, <thead>, <tbody>, <tfoot>, <colgroup> और <col> का उपयोग करके table को meaningful बनाया जा सकता है।

इसके अलावा <data> और <time> जैसे elements visible information को machine-readable information से associate करने में मदद करते हैं।

Part 4 में हम HTML Forms और Form Controls सीखेंगे, जिसमें <form>, <input>, <label>, <button>, <select>, <option>, <textarea>, <fieldset>, <legend>, <datalist>, <output>, <progress>, <meter> और form से जुड़े अन्य important elements शामिल होंगे।

All HTML Tags with Examples – Part 3: Lists, Tables & Data-related Tags

1. <ul> Tag – Unordered List

Example

कब इस्तेमाल करें?

2. <ol> Tag – Ordered List

Example

Ordered List की Type

3. <li> Tag – List Item

Example

4. <dl> Tag – Description List

Example

5. <dt> Tag – Description Term

Example

6. <dd> Tag – Description Details

Example

HTML Tables

7. <table> Tag

Example

8. <caption> Tag

Example

9. <tr> Tag – Table Row

Example

10. <th> Tag – Table Header Cell

Example

11. <td> Tag – Table Data Cell

Example

12. <thead> Tag

Example

13. <tbody> Tag

Example

14. <tfoot> Tag

Example

15. <colgroup> Tag

Example

16. <col> Tag

Example

17. rowspan Attribute

Example

18. colspan Attribute

Example

Data-related HTML Elements

19. <data> Tag

Example

20. <time> Tag

Example

Time Example

21. <data> और <time> में Difference

Complete List Example

Complete HTML Table Example

Lists और Tables में Difference

List

Table

Part 3 में Covered Tags

List Elements

Table Elements

Data-related Elements

Important Table Attributes

Quick Revision

Conclusion

Discover more from Thebachchantop

1. `<ul>` Tag – Unordered List

2. `<ol>` Tag – Ordered List

3. `<li>` Tag – List Item

4. `<dl>` Tag – Description List

5. `<dt>` Tag – Description Term

6. `<dd>` Tag – Description Details

7. `<table>` Tag

8. `<caption>` Tag

9. `<tr>` Tag – Table Row

10. `<th>` Tag – Table Header Cell

11. `<td>` Tag – Table Data Cell

12. `<thead>` Tag

13. `<tbody>` Tag

14. `<tfoot>` Tag

15. `<colgroup>` Tag

16. `<col>` Tag

17. `rowspan` Attribute

18. `colspan` Attribute

19. `<data>` Tag

20. `<time>` Tag

21. `<data>` और `<time>` में Difference