Sololearn blogHow To Create HTML Lists
time to read 5 min read

How To Create HTML Lists

Some things are truly inevitable. Like taxes, high tides, and your phone running out of battery in the middle of something important.  Lists are inevitable elements in modern web development. 

Web developers use it for navigation and general content.

Programmers use lists to arrange relevant pieces of information together to ensure they’re easy to read and understand. 

HTML allows us to create lists. Let’s get started!

Types Of List And Meaning of list tags in HTML

HTML has three types of lists, and list tags are used to identify them on the page. For example, an ordered list will have a <ol> list tag to define its functions to the HTML.

Ordered list <ol>

Another name for it is the numbered list. You can arrange items and information in a specific sequence using the ordered list.

You can use several formats, like alphabets and Roman numerals, to present your data in the ordered list. 

For the ordered list, we use these tags:

  • Ordered list tag <ol> 
  • List item tag <li>

Unordered list <ul>

Unlike the ordered list, your items or information won’t have numbers, alphabets, or Roman numerals that will show the sequence or ordinal numbers of the listed items. 

Another name for it is the bulleted list. 

You can use it for items that don’t require a particular sequence. Also, you can use a bulleted list, circle, square, and none format.

For the unordered list, we use these tags:

  • Unordered list tag <ul>
  • List item tag  <li>

Description list <dl>

Another name for it is the definition list. You can arrange your data in definition form using the description list. 

For the description list, we use three tags:

  • Description List tag <dl>
  • Data terms tag <dt>
  • Data definition tag  <dd>

Difference between Ordered List And Unordered List 

Although the ordered list and the unordered lists are used for making lists, there are differences. In the table below are some differences between them.


Factors		Ordered ListUnordered List
FunctionFor grouping items or information that occur in sequence, like an outline or a procedure to carry out a taskFor grouping items or information that don’t require a sequence.
Tags It uses the </ol> tag.It uses the </ul> tag.
Formats It can use various formats such as numbers, alphabets, and Roman numerals,  It uses formats such as a bullet list, disc, none, and square format.
Attributes It has attributes such as type, start, and reverse It uses only the type attribute.

How To create Ordered List 

To code, you add an opening tag <ol> at the beginning and a closing tag </o> at the end of the list, showing it is an ordered list. 

You also add the opening <li> and a closing </li> list tag to each list item on the list. For instance, if you wish to outline steps in preparing a dish. 

<ol>
  <li>Prepare your ingredients</li>
  <li>Put them in a bowl</li>
  <li>Stir properly</li>
</ol>

Results 

  1. Prepare your ingredients 
  2. Put them in a bowl
  3. Stir properly

Numbered list type is the default when you are using an ordered list. If you want to use other types, like Roman numerals or alphabets, you will have to specify. 

Keep reading! We will discuss how you can choose the type you wish to use.

The ordered list types include:

  • Numbered 
  • Roman numerals 
  • Alphabetically 

Number Ordered list

You can arrange your elements numerically by using this form. 

To generate the number ordered list, add type=”1″ to the opening tag <ol> of your ordered list. For instance: <ol type =”1”>

Though, It is the standard format for an ordered list. Which means, without adding a type, you can use it. For example:

<ol>
  <li>Enter your car</li>
  <li>Fasten your seat belts</li>
  <li>Start the car</li>
</ol>

Result

  1. Enter your car 
  2. Fasten your seatbelts
  3. Start the car 
<ol type="1">
  <li>Enter your car</li>
  <li>Fasten your seat belts</li>
  <li>Start the car</li>
</ol>

Result

  1. Enter your car 
  2. Fasten your seatbelts
  3. Start the car 

Roman numerals Ordered List

This ordered list allows you to arrange the elements in Roman numerals order. To begin, add type=”i” (for caps, add “I”) to your ordered list’s open tag.

<ol type="I">
  <li>Enter your car</li>
  <li>Fasten your seatbelts</li>
  <li>Start the car</li>
</ol>

The results would be similar to the one explained above, but with Roman numerals.

Alphabetically Ordered List

You can organize your contents alphabetically in the ordered list. To begin, add type=”a” (for caps, add “A”) to the open tag of your ordered list.

<ol type="A">
  <li>Enter your car</li>
  <li>Fasten your seat belts</li>
  <li>Start the car</li>
</ol>

Result

A. Enter your car 

B. Fasten your seatbelts

C. Start the car

Other Attributes Of The Ordered list

An ordered list’s attributes show how you can arrange your contents. The start attribute and the reverse attribute are the two other types.

Start attributes

This feature specifies where your list item should begin. Assuming you want your list to start from 10, instead of 1, or from G instead of A.

To begin, add start=”10″ or start=”G” to your open tag.

<ol type="A" start="D">
  <li>Stand</li>
  <li>Walk</li>
  <li>Run</li>
</ol>

Result

D. Stand

E. Walk 

F. Run

You can also apply this attribute to other types of ordered lists.

Reversed attributes

This attribute commands the browser to arrange your contents in descending order. To use, add reverse to your open tag.

<ol type="1" start="10" reverse>
  <li>Stand</li>
  <li>Walk</li>
  <li>Run</li>
</ol>

Result

     10. Stand

      9. Walk 

      8. Run

How to create an unordered list

To code, you add an opening tag <ul> at the beginning and a closing tag </ul> at the end of the list, showing it is an unordered list. 

Also, you will use the tag <li> just like in the ordered list. For example:

<ul>
  <li>Twitter</li>
  <li>Tik Tok</li>
  <li>Instagram</li>
</ul>

Result

  • Twitter
  • Tik Tok
  • Instagram

 A bulleted list is the default when you are using an unordered list.

There are four formats for an ordered list: 

  • Bulleted format 
  • Circle format 
  • Square format 
  • None

Bulleted Format

The bulleted format is the default of an unordered list. 

<ul>
  <li>Tables</li>
  <li>Ladder</li>
  <li>Chair</li>
</ul>

Result

  • Tables
  • Ladders
  • Chair

Circle format

The circle format allows you to use circles instead of a bulleted list. To create add type=”circle” to your open tag.

<ul type="Circle">
  <li>Tables</li>
  <li>Ladders</li>
  <li>Chair</li>
</ul>

Result

     o. Tables

     o. Ladders

     o. Chair

None 

There are no bullet points, circles, or squares in your list for the none format. Add type=”none” to your open tag to create it.

<ul type="None">
  <li>Tables</li>
  <li>Ladders</li>
  <li>Chair</li>
</ul>

Result

Tables

Ladders

Chair

How to create a description list

A description list in HTML is a list of terms and their corresponding descriptions. Now, let’s create a description list for Sololearn, Dancing, and Eating.

<dl>
  <dt>Sololearn</dt>
  <dd>The perfect platform to boost your technical skills.</dd>
  <dt>Dancing</dt>
  <dd>An activity to keep you happy, and exercise your muscles.</dd>
  <dt>Eating</dt>
  <dd>Can't do without it, unless you don't want to live.</dd>
</dl>

Result

Sololearn

The perfect platform to boost your technical skills.

Dancing

An activity to keep you happy, and exercise your muscles.

Eating

Can’t do without it, unless you don’t want to live.

Conclusion

To learn more about lists, you should check out sololearn’s lesson 13.1 on HTML lists. 

Do you want to master HTML promptly? Sololearn offers courses on HTML  that will help you master the programming language easily. CSS courses are also available, which is the next step after you have mastered HTML. Click on the link to begin. https://www.sololearn.com/home 

References

Related blogposts