HTML & CSS References

HTML Lists

An HTML List tag is used to represent content in a list format, the most popular being either a bulleted or numbered list.

HTML Unordered Lists

A bulleted list is referred to as an “unordered list” and is represented by using the <ul> tag. A <ul> tag is a parent tag where nested within are <li> tags, representing the list items. By default, the list items will be marked with bullets (small black circles), but with the power of CSS, we can modify the list marker. It will appear on your page looking something like this:

List item
List item
List item

Example Unordered List

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

HTML Ordered Lists

A numbered list is referred to as an “ordered list” and is represented by using the <ol> tag. An <ol> tag is a parent tag where nested within are <li> tags, representing the list items. By default, the list items will be marked with numbers, but with the power of CSS, we can modify the list marker. It will appear on your page looking something like this:

List Item 1
List Item 2
List Item 3

Code Example

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

HTML Description List

A description list is represented by using the <dl> tag. A description list has a slightly different structure than its other list counterparts. The <dl> tag is used as a parent tag, but rather than use <li> tags as the children, we use groups of <dt> and <dd> tags. These represent a “description term” and “description definition”. It will appear on your page looking something like this:

Description Term 1

Description Definition 1

Description Term 2

Description Definition 2

Code Example

<dl>
	<dt>Description Term 1</dt>
	<dd>Description Definition 1</dd>
	
	<dt>Description Term 2</dt>
	<dd>Description Definition 2</dd>
</dl>

HTML Nested Lists

List can also be nested, and different list types can be combined and used together. For example, the following is a recipe for blueberry muffins. The whole recipe is a definition list, the ingredients definition description is an unordered list, and the directions definition description is an ordered list.

Ingredients:

1 cup flour
½ cup sugar
1 egg
½ cup milk
1 cup blueberries

Directions:

Mix flour and sugar together
In a separate bowl, mix together milk and egg
Combine wet and dry ingredients together
Mix in blueberries
Bake at 350 degrees Fahrenheit for 17 minutes

Notes:

For Lemon Blueberry Muffins, add 1 tbsp lemon zest

Example Nested Lists

<dl>
	<dt>Ingredients:</dt>
	  <dd>
	    <ul>
	      <li>1 cup flour</li>
	      <li>1/2 cup sugar</li>
	      <li>1 egg</li>
	      <li>1/2 cup milk</li>
	      <li>1 cup blueberries</li>
	    </ul>
	  </dd>
	
	<dt>Directions:</dt>
	  <dd>
	    <ol>
	      <li>Mix flour and sugar together</li>
	      <li>In a separate bowl, mix together milk and egg</li>
	      <li>Combine wet and dry ingredients together</li>
	      <li>Mix in blueberries</li>
	      <li>Bake at 350 degrees Fahrenheit for 17 minutes</li>
	    </ol>
	  </dd>
	
	<dt>Notes:</dt>
	<dd>For Lemon Blueberry Muffins, add 1 tbsp lemon zest</dd>
</dl>

Learn HTML & CSS Today

Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform – no downloads or complicated setup required.

Free and fun
Designed for beginners
No download or setup required

Get Started