How to create a List in HTML?

Leave a Comment / HTML / By

In this blog, You will learn about creating a list in HTML. Making a list is very easy in HTML. Let’s start with the process.

Firstly you should know the basics of the list. So there are three types of lists:- 

  1.     Ordered List
  2.     Unordered List
  3.     Description List 

There are different types of steps to create each list. Let’s look at these lists one by one.

List in HTML

What is an Ordered List?

The ordered list in HTML displays elements in a numbered format. <ol> and <li> tags are used to create an ordered list in HTML. We can show elements in different types of formats in an ordered list. These types of formats are:-

  1.     Numeric numbers
  2.     Roman numbers 
  3.     Alphabet
Steps to create an Ordered list:-
  1. Firstly type the basic HTML tags(HTML, Head, Title, Body) in your text editor.
  2. To create an ordered list, type the <ol> tag under the body tag.
  3. Create a listed item under the <ol> tag. Using <li> before and after the typed item.
  4. After typing the item, close the <ol > tag with </ol> tag.
  5. Save your file with .html extension and run your file.

The code to write an ordered list is:-

<!DOCTYPE html>
<html>
    <head>
        <title>Ordered list</title>
    </head>
    <body>
        <h1>Ordered List</h1>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>Bootstrap</li>
        </ol>
    </body>
</html>

OUTPUT

Ordered list in HTML

What is an unordered list?

An unordered list in HTML is used to display elements in bullet format. This list is used when we don’t need to show Elements in any particular order. We can create a list with the help of <ul> and <li> tags. The different types of formats to use the list are:-

  •    Square 
  •    Circle
  •    Disc
  •    None
Steps to create an Unordered list:-
  1. Firstly type the basic HTML tags(HTML, Head, Title, Body) in your text editor.
  2. To create an unordered list, type the <ul> tag under the body tag.
  3. Create a listed item under the <ul> tag. Using <li> before and after the typed item.
  4. After typing the item, close the <ul > tag with </ul> tag.
  5. Save your file with .html extension and run your file.
The code to write an Unordered list is:-
<!DOCTYPE html>
<html>
    <head>
        <title>Unordered List</title>
    </head>
    <body>
        <h1>Unordered List</h1>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>Bootstrap</li>
        </ul>
    </body>
</html>

OUTPUT

Unordered List in HTML

If you have noticed we have used the <li> tag in both of the above lists. So what is the <li> tag? So li tag is used to list the item under the ordered and unordered list. We use the <li> tag before writing the item and the </li> tag after it.

What is a description list?

A description list is used to write the display the elements with its definition or description. Three types of tags are used to write the code of a description list.

<dl>  This tag defines the description List

<dt>  This tag is used to Define the data term.

<dd> This tag is used to Define data definition.

Steps to create a Description list:-
  1. Firstly type the basic HTML tags(HTML, Head, Title, Body) in your text editor.
  2. To create a description list, type the <dl> tag under the body tag.
  3. Create a data term under the <dl> tag. Using <dt> before and after the typed item.
  4. Now type the definition of that data inside the <dd> tag.
  5. After typing the definition, close the <dt > and <dl>  tags.
  6. Save your file with .html extension and run your file.
The code to write a description List is:-
<!DOCTYPE html>
<html>
    <head>
        <title>Description List</title>
    </head>
    <body>
        <h1>Description List</h1>
        <dl>
            <dt>HTML</dt>
            <dd>Hyper Text Markup Language </dd>
            <dt>CSS</dt>
            <dd>Cascading Style Sheet</dd>
            <dt>Javascript</dt>
            <dd>Programming Language of Web.</dd>
            <dt>Bootstrap</dt>
            <dd>Open Source CSS Framework.</dd>
        </dl>
    </body>
</html>

OUTPUT

Description List in HTML

Hope this blog was helpful to you. Thank you for visiting our blog. If you have any other doubts let us know in the comments section, and we will respond to your question as soon as possible. Till then check out our more blog posts.

Recent Posts

Similar Posts

Leave a Comment

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