The Ultimate Guide to Bullet Points in HTML Email

In the world of email design, a seemingly straightforward task—like adding a bulleted list to an email—can actually be quite complicated. That’s because bullet points will render differently depending on your subscribers’ email clients. (Fun fact: there’s over 300,000 potential ways an email can render.)

As a workaround, we often see email marketers:

1. Resorting to tables to maintain consistent formatting, or
2. Avoiding bullet points altogether.

While these are considered “fixes,” they aren’t accessible and should only be thought of as temporary solutions. Why? Because both approaches create difficulties for subscribers who rely on screen readers.

So, what’s an email marketer to do? If you’re looking for an accessible fix to bullet points in email, you’re in the right place.

In this guide, we’ll share everything you need to know about bulleted lists in email. Read on to learn:

• The benefits of bullet points in email
• Using list tags
• Getting started with semantic bulleted lists
• Gmail considerations and workarounds
• Outlook considerations and workarounds
• Nested lists
• Custom symbols and images
• Why the table method isn’t ideal for accessibility
• How to make table lists accessible

The benefits of HTML bullet points in email

Bulleted lists are valuable for establishing content hierarchy. By nature, bullet points provide visual anchor points for subscribers, making it easy for them to read, scan, or skim your email. They also help subscribers quickly digest the key elements of your message, helping to distinguish important information from the rest of your email copy.

Using list tags for bulleted lists

Here at Litmus, we use list tags to code HTML email bullet points.

• <ul> indicates an unordered list, or a bulleted list of items

• <ol> indicates an ordered list, or a numbered list of items

• <li> indicates a line item in either an unordered or ordered list of items

How to get started with semantic bulleted lists

To get started with bulleted lists in your emails, you’ll need to include some basic code to make them work.

We cover the following ahead:

Unordered disc bullet

Ordered disc bullet

In this code, you’ll notice a couple of things we’ve made sure to include. One of those is identifying the specific type of bullet we’re interested in including in our list, with a defined type attribute in the <ul> and <ol> tags. For <ul>, we’ve specified a disc-style button.

For <ol>, we’ve specified “A”—so list items would be identified with A, B, C, and so on—but numbers, roman numerals, and both lower and uppercase letters can also be used in ordered lists.

Here is the full list of type attributes you can use in email:

• Unordered list type options
  • disc (read as “bullet” • )
  • circle (read as “white circle” ○ )
  • square (read as “black square” ‎■ )
• Ordered list type options
  • 1 (default decimal numeral)
  • A (uppercase alphabet)
  • a (lowercase alphabet)
  • I (uppercase roman numeral)
  • i (lowercase roman numeral)

You may have noticed: we included margin-left in both lists. That’s to make sure that the bullet points render inside of your container boundaries, rather than misaligning or not appearing at all.

Gmail considerations and workarounds

Notably, Gmail webmail (but not Gmail app for mobile) is the one client that doesn’t need margin-left to ensure the bullets render inside the correct boundaries. This means your lists will include that extra left indentation.

If you absolutely need your bulleted lists to be flush with the left margin of your container, you can reset the left margin to zero with Gmail-specific CSS, like so:

With these classes in place, we only need to add them to our HTML.

As you can see, we included the mobile responsive media query to ensure that the margin reset doesn’t affect the Gmail app on mobile. Also, please note the order in which the CSS is written. If you put the mobile-responsive CSS before the desktop CSS, then the mobile-responsive CSS will be overruled due to the cascade.

P.S. Semantic bulleted lists are naturally mobile-responsive, so that’s a win-win with accessibility benefits!

Outlook considerations and workarounds

Additionally, there are a few workarounds you’ll need to make bullet points render correctly in Outlook.

In Outlook, lists tend to have large margins. To work around this, wrap your code in <div>. This eliminates the margins and helps the bulleted lists flow within the confines of the email. (Unfortunately, this workaround will only work on unordered list, and not ordered ones.)

First, add this to your CSS head:

The mso-special-format class ensures that the bullets show up the correct size instead of super tiny. The margin-left class on the li moves the bullet points over, while the forDumbOutlooks class moves the <div> containing everything to the left to offset the margin-left on the li. Then, wrap the whole thing in a MSO conditional statement so it doesn’t show up anywhere else.

Next, add the HTML:

This styling isn’t quite right yet, though. If you notice, the global font styling we set earlier for each list was overridden by the styling we added to the bullets themselves. You only want to update the styling of the bullet, not the copy that comes after it. This is a quick fix—simply wrap the text of the list items in a styled <span> tag to reset the copy to its intended font style.

It’s not nearly as difficult as you think to include nested lists without tables. You simply need to code your nested list as you would normally, but ensure that it’s nested within a <li> tag instead of outside, otherwise you might see some rogue bullets appear in email clients like Gmail IMAP (GANGA). Here’s how that code would look:

Quick note: nested lists inherit the global styling of the parent lists, so you don’t need any additional spacing or styling to keep the lists consistent. However, spacing can still be tricky—surprise, surprise—in Outlook. Here are our tips to make sure you keep your spacing the way you want it.

Horizontal spacing

For horizontal spacing, add padding-left: #px; with the correct dimension to the <li> tag. This will help control spacing between the bullet and the copy.

Note this unfortunately, doesn’t work in Outlook for Windows.

Reminder: don’t forget to include the margin-left pointer mentioned at the beginning of this guide to ensure your bullets don’t render far away from your copy.

Vertical spacing

For vertical spacing, add margin-bottom: #px; with the correct dimension to the <li> tag. This will help increase vertical spacing between each list item.

Using custom symbols or images for bullets

Want to take your bullet points up a notch? Try using images or icons instead!

Unlike styling your bullets to a custom size or font, custom symbol and image bullets aren’t as universally supported across email clients, often leading to images being blocked in email.  Be sure to proceed with caution and use a tool like Litmus Email Previews to make sure your lists render well across your subscribers’ devices.

For our code, we’ll change our bulleted lists to include hearts, as well as our very own Litmus logo for some great email branding.

Metadata

CSS

Symbol bullet code

Image bullet HTML

Why the table method isn’t ideal for accessibility

You’ve heard us say that you should avoid using tables when coding bulleted lists. But why?

An estimated 7.3 million have a vision disability in the U.S. alone. Your subscribers might be using screen readers because they have a disability that requires it, or because they want to hear what emails they have while brushing their teeth in the morning.

When it comes to your email’s content hierarchy, we advocate for the use of semantic tags as much as possible—that is, meaningful and intentional use of <h1>, <h2>, and so on, versus generic <p> and <span> tags. But when it comes to semantic tags, one sticking point for email developers is the bulleted or unordered list.

Screen readers have trouble reading out emails with tables. If a screen reader identifies a table in your email’s code, it will read out loud as one. It will literally tell you about each and every row and column’s position and content. This can be a bit much for subscribers listening to your emails, and it certainly makes it hard for them to glean the intended content.

Let’s look at this bulleted list:

Coded with tables, it would sound a little like this:

That’s… not great, is it? When it comes to bulleted lists, many developers solve the visual issue by coding faux bulleted lists in tables. But if you knew those tables sounded like that, would you continue to code your lists that way?

Unlike tables, <ul>, <ol>, and <li> tags are much easier for a screen reader to understand.

When a screen reader sees these tags in an email it’s reading out loud, it will read this to your subscribers:

• To begin a list, it will tell you how many items there are in the list.
• It will describe the type of bullet used to denote each list item, from the following:
  • Unordered Lists: “bullet” for type=”disc”, “white bullet” for type=”circle”, “black square” for type=”square”
  • Ordered Lists: the associated alphanumeric character or Roman numeral (For example: “a”, “2”, “IV”)
• To end a list, it will say “out of list”

For example, here’s an accessible bulleted list, read by a screen reader:

That sounds much better than hearing a whole bunch of rows and columns, doesn’t it? It’s much easier to understand content in lists when it’s read out loud in the same way you would read the list inside your head, as if you were looking at the email itself.

How to make table lists accessible

But what if you have to use lists in tables? Fear not: we’ve got a solution to make them more accessible.

Let’s take a look at one of our recent emails. The following list is done with a table:

We used images (the emojis) for bullets and gave them an ALT text of “bullet” so it says “bullet” before each item. We’ve also included aria-role="list" and aria-role="listitem" to add some context for screenreaders so it read it as a list.

Here’s the code:

Ready to make your lists bulletproof?

Motivated to make your email’s bulleted list accessible and want to make sure it renders well across email clients and devices? Using a tool like Litmus Email Previews will help you ensure your bullets in the email are bulletproof.

Plus, Litmus’ accessibility checks t help you instantly see whether your emails follow key accessibility best practices and get actionable advice on how you can make your emails more inclusive.

What’s more: Visual Impairment Filters are now available in Litmus, designed to make your email design experience inclusive for all subscribers.

Originally published on July 8, 2019, by Alice Li. Last updated July 14, 2023.