HTML - lists

Here you learn how to code lists.

You can create different kinds of lists with HTML. The two most common kinds are ordered lists and unordered lists.

Unordered List

An unordered list is a list of items that are marked with bullets. An unordered list starts with the <ul> tag and each item in the list starts with the <li> tag. I am showing 3 different sets of lists in the example below. The first example is unformatted. The second and third examples have the bullets formatted to be different shapes. The unordered list is the most popular list used.


	<html> <head> <title>HTML tutorial</title> </head> <body> <br> <br> This is an unordered list. <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> This is an unordered list with circle bullets. <ul type="circle"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> This is an unordered list with square bullets. <ul type="square"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> <br> </body> </html>


	This is an unordered list. First item Second item Third item This is an unordered list with circle bullets. First item Second item Third item This is an unordered list with square bullets. First item Second item Third item

Ordered List

An ordered list is a list of items that are numbered in order. An ordered list starts with the <ol> tag and each item in the list starts with the <li> tag. I showed the following examples with different kinds of formatting.


	<html> <head> <title>HTML tutorial</title> </head> <body> <br> This is an ordered list with no formatting (it defaults to numbers). <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> This is an ordered list with upper case letters. <ol type="A"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> This is an ordered list with lower case letters. <ol type="a"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> This is an ordered list with upper case Roman numeral. <ol type="I"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> This is an ordered list with lower case Roman numeral. <ol type="i"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <br> </body> </html>


	This is an ordered list with no formatting (it defaults to numbers). First item Second item Third item This is an ordered list with upper case letters. First item Second item Third item This is an ordered list with lower case letters. First item Second item Third item This is an ordered list with upper case Roman numerals. First item Second item Third item This is an ordered list with lower case Roman numerals. First item Second item Third item

Nested List

A nested list is a list within a list.


	<html> <head> <title>HTML tutorial</title> </head> <body> <br> <ul> <li>Britain</li> <li>America <ul> <li>Illinois</li> <li>California <ul> <li>Los Angeles</li> <li>San Diego</li> </ul> </li> </ul> </li> <li>Mexico</li> </ul> <br> </body> </html>