HTML Lists

Suppose you are writing an article titled “Top 5 Ways to Beat the Heat This Summer”. The first impulse of readers will be to look for the 5 points that will deliver the information.

We often present information in the form of a listicle for ease of navigation and better visibility. I personally find it easier to go through information presented in the form of points than reading text-heavy paragraphs from where you have to extract important information.

How do we structure information so that it is visually appealing and easy to find and read? The HTML lists feature makes this possible.

HTML lists are a popular tool in web development. The basic HTML tag list allows developers to present information concisely.

Let us see in this tutorial how we can use the HTML lists feature to present information in the form of lists.

Types of Lists in HTML

There are three types of HTML program lists:

1. Unordered Lists: As the name suggests, the elements in this list do not follow a proper order.

Let us take, for example, a website listing name suggestions for boys starting with K. This does not require a proper order and can be represented using an unordered HTML list syntax.

2. Ordered Lists: Suppose we want to jot down something in the form of steps that need to be followed in order. For instance, let us assume that we want the name suggestions for boys starting with K in order of preference.

Here, we can use HTML ordered lists. The items mentioned in the form of lists will be numbered in an order by default.

3. Description Lists: In HTML, descriptive lists are used to create lists with terminologies and corresponding descriptions for each. An ideal use of this syntax would be for writing the “Glossary” section of your thesis.

The next section provides the HTML syntax list that you need to use for each of these.

Different Tags used in HTML Lists

HTML uses different tags to indicate the beginning and end of an HTML element in an HTML document. These tags help to specify how the content has to be displayed.

Have a look at this HTML notepad codes list.

<li>: This tag defines a list, but does not specify if the list is ordered or unordered.

<ol>: This tag defines an ordered list.

<ul>: This tag defines an unordered list.

<dl>: This tag defines a description list.

<dt>: This tag defines a term in the description list.

<dd>: This tag defines the description of a term in the description list.

Guide to Using HTML Lists

Using HTML lists is pretty simple. Let me provide a step-by-step guide for the same:

Step 1: Choose the HTML list menu you want to use. Based on the elements that you are willing to list, figure out whether you need to use an ordered, unordered, or definition list.

Step 2: Add the relevant tag. Use <ol> for ordered lists, <ul> for unordered lists, and <dl> for definition lists.

Step 3: Add the items. Enclose them within the <li> tag. The items will be represented as a separate entry in the list.

Once you get the outcome, you will be able to customize the appearance of your HTML code list with the help of CSS, i.e., you can change the indentation, numbering style, bullet points, and so on.

Creating Unordered HTML Lists

When you are writing a grocery list, the items do not need to follow a specific sequence. HTML unordered lists are used to present items that do not have to mandatorily follow a sequence.

These lists are displayed with bullets, which ensures the distinctiveness of the items.

Let me state an HTML list example that will further clarify your concept.

Code:

<ul>
<li>Apples</li>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Cheese</li>
</ul>

This HTML command list code will display the result:

Hope this was easy to understand!

Creating Ordered HTML Lists

As the name suggests, HTML ordered list syntax is used when you want to present your items in a specific order.

Let us assume that we are listing down a recipe. Can you pour oil before heating the pan? Certainly not! In this case, it is essential to list the steps in an order.

An example in support of this is mentioned below. Suppose you are trying to bake a cookie. Here’s how you can code to ensure that the steps are displayed in the form of an ordered list.

Let us understand this HTML tag list with example.

Code:

<ol>
<li>Preheat the oven to 350°F (175°C).</li>
<li>In a large mixing bowl, cream together the butter, white sugar, and brown sugar until smooth.</li>
<li>Beat in the eggs, one at a time, then stir in the vanilla extract.</li>
<li>Dissolve baking soda in hot water. Add to batter along with salt.</li>
<li>Stir in flour, chocolate chips, and nuts (if desired).</li>
<li>Drop by large spoonfuls onto ungreased pans.</li>
<li>Bake for about 10 minutes in the preheated oven, or until the edges are nicely browned.</li>
<li>Cool on wire racks.</li>
</ol>

This code will produce the result in this manner:

Readers will automatically know in what order they should proceed to bake a cookie.

Specifying the Numbering

To specify the starting point of the numbering you need in your ordered list, you have to use the start attribute for the <ol> tag.

For example, if you write <ol type = “1” start = “4”>, then the numerals will start with 4. If you write <ol type = “A“ start = “4”>, then the letters will start with D.

The numbering style can be customized with the help of CSS.

Therefore, whether you're listing the top 10 movies in 2023 or ranking students based on their scores, HTML ordered lists are here to rescue you!

Creating Definition Lists in HTML

This kind of HTML list is used to present items along with their corresponding definitions. They have a list of terms that are enclosed within the tag <dt> (definition term). The associated definitions are enclosed in the tag <dd> (definition description).

Let us take, for example, the definition of three fruits: apple, banana, and orange. Here’s how to do it.

Code:

<dl>
<dt>Apple</dt>
<dd>A round fruit with red or green skin and a crisp, white flesh.</dd

<dt>Banana</dt>
<dd>A long curved fruit with a soft, yellow skin and sweet, creamy flesh.</dd

<dt>Orange</dt>
<dd>A citrus fruit with a tough, orange skin and juicy, segmented flesh.</dd>
</dl>

This code will display the following result:

Final Words

Once you master the art of tactfully using HTML lists, you can enhance the visual aesthetics of your web page.

I hope this tutorial has given you a basic idea about the basic HTML command list and how to start using HTML lists in web development projects. If you are looking forward to knowing more, you can enroll in a full-stack web development course that will teach you all the important aspects of both front-end and back-end development and instill a holistic approach.

You can look for many such courses on upGrad, designed especially for working professionals who are looking forward to taking the next big leap in their careers.

Hope you find the best course that aligns with your interests and can fetch you the most lucrative opportunities. Happy coding!

Frequently Asked Questions

1. What are HTML lists?

HTML lists help developers group different types of related items in an organized, listicle manner. They can either be ordered, unordered, or in the form of a description.

2. What are the three 3 types of list elements used in HTML?

There are three types of HTML lists:

1. Ordered lists
2. Unordered lists
3. Description lists

3. How many lists does HTML have?

There are three HTML list types- ordered, unordered, and description.

4. Why use lists in HTML?

HTML lists help to present information in the form of pointers, making information easily accessible to the users.

5. How to insert a list in HTML?

There are different tags that are used to create HTML list. At first, you will have to use the <li> tag, and then specify whether you want to insert ordered, unordered, or description lists using the <ol>, <ul> and <dl> tags, respectively.

6. What is an ordered list in HTML?

An ordered list is one in which the elements to be contained in the list are written in a given sequence.

7. What is a description list?

A description list is one in which the elements are first named and then described.

8. What is an unordered list?

Unlike an ordered list, an unordered list presents the HTML element list, but they do not follow a particular sequence.