Skip to content
Related Articles

Related Articles

Improve Article

Unordered, Ordered, and Description Lists in HTML

  • Last Updated : 23 Jul, 2021

Lists are used to store data or information in web pages in ordered or unordered form. HTML supports several types of list elements that can be included in the <BODY>tag of the document. These elements may also be nested, i.e, the onset of elements can be embedded within another. There are three types of list are available in HTML:

  • Unordered List
  • Ordered List
  • Description list

Now before moving to the list first of all we understands what is a list item tag.

List Item tag

List item tag is used to define each item of a list. Once we define list items with the <li> tag, the list appears in Web browsers in the bulleted form (by default). It is used inside both ordered and unordered list.

Syntax:

<li> content </li>



Attribute of item tag:

value: The value attribute of the<li> tag is used to specify the value of the first item. The value must be a number and this can be sued  in case of ordered list only. The subsequent list items will increment the value form the number.

Syntax:

<li  value = number>

Example 1:

HTML




<html >
<head>
    <title>inline style attribute</title>
</head>
<body>
    <li>sachin</li>
    <li>sujay</li>
    <li>Amraditya</li>
    <li>shivam</li>
    <li>Parth</li>
</body>
</html>

Output:

Example 2:



HTML




<html >
<head>
    <title>inline style attribute</title>
</head>
<body>
    <ol>
        <li value="51">English</li>
        <li>Hindi</li>
        <li>Maths</li>
        <li>Science</li>
        <li>social science</li>
    </ol>
</body>
</html>

Output:

Now we will discuss all the list provided by the HTML one-by-one in detail:

Ordered list

An ordered list defines a list of items in which the order of the items are matters. An ordered list is also called a number list. The ordering is given by a numbering scheme, using Arabic numbers, letters, roman numerals. Or in other words, ordered list  tag is used to create ordered list.

Syntax:

<ol> content </ol>

Attributes of ordered list:

1. reversed: This attribute is used to specifies that the ordered of the list should be reversed.

Syntax:

<ol reversed>



2. start: This attribute is used to specifies the start value of the list.

Syntax:

<ol start = “number”>

3. type: This attribute is used to specifies the type of list item maker. The value of this attribute is decimal(Default)/lower-roman/upper roman/lower-alpha/upper alpha

Syntax:

<ol type = “1|b|A|i|I”>

Example 1:

HTML




<html>
<head>
     <title>ordered list</title>
</head>
<body>
    <h1>Example of ordered list in defalut</h1>
    <ol >
        <li>Sachin</li>
        <li>Manoj</li>
        <li>Parth</li>
        <li>sujay</li>
        <li>Amraditya</li>
    </ol>
</body>
</html>

Output:

Example 2:



HTML




<html>
<head>
     <title>ordered list</title>
</head>
<body>
    <h1>Example of ordered list whose type = "A"</h1>
    <ol type="A">
        <li>Sachin</li>
        <li>Manoj</li>
         
    </ol>
    <h1>Example of reverse ordered list</h1>
    <ol reversed>
        <li>Parth</li>
        <li>sujay</li>
    </ol>
    <h1>Example of ordered list start from 10</h1>
    <ol start = "10">
        <li>Pushpa</li>
        <li>Purvi</li>
    </ol>
     
</body>
</html>

Output:

Unordered list:

 An unordered list defines a list of items in which the order of the items does not. Or in other words, unordered list tag is used to create a unordered list. It is also known as bulleted list. In unordered list each element in the list is defined using <li> tag. 

Syntax:

<ul> content </ul> 

Attributes of unordered list:

List-style-type: This attribute is used to specifies the bullet style that will be used as the list item marker. The value of this attribute is None/disc(default)/circle/square.

Syntax:

<ul style=”list-style-type:square|disc|none;”>

Example 1:



HTML




<html>
<head>
     <title>unordered list</title>
</head>
<body>
    <h1>Example of unordered list in defalut</h1>
    <ul>
        <li>Sachin</li>
        <li>Manoj</li>
        <li>Parth</li>
        <li>sujay</li>
        <li>Amraditya</li>
    </ul>
</body>
</html>

Output:

Example 2:

HTML




<html>
<head>
     <title>unordered list</title>
</head>
<body>
    <h2>Example of unordered list in circle</h2>
    <ul style="list-style-type:circle;">
        <li>sachin</li>
        <li>manoj</li>
    </ul>
    <h2>Example of unordered list in disk</h2>
    <ul style="list-style-type:disk;">
        <li>Priya</li>
        <li>Mohit</li>
    </ul>
    <h2>Example of unordered list in square</h2>
    <ul style="list-style-type:square;">
        <li>Pinky</li>
        <li>Punam</li>
    </ul>
    <h2>Example of unordered list in none</h2>
    <ul style="list-style-type:none;">
        <li>Mukti</li>
        <li>Dhama</li>
    </ul>
</body>
</html>

Output:

Description list

Description list is a list in which each term contain its description. This tag contain <dt> and <dd> tag.

  • <dt></dt>: This tag is used to define the name or term
  • <dd><dd>: this tag is used to describe the term.

Syntax:

<dl> content </dl>

Example:

HTML




<html>
<head>
     <title>Description list</title>
</head>
<body>
    <h2>Example of description list</h2>
    <dl>
        <dt>Python:</dt>
        <dd>It is a programming language</dd>
        <dt>C++:</dt>
        <dd>It is also a programming language</dd>
    </dl>
     
</body>
</html>

Output:

Attention reader! Don’t stop learning now. Join the First-Step-to-DSA Course for Class 9 to 12 students , specifically designed to introduce data structures and algorithms to the class 9 to 12 students




My Personal Notes arrow_drop_up
Recommended Articles
Page :