Lists in HTML5

The HTML elements that allow you to build all kinds of lists

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

# dd

Defines an item in a definition list.

Example: Copy

Web
The part of the Internet that contains websites and web pages
HTML
A markup language for creating web pages
CSS
A technology to make HTML look better
<dl> <dt>Web</dt> <dd>The part of the Internet that contains websites and web pages</dd> <dt>HTML</dt> <dd>A markup language for creating web pages</dd> <dt>CSS</dt> <dd>A technology to make HTML look better</dd> </dl>

# dl

Defines a definition list.

Example: Copy

Web
The part of the Internet that contains websites and web pages
HTML
A markup language for creating web pages
CSS
A technology to make HTML look better
<dl> <dt>Web</dt> <dd>The part of the Internet that contains websites and web pages</dd> <dt>HTML</dt> <dd>A markup language for creating web pages</dd> <dt>CSS</dt> <dd>A technology to make HTML look better</dd> </dl>

# dt

Defines a definition term.

Example: Copy

Web
The part of the Internet that contains websites and web pages
HTML
A markup language for creating web pages
CSS
A technology to make HTML look better
<dl> <dt>Web</dt> <dd>The part of the Internet that contains websites and web pages</dd> <dt>HTML</dt> <dd>A markup language for creating web pages</dd> <dt>CSS</dt> <dd>A technology to make HTML look better</dd> </dl>

# li

Defines a list item within an ordered list <ol> or unordered list <ul>.

Example: Copy

  1. Step one
  2. Step two
  3. ????
  4. PROFIT!!!
<ol> <li>Step one</li> <li>Step two</li> <li>????</li> <li>PROFIT!!!</li> </ol>

Example: Copy

My shopping list:

  • Milk
  • Bread
  • Chocolate
  • More chocolate
<p>My shopping list:</p> <ul> <li>Milk</li> <li>Bread</li> <li>Chocolate</li> <li>More chocolate</li> </ul>

# ol

Defines an ordered list.

Example: Copy

  1. Step one
  2. Step two
  3. ????
  4. PROFIT!!!
<ol> <li>Step one</li> <li>Step two</li> <li>????</li> <li>PROFIT!!!</li> </ol>

type

Defines how the list is numbered.

"1"

Default.

Uses numbers.

"a"

Uses lowercase letters.

"A"

Uses uppercase letters.

"i"

Uses lowercase Roman numerals.

"I"

Uses uppercase Roman numerals.

start

Defines a number to start the list with.

"3"

You can use any integer.

reversed

Reverses the order of the list.

No value required.

# ul

Defines an unordered list.

Example: Copy

My shopping list:

  • Milk
  • Bread
  • Chocolate
  • More chocolate
<p>My shopping list:</p> <ul> <li>Milk</li> <li>Bread</li> <li>Chocolate</li> <li>More chocolate</li> </ul>