Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

HTML li

Within HTML documents, the "li" tag serves the purpose of generating lists. The focus of this article will be on exploring the HTML <li> tag.

As you commence your work on a webpage, you may encounter situations where you need to present a list of items. This could involve detailing different laptop models on the market, outlining 10 recommendations for creating engaging content, suggesting the top 5 courses for pursuing a career in software engineering, and so forth. In HTML, you have the flexibility to utilize the <li> element for all these aforementioned scenarios. Let's delve into understanding the <li> tag thoroughly.

<li> Tag

In HTML, a list of items is specified using this element. This element is considered block-level, occupying the full width and starting on a new line.

Syntax:

Example

<li>Name of the item</li>
  • serves as the initial tag, while
    • functions as the concluding tag within the syntax presented above. The designation of the item is placed between the opening and closing tags of the HTML list element.

    The <li> tag is written inside three different kinds of lists, which means there are 3 types of lists in HTML which are given below:

    • ✅ Unordered list/ Unnumbered list/ Bulleted list
    • ✅ Ordered list/ Numbered list
    • ✅ Definition list/ Description list

    We will explore each of the three types of lists individually.

    1. Unordered list

    The unnumbered list, also known as the unordered list, is a type of list that does not utilize numerical markers before each item. Instead, it uses symbols like circles, discs, squares, or none to represent each item.

    Syntax:

    Example
    
<ul type = "disc">
	<li>List item name</li>
</ul>
      is the opening tag of the unordered list, and
    is the closing tag of the unordered list in the above-provided syntax. The
  • tag encloses each list item and is used within the
      tag . The unordered list contains an attribute called "type" , whose default value is a disc, which is a solid circle.

      Various options are available for the "type" attribute in an unordered list to customize the appearance of bullets. These options include circle, disc, square, and none. The following table outlines the different values for the "type" attribute:

      Value of "Type" attribute Definition
      Disc It defines a list item marked with a disc-shaped bullet, a solid circle and the default type.
      Square It defines a list item marked with a square-shaped bullet.
      Circle It defines a list item marked with a circle-shaped bullet.
      None This type is used when you do not want any mark before a list item.

      Demonstration 1:

      In this tutorial, we will illustrate the use of an unordered list.

      Code:

      Example
      
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of the unordered list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of an unordered list.
    </p>
    <div>
        <h2>List of Hobbies</h2>
        <ul>
            <li>Drawing</li>
            <li>Gardening</li>
            <li>Photography</li>
            <li>Cooking</li>
            <li>Video Games</li>
        </ul>
    </div>
</body>
</html>

      Output:

      Solid circular bullets can be displayed in front of list items.

      Demonstration 2:

      This showcase will illustrate the usage of bullet points in unordered lists by employing the "type" attribute.

      Code:

      Example
      
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Representation of the unordered list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the illustration of an unordered list utilizing distinct types of bullets.
    </p>
    <div>
        <h2>List of HTML books</h2>
        <ul type="disc">
            <li>HTML and CSS: Design and Build Websites</li>
            <li>HTML & CSS for Beginners</li>
            <li>Responsive Web Design with HTML 5 & CSS</li>
        </ul>
        <h2>List of South Indian breakfast recipes</h2>
        <ul type="square">
            <li>Rava Idli</li>
            <li>Rava Dosa</li>
            <li>Moong Dal Chilla</li>
        </ul>
        <h2>List of fruits</h2>
        <ul type="circle">
            <li>Mango</li>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
        <h2>List of electronic devices</h2>
        <ul type="none">
            <li>Computer</li>
            <li>Smartphone</li>
            <li>Laptop</li>
        </ul>
    </div>
    
</body>
</html>

      Output:

      Four different types of unordered lists can be observed in the resulting output below.

      2. Ordered list

      An ordered list, also known as a numbered list, is a type of list that utilizes numbers to display its items.

      Syntax:

      Example
      
<ol type = "1">
	<li>List item name</li>
</ol>
        is the opening tag of the ordered list, and
      is the closing tag in the above-provided syntax. The
    • tag is used inside the
        tag. The ordered list has an attribute called "type" , whose default value is 1. There are various values given to the "type" attribute in the ordered list, such as "1", "I", "i", "A", and "a". These values of the "type" attribute are defined below in the table:
        Value of "Type" attribute Definition
        "1" It defines a list item marked with numbers, the default type.
        "I" It defines a list item marked with upper case Roman numbers.
        "i" It expresses Roman numbers in lowercase before a list item.
        "A" It describes letters in uppercase before a list item.
        "a" It expresses letters in lowercase before a list item.

        We can utilize more attributes in the ordered lists, such as the "reversed attribute", which is utilized to reverse the order of the list, and the "start attribute", which is utilized to define the start value of the list.

        Demonstration 1:

        In this example, we will create a numbered list utilizing the <ol> tag.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of the ordered list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of the ordered list.
    </p>
    <div>
        <h2>List of mobile phones brands</h2>
        <ol>
            <li>Apple</li>
            <li>Samsung</li>
            <li>Nokia</li>
            <li>Jio</li>
            <li>Lenovo</li>
        </ol>
    </div>
</body>
</html>

        Output:

        Each list item is preceded by a "1" type number.

        Demonstration 2:

        In this presentation, we will showcase different types of ordered lists.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ordered list illustration using various types of ordered numbers</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the ordered list illustration by utilizing various types of ordered numbers.
    </p>
    <div>
        <h2>List of Children story books</h2>
        <ol type="1">
            <li>Grandma's Bag of Stories</li>
            <li>Illustrated Fairy Tales</li>
            <li>The Giving Tree</li>
        </ol>
        <h2>List of fantasy novels</h2>
        <ol type="I">
            <li>Harry Potter and the Philosopher's Stone</li>
            <li>The Wizard of Earthsea</li>
            <li>A Game of Thrones</li>
        </ol>
        <h2>List of North Indian breakfast recipes</h2>
        <ol type="i">
            <li>Aloo Poori</li>
            <li>
                Aloo Paratha
            </li>
            <li>Paneer Paratha</li>
        </ol>
        <h2>List of dog breeds</h2>
        <ol type="A">
            <li>Pomeranian</li>
            <li>Dachshund</li>
            <li>Beagle</li>
        </ol>
        <h2>List of birds</h2>
        <ol type="a">
            <li>Peacock</li>
            <li>Parrot</li>
            <li>Hornbill</li>
        </ol>
    </div>
    
</body>
</html>

        Output:

        Different varieties of numbers can be observed in different ordered sequences.

        Demonstration 3:

        This example illustrates how to present an ordered list by utilizing the "reversed" and "start" attributes.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ordered list illustration using the "reversed" and "start" attributes</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        The ordered list demonstration uses the "reversed" and "start" attributes.
    </p>
    <div>
        <h2>Top 5 Indian Criket Batsman</h2>
        <ol type="1" reversed>
            <li>Rohit Sharma</li>
            <li>Virat Kohli</li>
            <li>Mahendra Singh Dhoni</li>
            <li>Virendra Sehwag</li>
            <li>Sachin Tendulkar</li>
        </ol>
        <h2>List of animated movies</h2>
        <ol start="101">
            <li>Spider-Man: Into the Spider-Verse</li>
            <li>The Super Mario Bros. Movie</li>
            <li>The Lion King</li>
            <li>Frozen</li>
            <li>Inside Out</li>
        </ol>
    </div>
    
</body>
</html>

        Output:

        An example of a reversed list and a list beginning with 101 can be observed.

        3. Definition list

        The definition list is also called the description list. It is the list which is used to describe a term. There are three tags which are used to define the list given below:

        • ✅ <dl> tag: It is used to define the list.
        • ✅ <dt> tag: It is used to define the term. It is written inside the <dl> tag.
        • ✅ <dd> tag: It is used to define the term. It is also written within the <dl> tag.

        Syntax:

        Example
        
<dl > Item name of a list
		<dt>Term</dt>
		<dd>Definition</dd>
</dl>

        <dl> is the opening tag of the definition list, and </dl> is the closing tag of the definition list in the provided-above syntax. <dt> is the opening tag of the term, and </dt> is the closing tag of the term. <dd> is the opening tag of the definition of the term, and </dd> is the closing tag of the definition of the term.

        Demonstration 1:

        In this tutorial, we will illustrate the process of creating a description list.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of the definition list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the illustration of the definition list.
    </p>
    <div>
        <h2>Distinct kinds of non-alcoholic beverages</h2>
        <dl>
            <dt>Milk</dt>
            <dd>Milk is a healthy drink and a source of calcium.</dd>
            <dt>Tea</dt>
            <dd>Tea is an aromatic drink that is created with the use of leaves of the camellia sinensis shrub.</dd>
            <dt>Coffee</dt>
            <dd>Coffee is a drink created from roasted coffee beans.</dd>
            <dt>Juice</dt>
            <dd>Juice is a nutritional drink made from fruits and vegetables.</dd>
            <dt>Mocktail</dt>
            <dd>Mocktail is a blend of two or more juices.</dd>
        </dl>
    </div>
</body>
</html>

        Output:

        The definition list is displayed below for observation.

        Demonstration 2:

        Let's illustrate another instance of a description list.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Representation of the definition list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the illustration of the definition list.
    </p>
    <div>
        <h2>Distinct sorts of art</h2>
        <dl>
            <dt>Painting</dt>
            <dd>-It uses paint on a solid surface with brushes to make an artwork.</dd>
            <dt>Photography</dt>
            <dd>-It is the art of clicking shots with the help of a camera.</dd>
            <dt>Sculpture</dt>
            <dd>-The art is produced by sculpting stone, metal, or wood.</dd>
        </dl>
    </div>
</body>
</html>

        Output:

        The presentation below showcases an example of a definition list.

        Nested Lists

        A list can be contained within another list, forming a structure known as a nested list.

        There are two types of nested lists outlined as follows:

        • ✅ Nested unordered list
        • ✅ Nested ordered list

        Let's delve into the two types of nested lists and grasp them thoroughly through examples.

        1. Nested unordered list

        Utilizing bullets to form a list within another list is referred to as a nested unordered list.

        Demonstration 1:

        In this example, we will showcase a nested list that is unordered.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of the nested list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of the nested list.
    </p>
    <div>
        <h2>List of book genres with book names</h2>
        <ul>
            <li> Fiction
                <ul>
                    <li>Pride and Prejudice</li>
                    <li>The Book Thief</li>
                    <li>Animal Farm</li>
                </ul>
            </li>
            <li> Narrative
                <ul>
                    <li>The Kite Runner</li>
                    <li>The Diary of a Young Girl</li>
                    <li>Columbine</li>
                </ul>
            </li>
            <li> Poetry
                <ul>
                    <li>Leaves of Grass</li>
                    <li>Milk and Honey</li>
                    <li>And Still I Rise</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

        Output:

        The nested unordered list can be observed in the provided output section.

        Demonstration 2:

        In this example, we will create a nested unordered list within another unordered list.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of the unordered list under another unordered list </title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of the unordered list under another unordered list.
    </p>
    <div>
        <h2>Parts of speech</h2>
        <ul type="square">
            <li> Nouns
                <ul type="circle">
                    <li> Types of nouns
                        <ul type="disc">
                            <li>Proper noun</li>
                            <li>Common noun</li>
                            <li>Abstract noun</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li> Pronouns
                <ul type="circle">
                    <li> Types of pronouns
                        <ul type="disc">
                            <li>Personal pronoun</li>
                            <li>Interrogative pronoun</li>
                            <li>Reflexive pronoun</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li> Verbs
                <ul type="circle">
                    <li> Types of verbs
                        <ul type="disc">
                            <li>Regular verb</li>
                            <li>Irregular verb</li>
                            <li>Finite verb</li>
                        </ul>
                    </li>
                </ul>
            </li> 
        </ul>
    </div>
</body>
</html>

        Output:

        In the following output, there is an unordered list nested within another unordered list.

        2. Nested ordered list

        A nested unordered list is formed when bullets are utilized to create a hierarchy within a list structure.

        Demonstration 1:

        In this example, we will illustrate a hierarchical list within a list.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of the nested ordered list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of the nested ordered list.
    </p>
    <div>
        <h2>List of ice creams</h2>
        <ol type="A">
            <li> Chocolate ice creams
                <ol type="a">
                    <li>Chocolate chip cookie dough ice cream</li>
                    <li>Chocolate brownie ice cream</li>
                    <li>Dark chocolate ice cream</li>
                </ol>
            </li>
            <li> Cookies ice creams
                <ol type="a">
                    <li>Oreo Cookie ice cream</li>
                    <li>Parle Cookie ice cream</li>
                    <li>Chocolate Cookie ice cream</li>
                </ol>
            </li>
            <li> Coffee ice creams
                <ol type="a">
                    <li>Cappuccino coffee ice cream</li>
                    <li>Americano coffee ice cream</li>
                    <li>Caffe Latte coffee ice cream</li>
                </ol>
            </li>
        </ol>
    </div>
</body>
</html>

        Output:

        An example of a nested ordered list is demonstrated in the following output.

        Demonstration 2:

        In this example, we will create a numbered list within another numbered list, known as a nested numbered list.

        Code:

        Example
        
<!DOCTYPE html>
<html lang="en">
<head>
    <title> Illustration of the ordered list under another ordered list</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is the demonstration of the ordered list under another ordered list.
    </p>
    <div>
        <h2>List of Example website courses</h2>
        <ol type="1">
            <li> Java
                <ol type="i">
                    <li> History of Java
                        <ol type="a">
                            <li>JDK Alpha and Beta (1995)</li>
                            <li>JDK 1.0 (1996)</li>
                            <li>JDK 1.1 (1997)</li>
                        </ol>
                    </li>
                    <li> Features of Java
                        <ol type="a">
                            <li>Object Oriented</li>
                            <li>Platform Independent</li>
                            <li>Robust</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
        <ol type="1">
            <li> Python
                <ol type="i">
                    <li> Keywords of Python
                        <ol type="a">
                            <li>class</li>
                            <li>import</li>
                            <li>continue</li>
                        </ol>
                    </li>
                    <li> Applications of Python
                        <ol type="a">
                            <li>Web applications</li>
                            <li>Business applications</li>
                            <li>Software development</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</body>
</html>

        Output:

        In the following output, there is a nested ordered list within another ordered list.

        Browser Compatibility

        Here are the browsers that support the <li>, <ol>, <ul>, <dl>, <dt>, and <dd> tags:

        • ✅ Google Chrome
        • ✅ Firefox
        • ✅ Internet Explorer
        • ✅ Opera
        • ✅ Safari

          • Conclusion

        We have comprehended the HTML <li> tag in this article. Following are the points that we have discussed above:

        • ✅ The <li> is the list tag used to create the list.
        • ✅ There are 3 kinds of lists: ordered, unordered, and definition.
        • ✅ The ordered list is the numbered list used to add a number in front of the items of a list. It is denoted as <ol> tag in HTML.
        • ✅ The unordered list is the bulleted list used to add a bullet in front of the items of a list. It is denoted as <ul> tag in HTML.
        • ✅ The definition list is used to define the term of a list. It is denoted as <dl> tag in HTML.
        • ✅ There are three tags in the definition list: <dl> for creating the definition list, <dt> for writing the term and <dd> for defining the term.
        • ✅ Nested lists are the lists created under another list.
        • ✅ There are 2 kinds of nested lists: nested ordered lists and nested unordered lists.
        • ✅ A nested ordered list is a list that uses numbers to create a nested list.
        • ✅ A nested unordered list is a list that uses bullets to create a nested list.

    • Input Required

    This code uses input(). Please provide values below: