Friday, July 26, 2024

HTML Lists

 

HTML lists are used to group related items, making content more organized and readable. There are two main types of lists: ordered lists (<ol>), which display items in a numbered sequence, and unordered lists (<ul>), which display items with bullet points. Each item in a list is defined using the <li> tag. Lists can be nested to create sub-lists within items. Proper use of lists helps structure content logically and improves user experience.

Examples:

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>


<ol>

  <li>First Item</li>

  <li>Second Item</li>

  <li>Third Item</li>

</ol>


<ul>

  <li>Item 1

    <ul>

      <li>Sub-item 1</li>

      <li>Sub-item 2</li>

    </ul>

  </li>

  <li>Item 2</li>

</ul>


HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tutorial</title>
</head>
<body>
    <h1>HTML Lists</h1>
    <p>HTML supports ordered lists, unordered lists, and definition lists.</p>
   
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>

    <ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    </ol>

    <ul>
       <li>Item 1
          <ul>
             <li>Sub-item 1</li>
             <li>Sub-item 2</li>
          </ul>
       </li>
       <li>Item 2</li>
    </ul>

</body>
</html>


The Output of the above code:


HTML Tutorial - Page 9

HTML Lists

HTML supports ordered lists, unordered lists, and definition lists.

  • Item 1
  • Item 2
  • Item 3
  1. First Item
  2. Second Item
  3. Third Item
  • Item 1
    • Sub-item 1
    • Sub-item 2
  • Item 2