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 Lists – The type Attribute – <li> Tag – Ordered Lists – Starting on a Different Number – Reversing 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
- Item 1
- Item 2
- 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:
- Step Four
- Step Five
- 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:
- First LI
- Second LI
- Third LI
- Fourth LI
- 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.
- Top Level Item
- Sub-Item 1
- Sub-Item 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!