HTML Lists

We’ll take a closer look at HTML lists in this article. Our discussion will cover the different types of lists, their syntax, and some best practices for using them.

With HTML lists, web developers can arrange related items into groups.

The term <list> is used to describe the collection of short items of related data, or it can be used to describe the display of data or information on a web page in an ordered or unordered fashion. Suppose you need to purchase items, and you need to prepare a list that can either be ordered or unordered. This will make it easier for you to organize the data and it will also make it easier to find what you are looking for


HTML list that is not ordered:

  • Item1
  • Item2
  • Item3
  • Item4

A properly formatted HTML list:

  1. Item Number 1
  2. Item Number 2
  3. Item Number 3
  4. Item Number 4

Ordered HTML List

Ordered lists begin with the <ol> tag. A list item is identified by a <li> tag as it comes to HTML lists.

Numbers will be displayed by default on list items:


<!DOCTYPE html> <html> <body><ol> <li>Hot Tea</li> <li>Cold Juice</li> <li>Cappuccino Coffee</li> </ol></body> </html>

Unordered HTML List

A list of unordered items begins with a <ul> tag. List items are divided by a <li> tag when it comes to HTML lists.

By default, list items will be kept with bullets (small black circles):


<!DOCTYPE html> <html><body><br><br><br><ul><br><br><li>Hot Tea</li><br><li>Cold Juice</li><br><br><li>Cappuccino Coffee</li><br></ul><br><br><br> </body></html>

HTML Description Lists

A description list can also be added to HTML . There is a description for each term in a description list inHTML lists .

A description list is specified by the <dl> tag, the name of a term is determined by the <dt> tag, and the description is determined by the <dd> tag:


<!DOCTYPE html> <html> <body><dl> <dt>Hot Tea</dt> <dd>- Cappuccino cold Cofee</dd> <dt>Mango Juice</dt> <dd>- black cold drink</dd> </dl></body> </html>

HTML Nested List

Nested lists are lists within other lists. Whenever you want to have a bulleted list inside a numbered list, then this type of list will be referred to as a nested list as it comes to HTML lists.

Here is an example of the nested list:


<!DOCTYPE html> <html> <head> <title>Nested list</title> </head> <body> <p>List of Famous Men with their companies</p> <ol> <li>Bill Gates <ul> <li>Microsoft</li> </ul> </li> <li>Warren Buffett <ul> <li>Berkshire Hathaway</li> </ul> </li> <li>Jeff Bezos <ul> <li>Amazon</li> </ul> </li> <li>Mark Zuckerberg <ul> <li>Facebook</li> </ul> </li> <li>Larry Page <ul> <li>Google</li> </ul> </li> <li>Larry Ellison <ul> <li>Oracle</li></ul> </li> </ol> </body> </html>

HTML Odered List Styling

The HTML Odered list can also be styled by using the CSS properites on it. See example below


<!DOCTYPE html> <html> <head> <title>List with styling</title> <style> li{ list-style-type: upper-roman; color: green; } </style> </head> <body> <p>An unordered list</p> <ol> <li>Hot Tea</li> <li>Cold Juice</li> <li>Cappuccino Coffee</li> </ol> </body> </html>

HTML Unodered List Styling

The HTML Unodered list can also be styled by using the CSS properites on it. See example below


<!DOCTYPE html> <html> <head> <title>List with styling</title> <style> li{ list-style-type: square; color: red; } </style> </head> <body> <p>An unordered list</p> <ul> <li>Hot Tea</li> <li>Cold Juice</li> <li>Cappuccino Coffee</li> </ul> </body> </html>

HTML List Tags

<dd>Defines the term in a description list

<dt>Represents a term in a description list
<ol>An ordered list is specified.
<ul>A list of unordered items
<dl>Creates a list of descriptions
<li>List items are defined by this property

Reminder: Visit our HTML Tag Reference to see a complete list of all HTML tags.

Benefits of Using HTML lists

Using HTML lists has some benefits, including:

  • Improved Readability: Lists organize information into a clear and structured format, which makes it easier to read. In this way, users do not have to spend much time reading long paragraphs of text in order to find the information they need.
  • Semantic Structure: Your content is semantically structured with HTML lists. You can indicate relationships between items in a list by using the appropriate list type, such as steps, options, or definitions.
  • Accessibility: Users who use assistive technologies such as screen readers will benefit from HTML lists. It is easier for visually impaired users to navigate and understand content with the help of screen readers that can recognize and announce list items.
  • Customization: You can customize lists using CSS to match your website’s design. Your website’s bullet style, numbering style, spacing, and indentation can all be changed.
  • SEO Benefits: By providing search engines with meaningful content to index, properly structured lists can improve your website’s search engine ranking. By doing this, you can increase the visibility of your website in search results, helping it rank higher in search engines.
If you want to be notified regarding the technical information on this site, do subscribe to our Newsletter below to become a part of the technical family.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *