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 bullet as default prefix to indicate a list’s item, while ordered list uses ordinal numbers.

Unordered Lists

Items in this list type are wrapped by ul tag and follow with 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 attribute type of ul tag.

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

Ordered List

Ordered list is created using ol tag as parent and li tag as an item in list. They are default to be followed by number. We can use 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 following formats

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

Definition List

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

A definition list is formed with the DL tag as 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>