Technical writing services by Espirian

HTML lists

Most of us know how to create a list in a word processor. In HTML, the process is a little more involved.

There are 2 types of HTML list:

In this post, I cover the following:

Knowledge check

Unfamiliar with HTML? Check out my 5-part Anatomy of an HTML page series.

Ordered lists

An ordered list is created using the

    element. All list items within are created using the
  1. element.

    Ordered lists are used when the list items should follow a sequence, with Arabic numerals (1, 2, 3, etc.) as the default list item markers. Here is an example:

    
    
    
    1. Mirror
    2. Signal
    3. Manoeuvre

    Here is the output of the code:

    1. Mirror
    2. Signal
    3. Manoeuvre

    Now, look back at the code and notice that the numbers are not shown there. Adding another list item anywhere within the list will result in the list being automatically renumbered – a handy feature familiar to anyone who has ever created a numbered list in a word processor.

    Alternative list styles

    We don’t have to stick to common numerals when creating an ordered list. Special list styles allow us to use alternative numbering schemes. Here is an example:

    
    
      style=
    "list-style-type:lower-roman;">
  2. Mirror
  3. Signal
  4. Manoeuvre
  5. Adding the lower-roman style to the list results in this output:

    1. Mirror
    2. Signal
    3. Manoeuvre

    There are several different list style types. You can find the full set on the CSS list-style-type Property page of the W3Schools site.

    The method above uses CSS, which we’ll cover in more detail in future posts. Another way of changing an ordered list’s numbering style is by using the type="" attribute. This method is better in some ways, but, unlike CSS, it doesn’t support all possible numbering styles. For more information about the type="" attribute, see the HTML <ol> type Attribute page of the W3Schools site.

    Changing or restarting list numbering

    It’s sometimes necessary to change the list numbers themselves (rather than just their style), often because we wish to split up a list into two or more parts. We can do this by using the start="n" attribute on the

      element, where n represents the number at which the list should start.

      Here is an example:

      
      
      1. First step
      2. Second step
      Some explanatory text that breaks up the list.
        start=
      "3">
    1. Third step
    2. Fourth step

      And here is the result:

      1. First step
      2. Second step

      Some explanatory text that breaks up the list.

      1. Third step
      2. Fourth step

      An alternative approach is to use the value="n" attribute on the relevant

    3. element. This time, n represents the number to assign to the targeted
    4. element. Here’s an example:
      
      
      1. Step A
      2. Step B
      3. value=
      4. "4">Step D
      5. Step E

        And here’s the output, with a jump in numbering on the third step:

        1. Step A
        2. Step B
        3. Step D
        4. Step E

        A note about deprecated code

        You may see some advice on the web to the effect that the start="n" and value="n" attributes are deprecated and therefore should not be used. This advice applies to the old HTML 4.01 standard but not the current HTML 5 standard – so feel free to take advantage of these very useful features.

        Reverse-ordered lists

        The reversed attribute allows us to reverse the ordering of ordered lists, which can be useful for creating a countdown. At the time of writing, this feature is not supported by all web browsers (see browser support list).

        Here’s an example:

        
        
          reversed
        >
      6. Bronze
      7. Silver
      8. Gold
      9. And here’s the result:

        1. Bronze
        2. Silver
        3. Gold

        If you see the numbers in ascending rather than descending order, your browser does not yet support the reversed attribute.

        The long-hand alternative for writing out a reverse-ordered list would be to use the value="n" attribute on each

      10. element, entering the numbers manually.

        Unordered lists

        An unordered list is created using the

          element. All list items within are created using the
        • element.

          Unordered lists are used when the list items need not follow a sequence, with bullets as the default list item markers. Here is an example:

        
        
        • Apples
        • Bananas
        • Oranges

          Here is the output of the code:

          • Apples
          • Bananas
          • Oranges

          As with ordered lists, the list item markers in unordered lists can be changed. Here’s an example:

          
          
            style=
          "list-style-type:circle;">
        • Apples
        • Bananas
        • Oranges
        • And here’s the output:

          • Apples
          • Bananas
          • Oranges

          Again, refer to the CSS list-style-type Property page to see other list styles.

          Multilevel lists

          If we need to create lists within lists, we can do so by placing the code for a list inside the list item of a parent list. Here’s an example:

          
          
          • Apples
            • Red apples
            • Green apples
            • Bananas
            • Oranges
            • And here is the output:

              • Apples
                • Red apples
                • Green apples
              • Bananas
              • Oranges

              Interactive examples

              To edit the examples used above, take a look at this CodePen page.

              CodePen – test your code

              About CodePen

              CodePen is a free web-based service for writing code (not just HTML) and seeing the results in the same browser window. The code is at the top of the page, the output at the bottom.

              Conclusion

              Ordered and unordered lists provide good examples of the importance of correctly nesting HTML elements. The examples given above should be fairly easy to follow – things do get more complicated when lists are nested within lists, though.

              Don’t forget to post your questions in the comments below or drop me a line on Twitter. I’d love to hear from you.

              Read the whole HTML series

              • Series index – an overview of each part
              • Part 1 – building blocks of HTML
              • Part 2 – headings, images, links and lists
              • Part 3 – comments, tables and special characters
              • Part 4 – quoting and citing
              • Part 5 – the head element, CSS and metadata
              • HTML lists – ordered and unordered lists

              Want relentlessly helpful emails? Join Espresso ☕️

              Get writing tips, web advice & goodies.

              💙 601 digital caffeine fans

              🍩 No spam or the doughnuts are on me • privacy

              Who wrote this?

              John Espirian – the relentlessly helpful technical copywriter

              I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.

              I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️