Lists in HTML



What is List in HTML?

  • HTML Lists are used to group the items in a list.

  • In HTML there are mainly three types of lists.

  • HTML lists are: Ordered List, Unordered List, and Description Lists

  • And list items are created using <li> tag.


1). Ordered List in HTML

  • <ol> tag is used to create Ordered Lists.

  • Ordered List are used to display the data and information in the given order.

  • Types of the ordered list are: 1, A, a, I, i

<ol>
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ol>

( Try to use 1, a, A, I, and i at the place of <ol type="A"> )

Output:

1. HTML Simplified

2. CSS Master

3. JavaScript Simplified


2). Unordered List in HTML

  • Unordered Lists are created using <ul> tag.

  • This type of list represents the data without any specific order.

  • Types of ordered lists are disc, circle, square, and none.

<ul>
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ul>

( Try to use disc, circle, square, and none to change the type of unordered list.)

Output:

  • HTML Simplified
  • CSS Master
  • JavaScript Simplified


3). Description List in HTML

  • This type of list is used to represent elements in definition form like a dictionary.

  • In this list <dl> tag defines the description list, <dt> tag defines the term, and the <dd> tag describes each term in


<dl>
    <dt> HTML Simplified </dt>
        <dd> This is complete series of HTML </dd>
    <dt> CSS Master </dt>
        <dd> This will help you to master CSS </dd>
</dl>

Output:

HTML Simplified
This is complete series of HTML
CSS Master
This will help you to master CSS


Code Described in the video

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Lists in HTML </title>
</head>

<body>
    <h1> Lists in HTML </h1>
    <h2> Ordered List </h2>
    <ol type="A">
        <li> HTML Tutorial </li>
        <li> CSS Tutorial </li>
        <li> JavaScript Tutorial </li>
        <li> ReactJS Tutorial </li>
        <li> NodeJS Tutorial </li>
    </ol>
    <h2> Unordered List</h2>
    <ul type="square">
        <li> HTML Tutorial </li>
        <li> CSS Tutorial </li>
        <li> JavaScript Tutorial </li>
        <li> ReactJS Tutorial </li>
        <li> NodeJS Tutorial </li>
    </ul>
    <h2> Description Lists </h2>
    <dl>
        <dt> HTML Simplified </dt>
        <dd> This is complete series of HTML </dd>
        <dt> CSS Master </dt>
        <dd> This will help you to master CSS </dd>
    </dl>
</body>

</html>


Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad