HTML Lists

Last Updated Jul 21, 2015, 12:00:06 PM

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets

<ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> </ul>
Watch GIF Try It Now

In an unordered list, each list item is marked in the same way.

CSS has three types of markers such as disc, circle, square, and here is how your browser displays them:

• Disc
• Circle
• Square

Alternatively, you can specify the URL of an image.

HTML Unordered List with Disc Style(Bad Practice)

<ul style="list-style-type:disc"> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Try It Now

HTML Unordered List with Disc Style(Good Practice)

It is the developers best practice to write or keep the CSS styles in between the style tag instead of writing inside the HTML tags

<style type="text/css"> ul { list-style-type:disc; } </style> <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Watch GIF Try It Now

HTML Unordered List with Circle Style(Bad Practice)

<ul style="list-style-type:circle"> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Try It Now

HTML Unordered List with Circle Style(Good Practice)

It is the developers best practice to write or keep the CSS styles in between the style tag instead of writing inside the HTML tags

<style type="text/css"> ul { list-style-type:circle; } </style> <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Watch GIF Try It Now

HTML Unordered List with Square Style(Bad Practice)

<ul style="list-style-type:square"> <li> Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Try It Now

HTML Unordered List with Circle Style(Good Practice)

It is the developers best practice to write or keep the CSS styles in between the style tag instead of writing inside the HTML tags

<style type="text/css"> ul { list-style-type:square; } </style> <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Watch GIF Try It Now

Ordered lists

In an ordered list, each list item is marked differently to show its position in the sequence.

Ordered lists are defined using the <ol> tag. Use the list-style property to specify the type of marker:

• decimal
• lower-roman
• upper-roman
• lower-latin
• upper-latin

Example <ol> <li>Google</li> <li>Wikipedia</li> <li>Facebook</li> <li>Twitter</li> </ol>
Watch GIF Try It Now

We can specify the html ordered lists in five different ways

Type	Description	Usage	Video	Example
type="1"	Numbers	list items will be numbered with numbers (default)	Watch GIF	Try It Now
type="A"	UpperCase	list items will be numbered with uppercase letters	Watch GIF	Try It Now
type="a"	LowerCase	list items will be numbered with lowercase letters	Watch GIF	Try It Now
type="I"	UpperRoman	list items will be numbered with uppercase roman numbers	Watch GIF	Try It Now
type="i"	LowerRoman	list items will be numbered with lowercase roman numbers	Watch GIF	Try It Now

Browser Support

Property
lists	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Practice with Our Interactive Live Code Editor and Take your HTML Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 21, 2015, 12:00:06 PM