HTML TutorialLesson #21

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

HTML lists allow web developers to group a set of related items in lists.


Example

An unordered HTML list:

  • Item
  • Item
  • Item
  • Item

An ordered HTML list:

  • First item
  • Second item
  • Third item
  • Fourth item

Unordered HTML List

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

The list items will be marked with bullets (small black circles) by default:

Example

Example Code

html
Try it Yourself
Live Output Preview:

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

Example Code

html
Try it Yourself
Live Output Preview:

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

Example Code

html
Try it Yourself
<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

HTML List Tags

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.


Video: HTML Lists


Interactive Code Examples

HTML Example 2

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 3

html
Try it Yourself
Interactive runnable HTML example from EA Academy.
Live Output Preview:

HTML Example 4

html
Try it Yourself
HTML tag syntax and structure demonstration.
<dl>

 
<dt>Coffee</dt>

 
<dd>- black hot drink</dd>

 
<dt>Milk</dt>

 
<dd>- white cold drink</dd>

</dl>