Types of Lists in HTML

As we have discussed in previous tutorials that firstly you have to create an "index.html" file and then you have to copy the given source code to see the results in the web browser.

Now let's see what are Lists in HTML. And the different types of lists:


What are Lists in HTML?

  • Lists are used to group the items in a list.

  • There are mainly three types of lists in HTML.

  • In HTML lists are: Ordered List, Unordered List, and Description Lists

  • List items are created using <li> tag.


1). Ordered List in HTML

  • Ordered Lists are created using <ol> tag.

  • This type of list shows the data and information in the given order.

  • Types of the ordered list are: 1, A, a, I, i

<ol type="A">
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ol>

( Try to use 1, a, I, and i at the place of A in <ol type="A"> )

Output:

A. HTML Simplified

B. CSS Master

C. JavaScript Simplified


2). Unordered List in HTML

  • Unordered Lists are created using <ul> tag.

  • This type of list represents the data without any specific order.

  • Types of ordered lists are disc, circle, square, and none.

<ul type="circle">
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ul>

( Try to use disc, circle, square, and none to change the type of unordered list.)

Output:

  • HTML Simplified
  • CSS Master
  • JavaScript Simplified


3). Description List in HTML

  • It is used to represent elements in definition form like a dictionary.

  • <dl> tag defines the description list, <dt> tag defines the term, and the <dd> tag describes each term in


<dl>
    <dt> HTML Simplified </dt>
        <dd> This is complete series of HTML </dd>
    <dt> CSS Master </dt>
        <dd> This will help you to master CSS </dd>
</dl>

Output:

HTML Simplified
This is complete series of HTML
CSS Master
This will help you to master CSS


Types of Lists in HTML PDF 

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Hey bhai , I just want you to say this pdf is not being downloaded or it shows error when i try to download it. So please try to fix it ASAP.

    ReplyDelete
    Replies
    1. Hey thank you so much for informing us!
      We have updated the PDF Download Link, Now try to download the PDF

      Delete

Top Post Ad

Below Post Ad