HTML

offers its users to display relative content in groups through HTML lists. By doing this we can communicate with our users in a better and most efficient way. Users find it more comfortable and impressive when all the required content is listed and properly presented.

In this Blog let's walk through the different types of List available in HTML, their best use cases, and finally, implement them.

HTML enables its users to create the following Lists:

Unordered List.
Ordered List.
Description / Definition List.

Let's understand them one by one.

=> Unordered List

It is a series of elements without any proper order.
It is also known as a Bulleted list as the default listing type will be black-colored bullets.
We use < ul ></ ul > tag to create an unordered List.
To specify the list items we use < li > ... </ li >

We can create an unordered List by writing the following code :

<!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>Unordered List</title>
  </head>
  <body>
    <ul>
      <li>JavaScript</li>
      <li>Python</li>
      <li>C++</li>
      <li>C</li>
    </ul>
  </body>
</html>

OUTPUT :

Screenshot 2022-08-24 102455.png

We can change the list style type from bullets to other forms.

The available list-style-type are :

Disc
Circle
Square.
None

=> Ordered List

It is a series of elements with proper order.
It is also known as a Numbered list as the default listing type will be numbered starting from one.
We use < ol ></ ol > tag to create an unordered List.
To specify the list items we use < li > ... </ li >

We can create an ordered List by writing the following code :

<!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>Ordered List</title>
  </head>
  <body>
    <ol>
      <li>JavaScript</li>
      <li>Python</li>
      <li>C++</li>
      <li>C</li>
    </ol>
  </body>
</html>

OUTPUT:

Screenshot 2022-08-24 102940.png

The available attributes for < ol > tag are :

Type: used to define the type of marker that should be used to number the List.
- The possible value it can take up are :
  - "1": Numbering using decimals. This is the default type.
  - "A": Marking list items using uppercase Alphabets.
  - "a": Marking list items using lowercase Alphabets.
  - "I": Marking list items using uppercase Roman Numbers.
  - "i": Marking list items using lowercase Roman Numbers.

Start: used to define a starting point of numbering.

Example: start="50"

Reversed: used to define the order of numbering.

Example: reversed="true"

=> Description List

It is a series of items giving some description.
The information is provided to the users by defining a title and then providing a description.
We use < dl ></ dl > tag to create an unordered List.
To specify the list titles we use < dt > ... </ dt >.
To specify the list description we use < dd > ... </ dd >.

We can create a description List by writing the following code:

<!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>Description List</title>
  </head>
  <body>
    <dl type="1">
      <dt>Language</dt>
      <dd>- JavaScript</dd>
      <dt>Framework</dt>
      <dd>- React JS</dd>
      <dt>Database</dt>
      <dd>- Mongo DB</dd>
    </dl>
  </body>
</html>

OUTPUT:

Screenshot 2022-08-24 105133.png

Mithun 's Blog