HTML Lists




HTML Lists

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

Lists in HTML can be used to create an ordered or unordered grouping of list items, such as a grocery list or your top five favorite movies.

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


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)


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


Watch GIF Try It Now

HTML Unordered List with Circle Style(Bad Practice)


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


Watch GIF Try It Now

HTML Unordered List with Square Style(Bad Practice)


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


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
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