HTML Lists

Use the <ul> tag to create an unordered list. This type of list is great when the order of items is of no importance — for example, in shopping lists. Browsers usually mark the items in this type of list with bullet points. To list items, you use <li> tags inside the <ul> element.

Create ordered lists using the <ol> tag. Items of ordered lists are numbered, and this type of list is the best option when the order of items is important — for example, in step-by-step instructions. Just like in unordered lists, you need to use <li> tags in ordered lists to define list items. The numbering of items in an ordered list starts with 1 by default.^[1]

The <li> tag is used to introduce items of ordered and unordered lists. It's a container tag nested in the <ol> and <ul> tags, respectively, and it hosts one item of the list. This item can be any type of information: text, images, links, line breaks, and even other lists!

Definition lists, also known as description lists, are introduced with the <dl> tag. Use this type of list when you need to present terms along with their... definitions, yes. A classic use case for a definition list is a glossary.

The definition list element <dl> hosts two types of items:

• Terms, introduced with the <dt> tag

• Descriptions, introduced with the <dd> tag^[2]

Browsers usually render definition lists by placing the terms and definitions in separate lines, with definitions slightly indented.

A list's items can contain any type of content — text, images, multimedia. They can also contain lists — that's right, Inception-style sublists inside of lists! This type of list is described as being "nested."

The trick to marking nested lists correctly is to recognize that the sublist is actually a child of a list item and not a list. Start by creating a list with <ul> or <ol> tag, add items with <li> tags, then start another list inside one of the items. Now, you're good to go!

As we mentioned, browsers use round bullet points for unordered lists by default. However, you can set a custom bullet type using the CSS list-style-type property. Either add "list-style-type:square;" to the <ul> element through the style attribute, or create a CSS rule for inside the <style> tag: ul {list-style-type: square;}.

There are various ways to put items in an order. You can use Arabic numerals (1,2,3) for trivial things, Roman numbers (I, II, III) on classier occasions, or letters (A, B, C) when talking about backup plans. HTML gives you the option to set the list item marker with the type attribute.

Available values are:

• "1" for Arabic numerals (default)

• "I" for uppercase Roman numbers

• "i" for lowercase Roman numbers

• "A" for uppercase letters

• "a" for lowercase letters

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.

The numbering of items in an ordered list typically starts with 1, but you can change this by adding the start attribute to the <ol> tag and setting its value to the number you want your list to start with. For example, writing <ol start="10"> will make your numbered list begin with the number 10.

Always use an Arabic numeral (1, 2, 3, etc.) for the start value, even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "IV," use start="4".

Let's say you want to rate all Tom Hanks movies from worst to best (for whatever reason). It makes sense to start your list with the highest number and save number 1 for last, right? The good news is that HTML has got you covered!

Add the reversed attribute to the <ol> tag to reverse the numbering for the list items, and voilà — every Tom Hanks movie, ranked worst to best, is ready!

Use the <li> tag to list items of ordered and unordered lists. Depending on the type of list, browsers display the items with different markers. Bullet points are the default marker for unordered lists, while ordered lists are usually numbered in ascending order. You can change the type of markers by adding attributes to the <ul> and <ol> tag.

The <ol> tag is used to introduce an ordered list of items — typically a numbered list. However, you can set the numbering type to letters on Roman numerals with the type attribute. Other attributes that this element can take includes start (that defines the first item of the order) and reversed (an attribute without value that reverses the order of items).

Browsers mark unordered lists with bullets by default. However, you can change the marker style by adding the CSS list-style-type property to squares, hollow circles, or, any symbol that browsers can display. Read more about available symbols and their values on MDN Web Docs.^[3]

You can set custom numbering of your ordered list with the type attribute of the <ol> tag. Available values include A for uppercase letters, a for lowercase letters, i for lowercase Roman numerals, I for uppercase Roman numerals, and 1 for numbers (which is the default).