Wednesday, October 27, 2021



HTML lists

HTML lists
October 12
09:49 2021

Hey everyone!


Hope you had a good week.

In this article, we are going to continue on HTML lists.

According to the Oxford Advanced Learner Dictionary, a list is a series of names, items, figures, etc. Lists in HTML are used to present information in a semantic way.


The types of lists that can be used in HTML are :

  • ul : An unordered list. This will list items using plain
  • ol : An ordered list. This will use different schemes of numbers to list your
  • dl : A definition list. This arranges your items in the same way as they are arranged in a

The type of list is defined with a list tag, while the items in the list are defined with a list item tag.

A.             UNORDERED LIST:


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

For example:

<h4> Jola’s Colour List </h4>



<li> Red </li>

<li> Purple </li>






B.             ORDERED LISTS

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.


For example:

<h4> Jola’s Colour List </h4>


<li> King of Boys </li>

<li> The Wedding Party </li>

<li> Sugar Rush </li>



The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

For example:

<h4> Jola’s Breakfast List </h4>


<!– This is the definition term–>

<dt> Cereal </dt>

<!–This is the description–>

<dd> A a breakfast food made from roasted grain, typically eaten with milk.</dd>

<dt>Tea </dt>

<dd> A hot drink made by infusing the dried crushed leaves of the tea plant in boiling water.</dd>


D.             NESTED LISTS

These are lists that contain more than one list eg a combination of ordered and unordered lists. For example:

<h4> Jola’s Baking List </h4>

<!– This is a nested list–>

<!–It first begins as an unordered list–>


<li> Cake


<!–It then continues as an unordered list, describing what is above–>



<li>Baking powder</li>



<li> Chin chin </li>


Below is a summarized code of what we have done in this article:

That’s all for lists! Thank you for reading.

Please stay tuned to learn more about HTML tables.


No Comments Yet!

There are no comments at the moment, do you want to add one?

Write a comment

Write a Comment