The HTML list tag is used to group related pieces of information. Lists are used to create well-structured views and easily maintained documents. In this article, we’ll discuss the HTML list tag in detail and explore the various lists you can create. 

What Is an HTML list?

The list element is used to group a set of related items. The <li> tag is used if you want to enter the contents in the listed order.

 There are three types of lists: 

  • Unordered lists
  • Ordered lists
  • Description lists

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

HTML Unordered Lists

The <ul> element represents an unordered list. The unordered list has no special order and bullets represent this type of list. 

unordered-list-html-list

This will produce the following result: 

output-html-ul

Using the type attribute can change the bullet market. The following are the possible options:  

<ul type = "square">  (default)

<ul type = "disc">

<ul type = "circle">

  • Disc: This sets the markers to bullets, which is also the default setting.  

type-disc-html-lists

This list is represented as follows: 

output-html-ul

  • Circle: This sets the item marker to a circle.

type-circle-html-list

This will set the markers to circles.

output-type-circle

  • Square: This will set the marker to a square.

/type-square

The markers are now set to squares.

output-square

HTML Ordered Lists

The <ol> element represents the ordered list, which organizes items in a numbered format. 

ol-html-list

This will produce the following result:

output-ol.

Using the type attribute can change the marker in an ordered list. \

  • Type=”1”: The items are marked with numerals, which is the default type marker. 

type-1-html-lists

This will display items in the following way: 

output-ol

  • Type=”A”: The list items will be numbered with uppercase letters.

/type-A.

This markers will be shown as follows: 

output-type-A

  • Type=”a”: The list items will be numbered with lowercase letters.

type-a-html-list

The markers are now displayed in lowercase letters.

output-typee-a

  • Type=”I”: The list item will be numbered with uppercase roman numerals.

type-I

This will change the markers to uppercase Roman numerals.

output-type-I

  • Type=”i”: The list item will be numbered with lowercase Roman numerals.

type-i-html-list.

This will change the markers to lowercase numerals.

output-typee-i

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

HTML Description Lists

The <dl> tag represents the description list. The <dt> tag defines the term and the <dd> tag describes each term.

dl-tag

This will produce the following result:

output-dl

Next Steps

This article on HTML lists offered a brief insight into different types of HTML lists and their functionalities. If you’re ready to jumpstart your coding career and dive into everything HTML has to offer, certification through an accredited program should be at the top of your to-do list. Simplilearn’s Full Stack Developer course prepares students for their coding careers through a comprehensive curriculum that includes front-end, middleware, and back-end Java web developer technologies. Through hands-on projects and exercises, students gain invaluable experience by putting their HTML skills to the test.

If you have any questions or feedback regarding our HTML lists article, let us know in the comments section. Our experts will get back to you as soon as possible.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 17 Jun, 2024

6 Months$ 8,000
Full Stack Developer - MERN Stack

Cohort Starts: 18 Jun, 2024

6 Months$ 1,449
Automation Test Engineer

Cohort Starts: 19 Jun, 2024

11 Months$ 1,499
Full Stack Java Developer

Cohort Starts: 16 Jul, 2024

6 Months$ 1,449