HomeWeb DesignHTMLHTML Lists and their Types: Ordered, Unordered, and Description list

HTML Lists and their Types: Ordered, Unordered, and Description list

HTML Lists and their Types: Ordered, Unordered, and Description list

HTML Lists: Lists are used to group a set of related items in lists. In HTML, there are three types of HTML lists. they are:

  1. Ordered list (ol)
  2. Unordered list (ul)
  3. Description or definition List ( dl)

1) HTML Ordered List / Numbered List

In the HTML ordered list, the items will be displayed with numbers by default. An ordered list starts with the <ol> tag. Each list item will begin with the <li> tag.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title> HTML Ordered List: PrepareExams </title>
   </head>
   <body>
      <ol>
         <li> Red </li>
         <li> Black </li>
         <li> Pink </li>
         <li> Yellow </li>
      </ol>
   </body>
</html>

Results:

  1. Red
  2. Black
  3. Pink
  4. Yellow

2) HTML Unordered List / Bulleted List

In the HTML Unordered list, the items will be displayed with bullets by default. An ordered list starts with the <ul> tag. Each list item will begin with the <li> tag.

<!DOCTYPE html>
<html>
   <head>
      <title> HTML UnOrdered List: PrepareExams </title>
   </head>
   <body>
      <ul>
         <li> Red </li>
         <li> Black </li>
         <li> Pink </li>
         <li> Yellow </li>
      </ul>
   </body>
</html>

Results:

  • Red
  • Black
  • Pink
  • Yellow

3) HTML Description List ( Definition List)

HTML description is also called a definition list and items are listed like a dictionary (or) encyclopedia. we use three tags in the definition list.

  • <dl> tag – defines the description list,
  • <dt> tag – defines the term (name),
  • <dd> tag – describes each term.

Example:

<!DOCTYPE html>
<html>
<body>

<h2> Description List: PrepareExams </h2>

<dl>
  <dt> Colors List: </dt>
    <dd> - Red </dd>
    <dd> - Black </dd>
  <dt> Fruits List: </dt>
    <dd> - Mango </dd>
    <dd> - Apple </dd>
</dl>
</body>
</html>

Output:

Colors List:
– Red
– Black
Fruits List:
– Mango
– Apple

- Advertisment -

Latest Articles