HTML List Tag: The Best Way to Implement It

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. 

In this article, we will discuss:

  • What is an HTML list?
  • HTML unordered lists
  • HTML ordered lists
  • HTML description lists

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

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

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

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

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

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 Java 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.

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.