Lists

Tomasz Bogusz

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.

Types of Lists

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

  • ul - an unordered list,

  • ol - an ordered list, and

  • dl - a description list.

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.