HTML - Lists

In general, a list is a group or collection of items. These items can be both organized and unorganized depending on the requirement. They help in organizing, structuring and presenting information to make it more user-friendly, readable and accessible. Sample lists are shown below −

html-lists

Lists in HTML

To display a list of information in HTML, we use various list tags like <li>, <ol> and <ul>. HTML offers web developers three ways for specifying lists of information namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In addition to the mentioned types of lists, there are some other important list-related elements and concepts also contribute to effective document structuring.

Example

The following example illustrates how to create a simple list of information in HTML.

<!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>

When we execute the above HTML, it will generate a list of five items.

HTML List Tags

Following are some of the HTML list tags −

  • <li> (List Item) − The <li> element represents an individual item within a list. It is used in along with other list elements to define the content of each list item.

  • <ul> (Unordered List) − The <ul> element creates an unordered list, which is a list without a specific order. It typically contains <li> elements representing items in no particular sequence.

  • <ol> (Ordered List) − The <ol> element establishes an ordered list, where items are presented in a specified sequence. Each list item (<li>) within an ordered list is assigned a number or character.

  • <dl>, <dt>, <dd> (Definition List) − The combination of <dl> (definition list), <dt> (definition term), and <dd> (definition description) elements is used to create a definition list. This type of list pairs terms with their corresponding definitions.

  • <div> (Division) − While not exclusively a list element, the <div> element is often used to group and structure content, including lists. It is a generic container that aids in layout and styling.

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>

On clicking edit & run, the above code will produce a nested list.

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>

On executing, this HTML code will display two ordered lists.

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>

On executing the above code, it will generate two lists in red color.

Marker Types in HTML Lists

CSS allows customization of marker types for list items. To do so, we use the 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>

When we execute the above code, it will display two lists with square markers.

Advertisements