HTML में list information या data की listing करने के लिए किया जाता है। list हमें किसी भी data को show करने का efficient way provide कराती है।


HTML में list 3 तरह की होती है।

  1. Ordered List
  2. Unordered List
  3. Description List

HTML Ordered List

Ordered List मतलब जहाँ पर हमें data listing के साथ increasing order में numbers भी show करने हो।  इसलिए इसे Numbered list भी कहते हैं।

Ordered List के लिए हम <ol></ol> tags का use करते हैं। और data listing के लिए <li></li> tags का use करते हैं।

HTML Ordered List Example

File : html_ordered_list.html

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Ordered List Example</title>
	</head>
	<body>
		<ol>
			<li>PHP</li>
			<li>Laravel</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>HTML</li>
		</ol> 
	</body>
</html> 
Output
  1. PHP
  2. Laravel
  3. JavaScript
  4. JQuery
  5. HTML

Example में आप देख सकते हैं कि जो भी listing हुई है उनके sequence number के साथ हुई है।

HTML Unordered List

Unordered list  में सभी data list number न होकर bullets के साथ दिखते हैं। इसलिए इसे Bullet list भी कहते हैं। Unordered List के लिए हम <ul></ul> tags का use करते हैं। और data listing के लिए <li></li> tags का use करते हैं।

HTML Unordered List Example

File : html_unordered_list.html

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Unordered List Example</title>
	</head>
	<body>
		<ul>
			<li>PHP</li>
			<li>Laravel</li>
			<li>JavaScript</li>
			<li>JQuery</li>
			<li>HTML</li>
		</ul> 
	</body>
</html> 
Output
  • PHP
  • Laravel
  • JavaScript
  • JQuery
  • HTML

HTML Description List

HTML Description List भी हम listing के लिए कर सकते हैं , Description List को Definition List भी कहते हैं। इसका structure कुछ directory जैसा होता है।


Description List हम तब use करते हैं जब किसी term के बारे में छोटी - छोटी definition show कराना करना चाहते हो। इसके 3 main tags होते हैं।

  1. <dl> - जो define करता है कि definition list start हो रही है।
  2. <dt> - यह data term define करता है , जिसके बारे में हमें definition define करनी है।
  3. <dd> - या data definition definition define करता है।

HTML Description List Example

File : html_description_list.html

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Description List Example</title>
	</head>
	<body>
		<dl>
			<dt>PHP</dt>
			<dd> - A open sources, object oriented, cross platform , server side, scripting language.</dd>
			<dt>JavaScript</dt>
			<dd> - A open sources, object oriented, cross platform , client side, scripting language</dd>
			<dt>jQuery</dt>
			<dd> - A JavaScript Library</dd>
			<dt>HTML</dt>
			<dd> - Hyper Text Markup Language.</dd>
		</dl>
	</body>
</html> 
Output
PHP
- A open sources, object oriented, cross platform , server side, scripting language.
JavaScript
- A open sources, object oriented, cross platform , client side, scripting language
jQuery
- A JavaScript Library
HTML
- Hyper Text Markup Language.

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook