Making Lists In HTML

The history of making lists dates back to Hammurabi, when he posted the rules of conduct. Now, during the electronic age, the practice of making list is as popular as ever. In HTML you can get a set of tags that help in building a list. According to the new HTML version, there are three types of lists:

  • <ul> unordered list
  • <ol> ordered list
  • <dl> definition list

The unordered list syntax will look like the following:

1
2
3
4
5
6
7
8
9
10
    <html>
        <body>
            <h4>An Unordered List:</h4>
                <ul>
                    <li>Coffee</li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul>
        </body>
</html>

While, the ordered list will look like the following:

1
2
3
4
5
6
7
8
9
10
<html>
    <body>
        <h4>An Ordered List:</h4>
            <ol>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ol>
    </body>
</html>

The HTML <li> tag defines a list of the item that is being used both for the <ul> and <ol> lists. The <dt> and <dd> tags will define a definition term and it is being related with the description in a definition list. These tags are well supported in the latest version of HTML 5 but there can be some changes in the attributes. Especially, the tags <ul> and <ol> have the attribute compact and the type that are not supported in HTML 5. Even the tag <li> is also not supported in HTML 5.

One of the most common list related query after the introduction of the <nav>, will be the structure of the navigation bar of the website. All unordered lists are commonly used for the application of the navigation bar in the website. A typical navigation bar contains the <div> tag that contains unordered list.

Apart from the ordered list and the unordered list, in HTML there are even definition lists and nested list.

Definition list

The definition list is an entry list which is used for creating DT element for the term that is being defined and DD element is the definition of the term. In definition list there can be multiple terms and also there are multiple definition for a given term. Correspondingly, the authors or coders can also give other definitions but the structure makes a different sense.

1
2
3
4
5
6
7
8
9
10
11
<html>
    <body>
        <h4>A Definition List:</h4>
            <dl>
                <dt>Coffee</dt>
                    <dd>Black hot drink</dd>
                <dt>Milk</dt>
                    <dd>White cold drink</dd>
            </dl>
    </body>
</html>

Nested List

With nested list you can include one list to another as many possible times. With nested list you will b able to create non-linear mechanism using the clean HTML and additionally it displays information in well structured categories. A nested list syntax will appear like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <body>
        <h4>A nested List:</h4>
            <ul>
                <li>Coffee</li>
                <li>Tea
                    <ul>
                        <li>Black tea</li>
                        <li>Green tea</li>
                    </ul>
                </li>
                <li>Milk</li>
            </ul>
    </body>
</html>

Here is a list of all the HTML tags that are used commonly for preparing a list.

<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead