Lists in HTML

While building the web pages in HTML, organizing information clearly is important, and that’s where HTML Lists come in.  Lists help to structure the content in a way that is easy to read and accessible. Whether you are listing recipe ingredients, steps in a tutorial, or product features, the list in HTML is always there to help you. In this blog, you will learn different types of lists with real-world examples and the best practices to create lists using HTML.

Table of Contents:

• What is a List in HTML?
• Types of Lists in HTML
  • Unordered List
  • Ordered List
  • Description List
• Nesting Lists in HTML
• Real-World Use Cases
• Best Practices
• Conclusion

What is a List in HTML?

A list in HTML is used to show a group of related items in a structured way by using tags, such as the <ul> tag for an unordered list, the <ol> tag for an ordered list, and the <dl> tag for a definition list. It helps the content to look organized and easy to understand.

Types of Lists in HTML

A list is a structured way to represent a series of items. HTML offers three main types of lists:

1. Unordered List

An unordered list is used when the order of items doesn’t matter. An unordered list starts with the <ul> tag, and each item of the list is wrapped inside an <li> (list item) tag.

Syntax:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Example: Print Intellipaat Courses Using <ul>

Output:

Explanation: In this example, you are creating an unordered list of Intellipaat courses by using the <ul> tag in HTML. By default, each list item gets a bullet point. But you can further change this by using the “type” attribute.

Become a Job-Ready Web Developer in Just a Few Months

Kickstart Your Tech Career

Explore Program

Attributes of <ul> tag

Unordered list <ul> has two main attributes, type and compact. Let us discuss one by one:

• type: It is used to define the style of the bullet (disc, circle, square).
  

Syntax:

<ul type="square">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

• compact: It is used to reduce the spacing in lists, but it is deprecated in HTML5, and no one uses it anymore. 

2. Ordered List

An ordered list is used when the order matters. An ordered list in HTML starts with the <ol> tag, and each list item is again enclosed within <li> tags.

Syntax:

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Example: Print Intellipaat Courses Using <ol>

Output:

Explanation: In this example, you are creating an ordered list of Intellipaat courses by using <ol> tag in HTML. By default, the list items here are numbered as 1,2,3,4… but you can also change this by using the “type” attribute of the <ol> tag.

Attributes of <ol> tag

Here are some of the important attributes of the <ol> tag in HTML.

• type: It is used to change the numbering type as 1, A, a, I, i.

Syntax: 

<ol type="A">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

• start: It is used to set the starting number. It only takes numeric values as input.

Syntax: 

<ol type="A" start="10">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

• reversed: It helps in displaying the list in descending order.

Syntax: 

<ol type="A" reversed>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

3. Description List

It is another type of list in HTML. It is used for pairs, <dl> here is the container tag, <dt> is the term, and <dd> is the description.

Example: Displaying Product Information using the <dl> tag.

Output:

Explanation: In this example, you are using the <dl> tag to create a product specification list. Here, Processor and RAM are the terms, while Intel Core i7 and 16GB are the descriptions of the terms.

Nesting Lists in HTML

A nested list in HTML is defined as a list that contains other child lists. It is used for showing subcategories, like main courses and their subcategory courses:

Example:

Output:

Explanation: In this example, you are creating a nested list that contains the list of main courses and their sub courses.

Real-World Use Cases

Lists in HTML are one of the important elements. It helps you create structured data. Here are some of the important real-world use cases of using lists:

• It helps in creating a website navigation menu (<ul>).
• It helps in writing the steps to the signup form (<ol>).
• It is used in creating product specifications (<dl>).
• It also helps to create an FAQ section.

Best Practices

Here are some of the important steps that you must follow while creating a list in HTML:

• You have to choose the proper list style depending on the meaning of your content.
• Keep the list items concise.
• Don’t depend on old HTML attributes like “compact” for adding styling to your lists. Besides this, it’s good to use CSS. 

Conclusion

Lists in HTML play a very important part in building structured web pages. Whether you are creating a simple shopping list, a step-by-step guide, or a set of instructions, HTML lists help you everywhere. Plus, with the help of a little CSS, you can style your lists. Using lists properly in the code makes your pages more readable and improves accessibility for all users. So, understanding and using HTML lists is an important skill for building user-friendly websites.

Lists in HTML – FAQs