Articles → HTML → Lists In HTML

Lists In HTML






What Is A List?




Picture showing the list in the real world

Click to Enlarge


Types Of Lists




  1. Ordered list
  2. Unordered list
  3. Description list

Ordered List





Syntax


<ol>
	<li>item1</li>
	<li>item 2</li>
</ol>



Example




  1. Gather requirements
  2. Check feasibility
  3. Requirements sign off
  4. Design system
  5. Development
  6. Testing
  7. Delivery


<html>
	<head>
		<title>List Demo</title>
	</head>
	<body>
		<ol>
			<li>Gather requirements</li>
			<li>Check feasibility</li>
			<li>Requirements sign off</li>
			<li>Design system</li>
			<li>Development</li>
			<li>Testing</li>
		</ol>
	</body>
</html>




Picture showing the output of the ordered list

Click to Enlarge




Type Attribute




List item marker typeDescription
Type = ‘1’List will start with numbers. First list item marker would be 1 followed by 2, 3 and so on.
Type = ‘a’List will start with lower case alphabet. First list item marker would be a followed by b, c and so on.
Type = ‘A’List will start with upper case alphabet. First list item marker would be A followed by B, C and so on.
Type = ‘i’List will start with lower case roman number. First list item marker would be i followed by ii, iii and so on.
Type = ‘I’List will start with upper case roman number. First list item marker would be I followed by II, III and so on.




<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		</head>
		<body>
			<ol Type="1">
				<li>Gather requirements </li>
				<li>Check feasibility </li>
				<li>Requirements sign off </li>
				<li>Design system </li>
				<li>Development </li>
				<li>Testing </li>
			</ol>
			<ol Type="a">
				<li>Gather requirements </li>
				<li>Check feasibility </li>
				<li>Requirements sign off </li>
				<li>Design system </li>
				<li>Development </li>
				<li>Testing </li>
			</ol>
			<ol Type="A">
				<li>Gather requirements </li>
				<li>Check feasibility </li>
				<li>Requirements sign off </li>
				<li>Design system </li>
				<li>Development </li>
				<li>Testing </li>
			</ol>
			<ol Type="i">
				<li>Gather requirements </li>
				<li>Check feasibility </li>
				<li>Requirements sign off </li>
				<li>Design system </li>
				<li>Development </li>
				<li>Testing </li>
			</ol>
			<ol Type="I">
				<li>Gather requirements </li>
				<li>Check feasibility </li>
				<li>Requirements sign off </li>
				<li>Design system </li>
				<li>Development </li>
				<li>Testing </li>
			</ol>
		</body>
	</html>




Picture showing the output of the ordered list with type attribute

Click to Enlarge


Unordered List





Example




<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
      <ul>
         <li>Milk</li>
         <li>Sugar</li>
         <li>Coffee</li>
      </ul>
   </body>
</html>




Picture showing the output of the unordered list

Click to Enlarge


List-Style-Type Property




  1. Disc – Specifies the list item marker in bullet shape.
  2. Circle - Specifies the list item marker in circle shape.
  3. Square - Specifies the list item marker in square shape.
  4. None – No marking for list item.

Example




<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
      <ul style="list-style-type:disc">
         <li>Milk</li>
         <li>Sugar</li>
         <li>Coffee</li>
      </ul>
      <ul style="list-style-type:circle">
         <li>Milk</li>
         <li>Sugar</li>
         <li>Coffee</li>
      </ul>
      <ul style="list-style-type:square">
         <li>Milk</li>
         <li>Sugar</li>
         <li>Coffee</li>
      </ul>
      <ul style="list-style-type:none">
         <li>Milk</li>
         <li>Sugar</li>
         <li>Coffee</li>
      </ul>
   </body>
</html>




Picture showing the output of the unordered list with List-style-type attribute

Click to Enlarge


HTML Description List





Example




<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
      <dl>
         <dt>Yello Pulse</dt>
         <dd>
            Fresh yellow pulse boiled and added spices for taste
         </dd>
         <dt>Pizza </dt>
         <dd>
            Freshly baked base with fresh vegatables.
         </dd>
      </dl>
   </body>
</html>




  1. dl – Description List
  2. dt – Description Term
  3. dd – description


Picture showing the output of the HTML description list

Click to Enlarge


Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Monday, October 31, 2016
 
Updated On  -  Thursday, November 2, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250