Using lists in web content

Lists make content easier to read by breaking up text and making key information stand out.

On this page

• Improve readability
• Keep lists short
• Do not repeat words at the start of each item
• Formatting lists
• Punctuation and capitalization

Improve readability

Lists draw people’s attention, use them instead of a sentence to improve readability. For example instead of:

Different decisions have different voting thresholds such as: majority vote, 3/4 vote, 80% vote or a unanimous vote.

Write:

Different decisions have different voting thresholds, such as:

• Majority vote
• 3/4 vote
• 80% vote
• Unanimous vote

Keep lists short

Long lists can be hard to follow. Consider if items can be grouped into several lists or accordions.

Do not repeat words at the start of each item

Repeating words at the beginning of each list item takes longer for screen reader users to navigate. This is because they must listen to the whole thing before they hear the context they need. For example:

• Mental Health Services – Northern Health
• Mental Health Services – Vancouver Coastal Health

Becomes:

• Northern Health – Mental Health Services
• Vancouver Coastal Health – Mental Health Services

Formatting lists

Make sure lists are properly formatted, never rely on indentations or punctuation alone.

Bulleted lists

Bulleted lists are ‘unordered’. This means they’re made up of a collection of related items that have no special order or hierarchy. 

Learn how to create a bulleted list in CMS Lite. For other platforms, this type of list is created by using the HTML <ul> tag.

Numbered lists

Numbered lists are ‘ordered’. Use this type of list if you specify the number of items in the list, or the order of the items is important. For example:

Become a teacher in B.C. by following these steps:

1. Explore the types of teaching certificates
2. Apply for a teaching certificate
3. Find a teaching position

Learn how to create a numbered list in CMS Lite. For other platforms, this type of list is created by using the HTML <ol> tag.

Multi-level lists

When possible, avoid lists with more than one level. Never use lists with more than two levels as they're difficult to read.

Punctuation and capitalization

Always capitalize the first word of each item in a list.

Use minimal punctuation

Do not use punctuation at the end of list items, even if they're complete sentences.

Avoid bulleted points with more than one sentence. If you must have more than one sentence, punctuate between the sentences but not at the end.

Only include ‘and’ or ‘or’ after the second-last item if it’s essential, such as for legal content.

Using colons

Always introduce lists with a colon.