Different Types of HTML lists Explained with Examples

Ans:

Three Types of HTML Lists are:

-Unordered List - Ordered List - Description List

Unordered List:

An unordered list in HTML is a list of items that are displayed in no specific order.
Unordered lists are created using <ul> elements in HTML and each item in the list is represented by an <li> element.

By default, an unordered list is displayed by a disc marker.

e.g.

  <!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>Lists and Interlinking pages</title>
  </head>

  <body>
  <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
  </ul>
  </body>
  </html>

There are 4 kinds of markers for unordered lists:

disc, square, circle, none

The markers can be applied both on <ul> and <li> tags using the "type" attribute.

e.g.

  <body>
  <ul>
      <li type="circle" >one</li>
      <li type="square">two</li>
      <li type="disc">three</li>
      <li type="none">four</li>
      <li type="square">five</li>
  </ul>
  </body>

Ordered list:

An ordered list in HTML is a list of items that are displayed in a specific numerical or alphabetical order.

Order lists are created using the <ol> element in HTML and each element in the list is represented by an <li> element.

e.g.

  <body>
  <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
  </ol>
  </body>

There are 5 kinds of markers for the ordered list

Numbers(1), Lowercase Alphabets[a], Uppercase Alphabets[A], Lowercase Roman Numbers[i], Uppercase Roman Numbers[I]

The markers can be applied to both on <ol> and <li> tags using the "type" attribute

e.g.

  <body>
  <ol >
      <li type="I">one</li>
      <li type="I">two</li>
      <li type="I">three</li>
      <li type="I">four</li>
      <li type="I">five</li>
  </ol>
  </body>

Description List:

A description list in HTML is a way to display a list of terms and their corresponding descriptions.

Description lists are created using the <dl> element with each term represented by a <dt> element and each description represented by a <dd> element.

e.g.

  <body>
  <dl>
      <dt>ipone 14</dt>
      <dd>This phone contains A13 bionic chipset</dd>
      <dt>ipone 13</dt>
      <dd>This phone also contains A13 bionic chipset</dd>
  <dt>iphone 12</dt>
  <dd>this is a 12 bionic chipset</dd>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptatum dicta explicabo exercitationem aspernatur, doloribus voluptatibus? Deleniti esse culpa, ea eius quia, saepe tempora atque incidunt ipsa assumenda, nobis accusamus.</dd>
  </dl>
  </body>

Different Types of HTML lists Explained with Examples

Ans:

Three Types of HTML Lists are:

-Unordered List - Ordered List - Description List

Unordered List:

Ordered list:

Description List:

Subscribe to my newsletter

Manas Barman

Manas Barman