HTML Lists

HTML lists: Here, we are going to learn about the various types of the lists in the HTML like: OL (Ordered Listing), UL (Unordered Listing), and DL (Description Listing).
Submitted by Jhanvi Tripathi, on July 22, 2019

HTML provides the convenience to create lists on the webpage. The list could be numbered lists or simply bulletins.

In HTML lists are basically if three types, which are as follows:

Ordered Lists
Unordered Lists
Description Lists

In this article, we will cover all three lists as follows,

1) Ordered lists (<ol>)

The ordered list, as the name specifies an order, the list items here will be arranged in a sequence of numbers, alphabetically or in roman.

Example of ordered listing:

<html>

<body>
    <p>Example of ordered listing</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>
</body>

</html>

Output

type attribute with <ol> list tag

For creating alphabetical or other orders the type attribute is used.

The value provides to the type attribute becomes the order of the first element.

For example type="A" gives an alphabetical list where the first element order is "A" and "B" and so on. And, for lower case letters we specify type="a" and for Romans type="i". For capital Romans : "I".

Example of ordered listing with type attribute:

<html>

<body>
    <p>Example of ordered listing with type attribute</p>

    <p>Ordered list with uppercase alphabets...</p>
    <ol type="A">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase alphabets...</p>
    <ol type="a">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with uppercase roman...</p>
    <ol type="I">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

    <p>Ordered list with lowercase roman...</p>
    <ol type="i">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ol>

</body>

</html>

Output

2) Unordered Lists (<ul>)

In an unordered list, the list is represented in the form of a bulleted list, their lists are in any order of numbers or alphabets.

Example of unordered listing:

<html>

<body>
    <p>Example of unordered listing</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
</body>

</html>

Output

type attribute with <ul> list tag

In an unordered list, the bulletin could be changed to squares, circles, and man more. For this, we use the CSS style attribute with the list-style-type property and here we specify the symbol required.

The other symbols that could be given as:

Disc: It gives the disc type bulletin to the list elements
Circle: It gives a circle bulletin
Square: It gives square bulletin
None: It gives a list with no symbol

Example of unordered listing with type attribute:

<html>

<body>
    <p>Example of unordered listing with type attribute</p>

	<p>Unordered list with type='disc'...</p>
    <ul type="disc">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='circle'...</p>
    <ul type="circle">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
	<p>Unordered list with type='square'...</p>
    <ul type="square">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>

	<p>Unordered list with type='none'...</p>
    <ul type="none">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
    </ul>
	
</body>

</html>

Output

3) Description Lists

In a description lists, there are terms listed and these terms have descriptions.

The description lists are created by the <dl>, <dt> and <dd> tags.

The <dl> tag defines the list, the <dt> tag specifies the term of the list or the name of the list element and the <dd> tag specifies the description of each term.

Example:

<html>

<body>
    <p>Example of description lists</p>

      <dl>
         <dt>Programming</dt>
         <dd>C, C++, Java, etc.</dd>
         <dt>Courses</dt>
         <dd>MCA, B.Tech, BCA, etc</dd>
      </dl>
	
</body>

</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples