HTML में List का उपयोग किसी जानकारी को Ordered या Unordered में दिखाने के लिए किया जाता है। List की मदद से डेटा को व्यवस्थित और पढ़ने में आसान बनाया जाता है।
HTML List के प्रकार
- Ordered List (
<ol>) - Unordered List (
<ul>) - Description List (
<dl>)
1. Ordered List (<ol>)
Ordered list का उपयोग item के क्रम को संख्या या अक्षरो में लाने के लिए किया जाता है |
Syntax :
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Output :
- HTML
- CSS
- JavaScript
उपयोग :
- Ordered list का उपयोग Step-by-step जानकारी दिखाने के लिए किया जाता है |
- Ordered list का उपयोग Ranking दिखाने के लिए किया जाता है |
- Ordered list का उपयोग क्रमबद्ध डेटा प्रस्तुत करने के लिए किया जाता है |
2. Unordered List (<ul>)
Unordered list का उपयोग item को Bullet Points (•) में दिखाने के लिए किया जाता है |
Syntax :
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Output :
- HTML
- CSS
- JavaScript
उपयोग :
- Unordered list का उपयोग सामान्य सूची बनाने के लिए किया जाता है |
- Unordered list का उपयोग Menu बनाने के लिए किया जाता है |
- Unordered list का उपयोग Features दिखाने के लिए किया जाता है |
3. Description List (<dl>)
Description List का उपयोग किसी word और उसके Description को दिखाने के लिए किया जाता है।
Tags :
| Tag | कार्य |
|---|---|
<dl> | Description List |
<dt> | Description Term |
<dd> | Description Description |
Syntax :
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>Output :
उपयोग :
- Description List का उपयोग Definitions दिखाने के लिए किया जाता है।
- Description List का उपयोग Glossary बनाने के लिए किया जाता है।
- Description List का उपयोग Terms और उनकी जानकारी देने के लिए किया जाता है।