---

There are many reasons you might want to add a list to your pages, from putting your five favorite albums on your homepage to including a numbered set of instructions for visitors to follow:

You can create four types of lists in HTML:

---

Unordered lists: which are like lists of bullet points.

Ordered lists: which use a sequence of numbers or letters instead of bullet points.

Definition lists: which allow you to specify a term and its definition.

Nested Lists: which allow you to specify a lists inside lists.

---

Unordered lists

<ul> Element to Create Unordered Lists

<ul> element: which stands for unordered list.

<li> element: the li stands for list item.

<ul>
<li> Bullet point number one </li>
<li> Bullet point number two </li>
<li> Bullet point number three </li>
</ul> 

Live Preview

Example - Disc

<h3>List of Language:</h3>

<ul style="list-style-type:disc">
  <li>HTML</li>
  <li>C Programming</li>
  <li>Java Programming</li>
</ul>

Live Preview

Example - Circle

<h3>List of Books:</h3>

<ul style="list-style-type:circle">
  <li>Solution of Life</li>
  <li>Mother</li>
  <li>Education life and achievemens</li>
</ul>

Live Preview

Example - Square

<h3>List of Reason to live life:</h3>

<ul style="list-style-type:square">
  <li>smile</li>
  <li>help</li>
  <li>love</li>
  <li>sacrifice</li>
  <li>forgiveness</li>
</ul>

Live Preview

Example - None

<h3>Steps to Change Your Life</h3>

<ul style="list-style-type:none">
  <li>Define success</li>
  <li>Visualize that success</li>
  <li>Forget entitlement</li>
  <li>Think small to think big</li>
  <li>Consistency is key</li>
  <li>Prioritize</li>
  <li>Delegate</li>
  <li>Find collaborators</li>
  <li>Stay motivated</li>
  <li>Take stock and try again tomorrow</li>
</ul>

Live Preview

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Ordered lists

Sometimes, you want your lists to be ordered. In an ordered list, rather than prefixing each point with a bullet point, you can use either numbers (1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix the list item. An ordered list is contained inside the <ol> element. Each item in the list should then be nested inside the <ol> element and contained between opening <li> and closing </li> tags

Example - None

<ol>
	<li> Point number one </li>
	<li> Point number two </li>
	<li> Point number three </li>
</ol>

Live Preview

Type	Description	Example
type="1"	The list items will be numbered with numbers (default)	1, 2, 3, 4, 5
type="A"	The list items will be numbered with uppercase letters	A, B, C, D, E
type="a"	The list items will be numbered with lowercase letters	a, b, c, d, e
type="I"	The list items will be numbered with uppercase roman numbers	I, II, III, IV, V
type="i"	The list items will be numbered with lowercase roman numbers	i, ii, iii, iv, v

Example - Numbers:

<h4>List of Bad habits:</h4>

<ol type="1">
	<li>Swearing</li>
	<li>Trichotillomania</li>
	<li>Picking Your Nose</li>
	<li>Smoking Cigarettes</li>
	<li>Biting Fingernails</li>
	<li>Drinking Coffee</li>
	<li>Drinking Tea</li>
	<li>Hair picking</li>
	<li>Watching Reality Television</li>
	<li>Eating Fast Food</li>
</ol>

Live Preview

Example - Uppercase Letters:

<h4>List of Bad habits:</h4>

<ol type="A">
	<li>Alcohol (if you think you may be an alcoholic, please get professional help)</li>
	<li>Emotional Shopping</li>
	<li>Spending On Credit Cards</li>
	<li>Facebook</li>
	<li>Twitter</li>
	<li>Reddit</li>
	<li>Eating Candy</li>
	<li>Eating White Sugar</li>
	<li>Eating Chocolate</li>
	<li>Drinking Soda/Pop</li>
</ol>

Live Preview

Example - Lowercase Letters:

<h4>List of Bad habits:</h4>
<ol type="a">
	<li>Obsessively Checking iPhone/iPad</li>
	<li>Eating Meat</li>
	<li>Video Games</li>
	<li>Cracking Your Knuckles</li>
	<li>Speaking With Your Mouth Full</li>
	<li>Talking To Yourself</li>
	<li>Using Slang</li>
	<li>Eating Dairy</li>
	<li>Eating Gluten</li>
	<li>Picking Your Teeth In Public</li>
</ol>

Live Preview

Example - Uppercase Roman Numbers:

<h4>List of Bad habits:</h4>

<ol type="I">
	<li>Forgetting To Shave</li>
	<li>Going To The Club</li>
	<li>Using Your Maiden Name</li>
	<li>Humming To Yourself</li>
	<li>Excessive Salt</li>
	<li>All Work And No Play</li>
	<li>Chewing Gum</li>
	<li>Smoking cigarettes</li>
	<li>Biting Your Pen</li>
	<li>Nibbling While Cooking</li>
</ol>

Live Preview

Example - Lowercase Roman Numbers:

<h4>List of Bad habits:</h4>

<ol type="i">
	<li>Overspending</li>
	<li>Overeating</li>
	<li>Snacking</li>
	<li>Hair Picking </li>
	<li>Skin Picking</li>
	<li>Not Holding Eye Contact</li>
	<li>Interrupting Someone</li>
	<li>Sleeping-in</li>
	<li>Skipping The Gym</li>
	<li>Smoking</li>
</ol>

Live Preview

Using the start Attribute to Change the Starting Number in Ordered Lists (Deprecated)

If you want to specify the number that a numbered list should start at, you can use the start attribute on the <ol> element. The value of this attribute should be the numeric representation of that point in the list, so a E in a list that is ordered with capital letters would be represented by the value 5

Example

<h4>List of Bad habits:</h4>

<ol type="A" start="5">
	<li>Saying &ldquo;Ummm&rdquo; And &ldquo;Ahhh&rdquo;</li>
	<li>Saying Lie</li>
	<li>Staying Up Late</li>
	<li>Sleeping With Makeup</li>
	<li>Lying</li>
	<li>Overmedicating</li>
	<li>Playing Kingdom Rush</li>
	<li>Eating Too Fast / Not Chewing</li>
	<li>Skipping Breakfast</li>
	<li>Not Protecting Yourself From The Sun</li>
</ol>

Live Preview

Definition Lists

The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl> element. The <dl> element then contains alternating <dt> and <dd> elements. The content of the <dt> element is the term you will be defining. The <dd> element contains the definition of the previous <dt> element. For example, here is a definition list that describes the different types of lists in HTML.

Example

<dl>
	<dt> Unordered List </dt>
		<dd> A list of bullet points. </dd>
	<dt> Ordered List </dt>
		<dd> An ordered list of points, such as a numbered set of steps. </dd>
	<dt> Definition List </dt>
		<dd> A list of terms and definitions. </dd>
</dl> 

Live Preview

Nesting Lists

List can be nested (lists inside lists):

Example

<ol type="A">
 <li> Item one </li>
 <li> Item two </li>
 <li> Item three </li>
 <li> Item four
	<ol type="a">
		<li> Item 4.1 </li>
		<li> Item 4.2 </li>
		<li> Item 4.3 </li>
	</ol>
 </li>
 <li> Item Five </li>
 </ol> 

Live Preview

Note: List items can contain new list, and other HTML elements, like images and links, etc.

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul> 

Live Preview

---