HTML Numbered and Bullet Point Lists Tutorial

Numbered and Bullet Point Lists in HTML

Whether it’s in a scientific paper, during a BBC News report or in a business or school PowerPoint presentation, bullet point lists are everywhere. They are useful for

  • Breaking up large segments of text into manageable chunks
  • Making important points stand out
  • Setting out ‘action plans’ and to-do lists

And much more. Today, users of the web have really short attention spans, so using bullet lists can help people digest what you have to say more easily. But how are they put together on a web page?

Sections: Unordered ListsThe type Attribute<li> TagOrdered ListsStarting on a Different NumberReversing the Order

Bullet Point Lists (or Unordered Lists)

The first kind of list we will look at is using bullets.

Unordered List – the <ul> Tag

Bullet point lists are also known as unordered lists (UL) because there is no numbering involved. That is why a bulleted list uses the <ul> </ul> tag pair. Here is a basic example:

<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

The whole list is surrounded by <ul> </ul> for a start. When you open your list tag, make sure you automatically type your closing tag and then proceed to fill your items between them.

The type Attribute

The type attribute determines what kind of bullet you are seeing on the page. Although through CSS you can specify a wide-range of bullet styles, and even use your own image, in raw HTML it is best to stick with the common types which are

  • type="circle" – an unfilled circle
  • type="disc" – a filled circle
  • type="square" – a filled square

List Items – the <li> Tag

Each individual item in your list is wrapped in its own <li> </li> tag pair. You can often get away without the </li> but I would recommend keeping it in, just so you maintain healthy coding habit.

The list above I placed in individual <ul> but each <li> also supports the type attribute, such that I could create

  • Square
  • Disc
  • Circle

Not sure why you would want to do that, but you can if you want to!

Bullet List Indentation

Before you apply any CSS to your list, HTML (or more accurately, your browser) will apply indentation to your list, so it stands out from your normal paragraph <p> tags.

Ordered / Numbered Lists – the <ol> Tag

If you want to present your list in an ordered fashion, then the <ol> tag is your friend. By default this will give you a numbered list, but the type attribute gives you flexibility, in the same way as bullet point lists do.

<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

which outputs

  1. Item 1
  2. Item 2
  3. Item 3

The type attribute offers a few more options in ordered lists compared to bulleted ones. A bit more guidance on this can be obtained at W3Schools.

Starting an Ordered List On A Different Number

Say you were putting together some instructions to build a table. You may want to use a numbered list to achieve this. However, if you wanted to put images and extra text between each stage, you would probably need multiple lists. The problem is that each list starts at number 1 (or letter A) by default. That would screw up your instructions!

Thankfully HTML has the start property to allow you to start on a subsequent number:

<ol start="4">
 <li>Step Four</li>
 <li>Step Five</li>
 <li>Step Six</li>

This outputs:

  1. Step Four
  2. Step Five
  3. Step Six

Reversing The Order

If you want to show your numbers (or letters) in reverse order, then this is really easy too. You might want to do a ‘Top 10’ with your best item announced last, for example. This can be done by adding the word reversed into your Ordered List opening tag:

<ol reversed>
 <li>First LI</li>
 <li>Second LI</li>
 <li>Third LI</li>
 <li>Fourth LI</li>
 <li>Fifth LI</li>

And this would make your list look like this:

  1. First LI
  2. Second LI
  3. Third LI
  4. Fourth LI
  5. Fifth LI

Multi-Level Bullet List in HTML

With patchy browser support (and sometimes undone by CSS in some sites) you can create a multilevel list. This is achieved by embedding one list inside another:

 <li>Top Level Item</li>
  <li>Sub-Item 1</li>
  <li>Sub-Item 2</li>
 <li>Top Level Item</li>

Which creates:

  • Top Level Item
    • Sub-Item 1
    • Sub-Item 2
  • Top Level Item

You can use a combination of <ul> and <ol>. That may be useful if you want bullet points under a numbered list.

  1. Top Level Item
    • Sub-Item 1
    • Sub-Item 2
  2. Top Level Item

TL;DR Bullet Point Lists

Use bulleted lists where appropriate on your HTML Pages. This has been a brief introduction to their use in web design, but gives you something to start off with. If you have any questions please feel free to use the comments!

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

5 thoughts on “Numbered and Bullet Point Lists in HTML

  1. Thanks a lot. I found this site really helpful, and most importantly for a beginner such as myself, straight forward. You packed a lot of information on the subject onto this one page and included list options I hadn’t considered while experimenting. The best part is that you included this bounty of information on a single page and didn’t force me to search through several pages to compile all of the information I needed only to test out a single concept. Thanks again!!!

    1. Thank you for your positive feedback RNC! Although I can’t add new stuff very often (health plus work issues), if you’d like to see something written about, feel free to let me know and I’ll add it to my writing schedule!

Comments are closed.