Different Types of Lists in HTML

We use lists as a preferred way to show items one after the other. Besides lists in an article’s body, they are also used in navigation menu items a lot.

The most commonly used list types are:

• unordered lists
• ordered lists
• definition lists

Unordered lists use a bullet as the default prefix to indicate a list’s item, while ordered list uses ordinal numbers.

Unordered Lists

Items in this list type are wrapped by a ul tag and followed by li before each item.

<ul>
	<li>Flutter</li>
	<li>Java</li>
	<li>Kotlin</li>
	<li>Swift</li>
	<li>JavaScript</li>
	<li>jQuery</li>
	<li>NodeJS</li>
</ul>

Bullets can be placed using the attribute type of the ul tag.

<ul type="disc | circle | square">

Ordered List

An ordered list is created using an ol tag as the parent and li tags as an item in the list. They are defaulted to be followed by the number. We can use the type attribute to change it to other formats like alphabets.

<ol>
	<li>PHP</li>
	<li>Laravel</li>
	<li>Drupal</li>
	<li>WordPress</li>
	<li>Joomla</li>
	<li>CakePHP</li>
	<li>CodeIgniter</li>
</ol>

The number can be changed to the following formats

<ol type="A | a | I | i | 1">

Definition List

It is usually used to create glossaries. It has a more complex structure than the two types of lists above.

A definition list is formed with the DL tag as a parent and at least one element pair DT and DD per item.

<dl>
	<dt>Framework</dt>
	<dd>Definition of framework</dd>
	<dt>IDE</dt>
	<dd>Definition of IDE</dd>
</dl>