View Categories

HTML – Lists

Table of Contents

HTML lists are collections of related information that can be displayed in either ordered or unordered formats. You can create both using the <ol> (Ordered List) and <ul> (Unordered List) tags. Additionally, description lists offer a way to present term-description pairs using <dl>, <dt>, and <dd> tags. Lists can also be styled with attributes or CSS to match the design requirements.

Types of Lists #

HTML offers three types of list:

  1. Ordered Lists (<ol>): Items are numbered or marked in a sequence.
  2. Unordered Lists (<ul>): Items are marked with bullet points.
  3. Description Lists (<dl>): Consists of a term and its description.

Examples of Lists #

Below are examples demonstrating different types of lists, including nested lists and customized lists with CSS.

HTML Unordered Lists #

Unordered lists display items with bullet points. They are created using the <ul> and <li> tags.

Example – Unordered List

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Unordered List Example</title>
</head>
<body>
   <h2>Example of Unordered List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>Python</li>
   </ul>
</body>
</html>

HTML Ordered Lists #

Ordered lists are marked with numbers by default. You can change the sequence type to alphabets or Roman numerals using the type attribute.

Example – Ordered List

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Ordered List Example</title>
</head>
<body>
   <h2>Example of Ordered List</h2>
   <ol type="A">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>Python</li>
   </ol>
</body>
</html>

HTML Description Lists #

Description lists are used to display a term along with its description. Use <dl> for the list, <dt> for terms, and <dd> for their descriptions.

Example – Description List

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Description List Example</title>
</head>
<body>
   <h2>Example of Description List</h2>
   <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>JavaScript</dt>
      <dd>A programming language for the web</dd>
   </dl>
</body>
</html>

HTML Nested Lists #

A nested list contains a list within another list. This helps in organizing complex data structures.

Example – Nested List

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Nested List Example</title>
</head>
<body>
   <h2>Example of Nested List</h2>
   <ol>
      <li>Frontend
         <ul>
            <li>HTML</li>
            <li>CSS</li>
         </ul>
      </li>
      <li>Backend
         <ul>
            <li>Java</li>
            <li>Python</li>
         </ul>
      </li>
   </ol>
</body>
</html>

Grouping HTML Lists with <div> Tags #

Wrapping lists inside <div> elements helps with styling and layout. This practice allows for consistent formatting across multiple lists.

Example – Grouping Lists with <div>

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Grouping Lists Example</title>
</head>
<body>
   <h2>Grouped HTML Lists</h2>
   <div>
      <p>Languages</p>
      <ul>
         <li>HTML</li>
         <li>CSS</li>
      </ul>
   </div>
   <div>
      <p>Technologies</p>
      <ul>
         <li>Java</li>
         <li>Python</li>
      </ul>
   </div>
</body>
</html>

Styling Lists with CSS #

lists can be styled using CSS to make them more visually appealing. You can modify fonts, colors, spacing, and markers using CSS properties.

Example – CSS Styling for Lists

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Styled List Example</title>
   <style>
      ul {
         list-style-type: square;
         font-size: 18px;
      }
      li {
         margin: 5px 0;
      }
   </style>
</head>
<body>
   <h2>Styled Unordered List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ul>
</body>
</html>

Changing List Markers with CSS #

The list-style-type property allows you to customize the markers of a list.

Example – Customized List Markers

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Custom List Markers</title>
   <style>
      ol {
         list-style-type: upper-roman;
      }
   </style>
</head>
<body>
   <h2>Ordered List with Roman Numerals</h2>
   <ol>
      <li>Introduction</li>
      <li>Features</li>
      <li>Summary</li>
   </ol>
</body>
</html>

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment