How to Insert Lists in WordPress with HTML

By Lisa Sabin-Wilson

Say you need to provide a clean-looking format for lists of information that you publish on your WordPress website. With HTML markup, you can easily provide lists that are formatted differently, depending on your needs.

Ordered lists are numbered sequentially. An example is a step-by-step list of things to do, like this:

  1. Write all book chapters.

  2. Submit book chapters to publisher.

  3. Panic a little when book is released to the public.

  4. Breathe sigh of relief when public reviews are overwhelmingly positive!

Ordered lists are easy to create in a program such as Microsoft Word, or even in the WordPress post editor because you can use the WYSIWYG editor to format the list for you. However, if you want to code an ordered list using HTML, the experience is a little different. The previous step list sample looks like this when using HTML markup:

<ol>
<li>Write all book chapters.</li>
<li>Submit book chapters to publisher.</li>
<li>Panic a little when book is released to the public.</li>
<li>Breathe sigh of relief when public reviews are overwhelmingly positive!</li>
</ol>

The beginning <ol> tells your web browser to display this list as an ordered list, meaning that it will be ordered with numbers starting with the number 1. The entire list ends with the </ol> HTML tag, which tells your web browser that the ordered list is now complete.

Between the <ol> and </ol> are list items designated as such by the HTML markup <li>. Each list item starts with <li> and ends with </li>, which tells the web browser to display the line of text as one list item.

If you don’t close an open HTML markup tag — for example, if you start an ordered list with <ol> but don’t include the closing </ol> at the end — it messes up the display on your website because the web browser considers anything beneath the initial <ol> to be part of the ordered list until it recognizes the closing tag: </ol>.

Unordered lists are very similar to ordered lists, except that instead of using numbers, they use bullet points to display the list, like this:

  • Write all book chapters.

  • Submit book chapters to publisher.

  • Panic a little when book is released to the public.

  • Breathe sigh of relief when public reviews are overwhelmingly positive!

The HTML markup for an unordered list is just like the ordered list, except that instead of using the <ol> tag, it uses the <ul> tag (UL = unordered list):

<ul>
<li>Write all book chapters.</li>
<li>Submit book chapters to publisher.</li>
<li>Panic a little when book is released to the public.</li>
<li>Breathe sigh of relief when public reviews are overwhelmingly positive!</li>
</ul>

Note that both the ordered and unordered lists use the list item tags, <li> and </li>, and the only difference is in the first opening and last closing tags:

  • Ordered lists: Use <ol> and </ol>

  • Unordered lists: Use <ul> and </ul>

  • List items: Use <li> and </li>