HTML LISTS



The elements below represent HTML Lists that can be used to group a collection of items with and/or without order.

HTML Lists Elements

  • <ul>: defines an unordered list where the order is meaningless and is typically bulleted.
  • <ol>: defines an ordered list where the order is meaningful and is typically numbered.
  • <li>: a child element of both <ul> and <ol> elements that defines a list items.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title>Order and unorder list</title>

        </head>

        <body>

<! -- Unordered List --> 

            <p> Fruits </p>

            <ul>

                <li> Apples </li>

                <li> Oranges </li>

                <li> Grapes </li>

            </ul>

<!-- Ordered List -->

            <p> Fruits </p>

               <ol>

                    <li> Apples </li>

                    <li> Oranges </li>

                    <li>Graphs</li>

                </ol>

        <body>

<html>

Output:

Fruits

• Apples

• Oranges

• Grapes

Fruits

1. Apples

2. Oranges

3. Grapes

Nested HTML Lists 

Sometimes we have to nest lists to make the data we represent easier to understand.

Here is an example of nesting HTML Lists.

<! DOCTYPE html> 

<html> 

        <head>

            <title>Nested list</title>

        </head>

        <body>

                <ul>    

                    <li> General Data </li>

               <li>

<!-- We put another list inside an <li>

                <ul>

                    <li> Specific Data </li>

                    <li> Specific Data </li>

                    <li> Specific Data </li>

                </ul>

            </li>

               <li> General Data </li>

            <li>

            <ol type="I">

                <li>  ONE </li>

                <li>  TWO </li>

                 <li>  THREE </li>

                <li>  F OUR</li>

            </ol>

        </li>

</ul>

        <body>

<html>

Output:

  • General Data

Specific Data 

Specific Data

Specific Data

  •  General Data


I. ONE

II. TWO 

III. THREE 

IV. FOUR


Description lists:

HTML Description Lists are commonly used to implement a glossary or to display metadata (a list of key-value pairs).

It somehow affects Search Engine Optimization (SEO).


HTML Description Lists Elements

• <dl>: defines a description list. It encloses a group of terms.

• <dt>: enclosed by the <dl> element it defines a description term 

• <dd> enclosed by the <dl> element it defines a description detail


Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title>Description list</title>

        </head>

        <body>

            <dl>

                <dt> dog </dt>

                    <dd> a domesticated meat-eating mammal. </dd

                <dt> cat </dt>

                    <dd> a small furry mammal kept as a pet. </d

                <dt> mouse </dt>

                    <dd> a small rodent with a long tail. </dd>

            </dl>

        <body>

<html>

Output:

dog

    a domisticated meat-eating mammal.

cat

    a small furry mammal kent as a net

mouse

    a small rodent with a long tail.