HTML Basics: What are sorted and unsorted lists? • What is the difference between the HTM tags UL and OL?

Create an unordered or ordered list using UL or OL

HTML has three different types of lists.

  1. Unordered list aka enumeration

    • An unordered list also known as enumerated 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.

Advertisement

Create a simple unordered list with <ul> and <li>

Example
<ul>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ul>
Output of the HTML code
  • Contao CMS
  • Joomla CMS
  • Typo3 CMS
  • WordPress CMS

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.

Advertisement

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.

Example
<ol>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ol>
Output of the HTML code
  1. Contao CMS
  2. Joomla CMS
  3. Typo3 CMS
  4. WordPress CMS

Create a nested list

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>

After the Text Content Management Systems of the third list entry, the opening <li> tag remains unclosed. Then the entire inner list (shown in green) is inserted. Finally, the third list item is closed with the </li> tag.

Output of the HTML code
  1. Create Website
  2. Web Design
  3. Content Management Systems
    • Contao CMS
    • Joomla CMS
    • Typo3 CMS
    • WordPress CMS
  4. Website Themes
Advertisement