HTML Lists

In this tutorial, you'll learn how to create different types of lists in HTML.

List tags are used to beautifully display information on a web page in the form of a list. HTML has three different types of lists and each has a specific purpose and meaning.

  1. Unordered list or bulleted list,
  2. Ordered list or numbered list,
  3. Definition list.

We will cover the three lists one by one in the following sections:

HTML Unordered list or bulleted list

An unordered list or bulleted list is a list of methods that are used to present information using different symbols or bullets. This is a block-level element.

The unordered list or bulleted list is presented with the <ul> … </ul> tag and each list item is presented with the <li> … </li> tag which is the <ul> and </ul> tag Located in the middle. Here’s an example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Unordered List</title>
</head>
<body>
    <h2>HTML Unordered List</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
	<li>Fourth item</li>
    </ul>
    <hr>
    <h2>HTML Nested Unordered List</h2>
    <ul>
        <li>First item
            <ul>
                <li>Child first item</li>
                <li>Child second item</li>
            </ul>
        </li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ul>
</body>
</html>
Note : The black circle is displayed here as the default style type.
Symbols used in Unordered list

Different types of symbols can be displayed on the un-order list using the CSS list-style-type property.

Using the CSS list-style-type property, see what symbols will be displayed for different values in the un-order list –

  1. circle – The items in the list for this value are displayed in a circle.
  2. disc – For this value, the items in the list are displayed in the form of bullets. This is the default value of the CSS list-style-type property.
  3. square – For this value, the items in the list are displayed as squares.
  4. none – No snatch is displayed for this value.

To display list items with a disc snap, you need to set the value of the list-style-type attribute, see an example below.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML used in Unordered list</title>
</head>
<body>
    <ul style="list-style-type:disc">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <hr>
    <ul style="list-style-type:circle">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <hr>
    <ul style="list-style-type:square">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <hr>
    <ul style="list-style-type:none">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
</body>
</html>

HTML Ordered list or numbered list

The list of methods used to present information by serial number or serial number is called an order list or numbered list. This is a block-level element.

The ordered list or numbered list is presented with the <ol> … </ol> tag and each list item is presented with the <li> … </li> tag that contains the <ol> and </ol> tags Located in the middle. Here’s an example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Ordered List</title>
</head>
<body>
    <h2>HTML Ordered List</h2>
	<ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
	<li>Fourth item</li>
    </ol>
    <hr>
    <h2>HTML Nested Ordered List</h2>
    <ol>
        <li>First item
            <ul>
                <li>Child first item</li>
                <li>Child second item</li>
            </ul>
        </li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ol>
</body>
</html>
Note : 1, 2, 3, etc. are displayed here as default style type.
Used mark of order list

<ol> Types of identifying list items can be determined using CSS type attributes with tags.

To display list items with numbers you need to set the value of the type attribute, see an example below

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Ordered List</title>
</head>
<body>
    <ol type="1">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <hr>
    <ol type="A">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <hr>
    <ol type="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
     <hr>
    <ol type="I">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <hr>
    <ol type="i">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <hr>
    <h2>Change Start Number in an HTML Ordered List Using CSS</h2>
    <ol start="11">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
</body>
</html>

HTML Description Lists

Definition list is a type of list that has a short description or definition with each list item. This is a block-level element.

Definition list or descriptive list is presented on the web page with the tag <dl> … </dl>. Each list item is represented by a <dt> … </dt> tag that lies between the <dl> and </dl> tags. Each list item is summarized or defined with the <dd> and </dd> tags after that list item.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Description Lists</title>
</head>
<body>
    <dl>
      <dt>Coffee</dt>
      <dd> - black hot drink</dd>
      <dt>Milk</dt>
      <dd>- white cold drink</dd>
    </dl>
</body>
</html>

TOOLS

ABOUT US

CONTACT