Lists are one of the important ways to represent data & information where each record is displayed in a single line. There are various ways of representing data in a list such as in an ordered manner, or in an unordered manner. I’ll be covering the following topics in this List in HTML article:
- Types of Lists in HTML
- Unordered HTML List
- Ordered HTML List
- HTML Description Lists
- Nested List in HTML
Types of List in HTML
Before we start creating a list, let’s look at the HTML tags first:
- <ul> Used to define an unordered list
- <ol> Used to define an ordered list
- <li> Used to define a list item
- <dl> Used to defines a description list
- <dt> Used to defines a term in a description list
- <dd> Used to describes the term in a description list
Let’s understand how you can create different kinds of a list in HTML.
Unordered List
To define an unordered list in HTML we use <ul> tag and then we define the list of items in <li> tag. By default, the list of items is marked with bullets (i.e. small black circles).
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ul> </body> </html>
Output:
Unordered HTML List: Different Item Markers
You can choose from a list of markers using CSS list-style-type property. Let’s look at different CSS list-style-type property that you can use to define different style of markers:
- disc: Sets the list item marker to bullet
- circle: Sets the list item marker to a circle
- square: Sets the list item marker to a square
- none: The list items will not be marked
Disc:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul style="list-style-type:disc;"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ul> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul style="list-style-type:circle;"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ul> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul style="list-style-type:square;"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ul> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul style="list-style-type:none;"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ul> </body> </html>
Output:
Ordered List
To define an ordered list in HTML we use <ol> tag and then we define the list of items in <li> tag.
By default, the list of items is marked with numbers.
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
Output:
Ordered HTML List – Type Attribute
There are different types of item markers for an ordered list:
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers
Numbers:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol type="1"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol type="A"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol type="a"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
Output:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol type="I"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
Output:
Lowercase Roman Numbers:
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ol type="i"> <li>Cricket</li> <li>Football</li> <li>Baseball</li> </ol> </body> </html>
HTML Description Lists
You can also create description lists in HTML. A description list is used to create a list of terms and adding a description to them. You create a description list using <dl> tag. <dt> tag defines the term & <dd> tag adds description to them.
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <dl> <dt>Cricket</dt> <dd> Cricket is a bat-and-ball game played between two teams of eleven players on a field at the centre of which is a 20-metre pitch with a wicket at each end, each comprising two bails balanced on three stumps.</dd> <dt>Table Tennis</dt> <dd> Table tennis, also known as ping-pong, is a sport in which two or four players hit a lightweight ball back and forth across a table using small rackets. The game takes place on a hard table divided by a net.</dd> </dl> </body> </html>
Nested List in HTML
You can also create a nested list in HTML.
<!DOCTYPE html> <html> <body> <h2>Sports</h2> <ul> <li>Table Tennis</li> <li>Cricket <ul> <li>Virat Kohli</li> <li>Joe Root</li> </ul> </li></pre> <pre><li>Basketball</li> </ul> </body> </html>
Output:
Now after executing the above snippets you would have understood how to create lists in HTML. I hope this blog is informative and added value to you.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of “List in HTML” blog and we will get back to you.