Home » Learn Code » HTML5 » How to create Bullets and Numbering Lists in HTML5

How to create Bullets and Numbering Lists in HTML5

  • HTML5
  • 5 min read
HTML Lists

In this chapter, we’ll learn about HTML Lists, types of lists like bullet lists and number lists, etc. What are the elements uses for lists? Lists are very important because we use lists to create data more readable for users. Also, in HTML we use lists to style navbar links.

So, let’s begin our today’s topic.

HTML Lists

HTML Lists allow web developers to create and group related items in the form of a list.

Types of HTML Lists

There are three types of lists in HTML5:

  1. Unordered lists (to group the set of related items in no particular order)
  2. Ordered lists (to group the set of related items in a specific order)
  3. Description lists (to display like terms and definitions)

HTML Lists Tags

TagsDescriptions
<ul>Use to define an unordered lists
<li>Defines an item list
<ol>Defines ordered lists
<dl>Use for description lists
<dt>For description title
<dd>And description data

1-Unordered Lists

Unordered lists starts with <ul> tag and ends at </ul>.

Every item of the unordered list start with <li> tag and end at </li>.

Example: In the below code unordered list elements are highlighted

<!DOCTYPE html>
<html>
<head>
<title> HTML Tutorials </title>
</head>
<body>
<h1> Unorder Lists </h1>
<ul>
   <li> First item </li>
   <li> Second item </li>
   <li> Third item </li>
   <li> Forth item </li>
</ul>
</body>
</html

By default, the list items are marked with bullets.

In the browser it will look like this:

unordered lists in browser

2- Ordered Lists

This is the same as the unordered list except for one difference that is we use <ol> tag instead of <ul> tag. Let’s see the example below.

Example: See the highlighted code lines,

<!DOCTYPE html>
<html>
<head>
<title> HTML Tutorials </title>
</head>
<body>
<h1> Order Lists </h1>
<ol>
   <li> First item </li>
   <li> Second item </li>
   <li> Third item </li>
   <li> Forth item </li>
</ol>
</body>
</html>

Furthermore, the list items are marked with numbers, by default.

So, in the browser it will look like this:

order lists

Type attribute in Ordered List

You can change the list type with the type attribute. By default, an ordered list has numbers, but you can change it to a, b, c, or roman counting like I, II, II.

How to? Let’s go ahead and see below:

If you want to write a, b, c in lowercase then simply write type=” a” inside <ol> tag. Like this below

<!-- for a, b, c in lowercase -->
<ol type="a">
   <li> First item </li>
   <li> Second item </li>
   <li> Third item </li>
   <li> Forth item </li>
</ol>

If you want to write in uppercase then simply write type=”A”, it will change.

And if you want to write roman counting then it will be like this below:

<!-- for roman counting -->
<ol type="i">
   <li> First item </li>
   <li> Second item </li>
   <li> Third item </li>
   <li> Forth item </li>
</ol>
<!-- for roman counting-->
<ol type="I">
   <li> First item </li>
   <li> Second item </li>
   <li> Third item </li>
   <li> Forth item </li>
</ol>

Just type your code in the text editor or copy and paste the code and see the result. Now, go ahead and see what is the description list?

Tip: See these 10 basic HTML tags that are the base of any HTML document.

3- Description Lists

HTML5 has description lists too. Description lists are very helpful to describe your particular items.

Let’s see the example below:

<!DOCTYPE html>
<html>
<head>
<title> HTML Tutorials </title>
</head>
<body>
<h1> Description Lists </h1>
<dl>
   <dt> Smart Phones </dt>
   <dd> SAMSUNG, LG, LENOVO, HUAWEI, REDMI </dd>
   <dt> Laptops </dt>
   <dd> HP, Apple, Toshiba, Dell, Acer </dd>
   <dt> Cars </dt>
   <dd> Honda, Audi, BMW, Alfa Romeo  </dd>
</dl>
</body>
</html>

In the browser it will look like this:

description lists

Finally, I hope you did understand well. Because Lists have a lot of use in HTML. So, keep practice and in our next chapter, we are going to see how to style lists.

If you have already learned HTML. Then continue to CSS. Learn CSS from Scratch. Start with What is CSS?

If this article didn’t solve your problem then please feel free to ask any question about HTML in the comment section below.

If you have any questions about this topic then please feel free to ask in the comment section below.

Leave a Reply

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