HTML - Lists

HTML List is a collection of related infomation. The lists can be ordered or underdered depending on the requirement. In html we can create both order and unorder lists by using <ol> and <ul> tags. Each type of list can be decorated using porper attributes or CSS also. There is one more list which is description list - HTML <dl>, <dt> & <dd> tag are used to create description lists.

Lists in HTML

As HTML offers three ways for specifying lists of information namely ordered, unordered, and definition lists. All lists must contain one or more list items.

Try to click the iconrun button run button to run the following HTML code to see the output.

Examples of HTML Lists

In the below examples we will see unorder list, order list, description lists, and their variation as well, will use CSS to decorate the list.

HTML Unorder Lists

Unorder lists are marked with bullet points, by using html <ul> & <li> tag we can create a unorder list. This is also know as unorder list.

Example

In this example we will create 5 items in a unorder list.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ul>
</body>
</html>

HTML Order Lists

Order list are marked with numbers by default, we can xhnage the number into alphabet, roman numbers, etc. By using html <ol> & <li> tag we can create a order list and using type attribute we can change the default numeric marking.

Example

In this example we will create 5 items in a order list, try to use the type attribute to chnage numeric order marking.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ol>
</body>
</html>

HTML Description Lists

Description list is list of items with description, to create a desccription list we can use <dl>, <dt> & <dd> tag.

Example

In this example we will create 3 description list with the descripion.

<!DOCTYPE html>
<html>
<head>
    <title>HTML List</title>
</head>
<body>
    <h2>Example of HTML List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText markup languague</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheet</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

HTML Nested Lists

A list created within another list is known as Nested List. HTML also allow nesting of lists within one another to generate a complex document structures.

Example

In the following example, we are nesting an unordered list within an ordered list.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML Nested List</h2>
   <ol>
      <li>Item One</li>
      <li>Item Two
         <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
         </ul>
      </li>
      <li>Item Three</li>
   </ol>
</body>
</html>

Grouping with the <div> Tag

To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.

Example

In this example, we are grouping unordered lists with div tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Grouping of HTML List elements with div tag</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

Applying CSS to HTML List

Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag which is a way of specifying internal CSS.

Example

The following example demonstrate how to apply CSS to the HTML list using style tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
      }
      div {
         color: red;
      }
   </style>
</head>
<body>
   <h2>HTML List with CSS</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

Marker Types in HTML Lists

CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property which can be set to change markers to circles, squares, or other symbols.

Example

In this example, we are using the list-style-type property of CSS to set the markers of list items.

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>HTML list-style-type Property</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>
Advertisements