Lists are a great way to organize sections or content on a web page. They make the user experience better by categorizing information, or grouping similar concepts or items. When using HTML, there are two types of lists: bulleted and numbered. The following sections shows you how to create each, and changing their appearance, nesting, and format.

How to create a bulleted list

To create a bulleted list, use the unordered list tags

    and list item
  • tags as shown in the example below.

    • How to create a bulleted list.
    • How to create a numbered list.
    • Stopping and continuing a numbered list.
    • How to create a bullet list in a number list.
    • Applying CSS to a bullet or numbered list.

    Example code

    • Example 1
    • Example 2
    • Example 3

    The example above creates a bulleted list, with three bullet points, as shown below.

    Example result

    • Example
    • Example2
    • Example3

    How to create a numbered list

    To create a numbered list, use the ordered list tags

      and list item
    1. tags as shown in the example below.

      You can also use the extended HTML code • if you want to create a bullet symbol ( • ) without creating an unordered bullet list.

      1. Example 1
      2. Example 2
      3. Example 3
      • Example 1
      • Example 2
      • Example 3

      Stopping and continuing a numbered list

      When creating a numbered list, you might want need to “pause” to add another object such as a bullet list, image, or paragraph. The following code creates a numbered list that goes from one to three, displays a paragraph, and then continues the numbered list using the start attribute.

      1. Example 1
      2. Example 2
      3. Example 3

      Paragraph example.

      1. Example 4
      2. Example 5
      3. Example 6

      The start attribute can be any numerical value and tells the ordered list what number to use as the start number.

      Paragraph example.

      • Example 4
      • Example 5
      • Example 6

      How to create a bullet list in a number list

      You can also put lists inside of one another, creating a sublist. This technique, called nesting, can be accomplished by starting a list after one of the list item (

    2. ) tags, as shown below.

      1. Example 1
      2. Example 2
      3. Example 3
        • Bullet 1
        • Bullet 2
        • Bullet 3
      4. Example 4
      5. Example 5
      6. Example 6
      • Bullet1
      • Bullet 2
      • Bullet 3

      Applying CSS to a bullet or numbered list

      The example below shows how to apply CSS to change the image of the bullets in a list.

      #content ul li { list-style-Type: none; padding: 0 0 4px 23px; background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center; }

      In this example, which uses an external .css file, we’re telling the web page to only change the bulleted items in the

      section. If you want all bulleted items to change, you can remove the #content in the example above. In the second line, the list-style-Type: none; tells the browser to display no bullets. In the third line, the padding: 0 0 4px 23px; is the space and indent around the bullets. In the fourth line, the background tells the browser to use an image as the bullet and where to display it.

      • How to increase the size of a bullet in HTML.
      • How to create a multilevel list in HTML.
      • See the
      • ,
          ,
            , and bullet definitions for full information and examples.
          • HTML and web design help and support.