« Previous Next »

What is a List in HTML?

In HTML, lists are used to group related items together, making content organized and easy to read. HTML provides different types of lists, such as ordered lists, unordered lists, and description lists, each serving a unique purpose.

Why Use Lists?

Lists are useful for displaying items in a structured format, which improves readability and helps users understand the relationships between items. Lists are often used in menus, instructions, and content outlines.

Types of Lists in HTML


1. Unordered List (<ul>)

An unordered list displays items with bullet points. It's commonly used for items that don't need a specific order.

Basic Code Examples

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Lists Page</title>
        </head>
        <body>
          <ul>
            <li>Apples</li>
            <li>Mangos</li>
            <li>Oranges</li>
          </ul>
        </body>
      </html>





Output

                    
          
    
            
  • Apples
    • 
            
  • Mangos
    • 
            
  • Oranges
    •

2. Ordered List (<ol>)

An ordered list displays items in a numbered sequence, useful for showing steps or a ranked list.

Basic Code Examples

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Lists Page</title>
        </head>
        <body>
          <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
          </ol>
        </body>
      </html>


Output

                    
          
    
            
  1. First item
    2. 
            
  2. Second item
    3. 
            
  3. Third item
    4.

3. Description List (<dl>)

A description list pairs items with descriptions, often used for glossaries or terms and definitions.

Basic Code Examples

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Lists Page</title>
        </head>
        <body>
          <dl>
            <dt>HTML</dt>
             <dd>A markup language for creating web pages</dd>
            <dt>CSS</dt>
             <dd>A stylesheet language for styling HTML content</dd>
          </dl>
        </body>
      </html>


Output

                    
          

            
HTML

            
A markup language for creating web pages

            
CSS

            
A stylesheet language for styling HTML content

Conclusion

Using lists in HTML helps to organize content in a clear, structured manner. Whether you need a simple bullet list, a numbered sequence, or item descriptions, HTML lists offer flexibility and control.

« Previous Next »