Introduction to HTML The image tag, anchor tag and the button tag The division tag Ordered and Unordered Lists in HTML Tables in HTML HTML Forms

Ordered and Unordered Lists in HTML

Sometimes, we want to display information in the form of a list. For example to make a shopping list you list all the items one by one vertically. In HTML,if we want to list down items we use the <ul> and the <ol> tags.

The <ul> tag

The <ul> tag is used to display items in a unordered list. Unordered means that the list items will be display using bullets like circles,discs or squares etc as per the user's choice. By default, discs are used to display the list items. The <ul> tag starts the unordered list. Every list item must be enclosing within an <li> tag. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h3>Fruits</h3>
        <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
        <li>Mango</li>
        </ul>
    </body>
    </html>
output of above code

The <ol> tag

The <ol> tag is used to create an ordered list. Ordered means every list item must be ordered either using numbers(1,2,3..) or alphabets(A,B,C...). Every list item must be enclosing within an <li> tag. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    <h3>Subjects to Study</h3>
    <ol>
        <li>English</li>
        <li>Chemistry</li>
        <li>Physics</li>
        <li>Maths</li>
    </ol>
    </body>
    </html>
output of above code

Nested lists

IN HTML, we can also create one list inside another list. This is called nested list. An unordered list may be nested within an ordered list or vice versa. Here, one list must be enclosed within the <li> tag of another list like follows. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    <h3>Subjects to Study</h3>
    <ol>
        <li>English</li>
        <li>Chemistry
            <ul>
                <li>Inorganic</li>
                <li>Organic</li>
                <li>Physical</li>
            </ul>
        </li>
        <li>Physics</li>
        <li>Maths</li>
    </ol>
    </body>
    </html>
output of above code