DEV Community

Je Phiri
Je Phiri

Posted on • Edited on

Creating lists in HTML

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay