Lists in HTML

What Are Lists in HTML?

Generally, in HTML5 there are three types of list elements:

  • ul - an unordered list,

  • ol - an ordered list, and

  • dl - a description list.

Semanticity of Lists

Using lists for denoting sets of semantically connected items, as opposed to using other HTML elements for that purpose, is the correct approach from the HTML semanticity perspective.

Unordered List

An unordered list is a set of semantically connected items typically marked with bullets.

An unordered list is denoted by the ul element and each of its items by the li element.

<ul>
  <li>Roach</li>
  <li>Kelpie</li>
  <li>Bucephalus</li>
</ul>

Ordered List

An ordered list is a set of semantically connected items typically numbered sequentially.

An ordered list is denoted by the ol element and each of its items by the li element.

<ol>
  <li>Roach</li>
  <li>Kelpie</li>
  <li>Bucephalus</li>
</ol>

The following attributes allow for configuring an ordered list

  • start - indicates the first sequence number,

  • reversed - reverses the numbering sequence.

Description List

A description list is a set of semantically connected items comprised of terms with their descriptions. Items in a description list are typically marked with bullets.

A description list is denoted by the dl element. A term in a description list is denoted by the dt element and its description by the dd element.

<dl>
  <dt>Roach</dt>
  <dd>Geralt's horse</dd>
  <dt>Kelpie</dt>
  <dd>Ciri's horse</dd>
  <dt>Bucephalus</dt>
  <dd>Alexander's horse</dd>
</dl>

List Nesting

A list can be nested within a li element of another list.

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.