HTML Basics: List Lovers Unite – A Deep Dive into the Essentials of Unordered and Ordered Lists

Create an Uordered or Ordered List Using UL or OL

HTML has three different types of lists.

1. Unordered List aka Bullet List

   • An unordered list also known as bulleted list is defined with the HTML UL tag

   • The definition of the unordered list starts with <ul> and has to be closed with </ul>.

   • The list items are defined with the HTML LI tag. Each element of the list is started with <li> and should always be closed with </li>.

   • By default, each element of the list is displayed with a leading bullet point ●.

   
   

2. Ordered List aka Numbered List

   • An ordered list is generated using the HTML OL tag.

   • The ordered list (numbered list) starts with <ol> and has to be closed with the end tag </ol>.

   • The list items of the numbered list start with the <li> tag, just as they do in the enumeration, and have to be closed with </li>.

   • In the ordered list, the elements of the list are automatically preceded by consecutive numbers or letters.

   
   

3. Description List aka Definition List

   • A description list (formerly known as definition list) is generated with the DL tag.

   • Since this list type is rarely used in practice, it is not considered here.

   
   

The terms unordered list and ordered list are somewhat misleading, because in these two list types, the list items are always specified in sorted order. The entries in an ordered list are not automatically sorted, but numbered.

An unordered list doesn't mean that the list items are out of order. It simply means that the list items are not numbered.

Create a Simple Unordered List with <ul> and <li>

<ul>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ul>

The elements of the UL list are positioned one below the other by default because the LI element is a block element. However, CSS can be used to convert the vertical list into a horizontal list.

Create a Simple Ordered List with <ol> and <li>

The ordered list (OL list) is created in the same way as the unordered one. All you have to do is replace <ul> and </ul> with <ol> and </ol>. The ordered list uses LI for each item in the list to create a numbered list.

<ol>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ol>

Create Nested Lists

Lists can be nested in each other. This means that another list can be inserted within a list.

Between <li> and </li> of a parent list a child list (subordinate list) can be inserted. The lists may be of different list types.

For example, an unordered list can be inserted into an ordered list as a sublist.

<ol>
    <li>Create Website</li>
    <li>Web Design</li>
    <li>Content Management Systems
        <ul>
            <li>Contao CMS</li>
            <li>Joomla CMS</li>
            <li>Typo3 CMS</li>
            <li>WordPress CMS</li>
        </ul>
    </li>
    <li>Website Themes</li>
</ol>