Numbered and Bullet Point Lists in HTML

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></ul>

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></ol>

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></ol>

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></ol>

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:

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

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 FacebookShare This On TwitterShare This On LinkedinShare This On Google PlusShare This On PinterestShare This On Mail