Creating lists in HTML

Je Phiri - Sep 15 - - Dev Community

In HTML, lists are structured using specific elements depending on whether you want the list to be ordered (numbered) or unordered (bulleted).

  1. Unordered Lists (Bulleted Lists) Use the
      tag for unordered lists, where each list item is enclosed in the
    • tag.

html
Copy code

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Example Output:
Item 1
Item 2
Item 3

  1. Ordered Lists (Numbered Lists) Use the
      tag for ordered lists, with list items again wrapped in
    1. tags.

    html
    Copy code

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

    Example Output:
    First Item
    Second Item
    Third Item

    1. Nested Lists You can nest lists within lists by placing a
        or
          inside an
        1. tag.

        html
        Copy code

      <ul>
        <li>Parent Item 1
          <ul>
            <li>Child Item 1</li>
            <li>Child Item 2</li>
          </ul>
        </li>
        <li>Parent Item 2</li>
      </ul>
      

      Example Output:
      Parent Item 1
      Child Item 1
      Child Item 2
      Parent Item 2

      1. Customizing Ordered Lists You can modify ordered lists to display different numbering styles, such as letters or Roman numerals, using the type attribute.

      html
      Copy code

      <ol type="A">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
      </ol>
      

      This will create: A. Item A
      B. Item B
      C. Item C

      1. Description Lists For lists where each item has a description or definition, use the
        ,
        , and
        tags.

      html
      Copy code

      <dl>
        <dt>HTML</dt>
        <dd>A markup language for creating web pages.</dd>
      
        <dt>CSS</dt>
        <dd>Stylesheet language used to describe the presentation of a document.</dd>
      </dl>
      

      Example Output:
      HTML: A markup language for creating web pages.
      CSS: Stylesheet language used to describe the presentation of a document. Currently working perfectly for finance website

. . . . . . . . . .
Terabox Video Player