Creating Lists in HTML: Understanding the List Tag

HTML Lists are used to specify lists of information. All lists may contain one or more list elements.

In HTML, there are several types of list elements used to display a list of items

Unordered List: <ul>...</ul> - Represents a list of items with bullet points.
Values :
- disc
- circle
- square
Ordered List: <ol>...</ol> - Represents a list of items with numbers.
Values :
- 1
- I
- i
- A
- a
Definition List: <dl>...</dl> - Represents a list of terms and their associated descriptions
Menu List: <menu>...</menu> - Represents a list of commands
Directory List: <dir>...</dir> - Represents a list of file names with bullet points

Ordered List

An ordered list in HTML is a list of items that are marked with numbers, letters, or Roman numerals. It is created using the <ol> (ordered list) tag, which is a container for a set of <li> (list item) elements. The order of the items is determined by the HTML code, and the browser automatically generates the numbers for each item. This type of list is useful for creating lists of steps, instructions, or for organizing items in a specific order.

The <ol> tag can also have various attributes, such as start (which sets the starting value of the first item) and type (which sets the type of numbering, such as decimal, lowercase Roman, etc.).

Here is the simple program for printing the ordered list tag example in html

Source Code

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <ol>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ol>
        <ol type="a">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ol>        
        <ol type="A">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ol>
        <ol type="i">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ol>        
        <ol type="I">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ol>
    </body>
</html>

To download raw file Click Here

Unordered List

An unordered list in HTML is a list of items represented by bullet points. It is defined using the <ul> tag and each list item is denoted by the <li> tag.

Here is the simple program for printing the unordered list tag example in html

Source Code

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <ul>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ul>        
        <ul type="circle">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ul>
        <ul type="square">
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ul>
        <ul type="circle">
            <li> Computer</li>
            <li>
                Computer
                    <ul type="square">
                        <li>Keyboard</li>
                        <li>Keyboard</li>
                        <li>Keyboard</li>
                        <li>Keyboard</li>
                        <li>Keyboard</li>
                    </ul>
            </li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </ul>
    
    </body>
</html>

To download raw file Click Here

Definition List

A definition list in HTML is a list of terms and their associated definitions. It is created using the "dl" tag along with "dt" (definition term) and "dd" (definition description) tags.

Here is the simple program for printing the Definition list tag example in html

Source Code

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <dl>
            <dt>HTML</dt>
            <dd> 
                Hyper text Markup Language
                <dl>
                    <dt>CSS</dt>
                    <dd> Cascading Stylesheet</dd>
                </dl>
            </dd>
            <dt>CSS</dt>
            <dd> 
                Cascading Stylesheet
                    <ul type="square">
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JS</li>
                        <li>JQUERY</li>
                        <li>PHP</li>
                    </ul>
            </dd>
        </dl>
    </body>
</html>

Menu List

The menu tag in HTML is a semantic element used to define a list of commands, where each command is represented by a menu item. It is used to group related options and provide a way for users to access those options.

A <menu> element can contain one or more <li> or <menuitem> elements within it.

Here is the simple program for printing the Menu list tag example in html

Source Code

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <menu>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </menu>
        
        <menu>
            <menuitem> Computer</menuitem>
            <menuitem> Computer</menuitem>
            <menuitem> Computer</menuitem>
            <menuitem> Computer</menuitem>
            <menuitem> Computer</menuitem>
        </menu>
    </body>
</html>

Directory List

The dir tag in HTML was used to create a directory list, which is a list of files or folders, each represented by a li element. However, the dir tag has been deprecated in HTML5 and should not be used in modern web development. Instead, it is recommended to use the unordered list (ul) or ordered list (ol) tags to create lists in HTML.

Here is the simple program for printing the directory list tag example in html

Source Code

<html>
    <head>
        <title>HTML - Tutor Joes</title>
    </head>
    <body>
        <dir>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
            <li> Computer</li>
        </dir>
    </body>
</html>

In summary, the list tag is an essential tool for creating structured and organized content on a website. With the help of the <ul> and <ol> tags, you can create unordered and ordered lists respectively, and with the help of <li> tag you can create list items in those lists. These tags give the web developers more options to format the content on website.