The Ultimate Guide to Bulleted Lists in HTML Email

[ 0 By

Bulleted lists can be incredibly useful for content hierarchy. They allow subscribers to quickly and easily read key points in your email and can set important information apart from the rest of your content. 

But like so often in email development, something that sounds so simple—adding a bulleted list can’t be rocket science, can it?—turns out to be trickier than you might think. Not all email clients render bulleted lists the same way. So some developers just avoid using bulleted lists altogether or use tables to force them into shape—a tactic that can cause big headaches for subscribers using screen readers.

If you’re looking to include bulleted lists in your emails in a way that makes them accessible and bulletproof across email clients, we have the fix for you.

Using list tags for bulleted lists

Here at Litmus we use list tags when we code bulleted lists in our emails:

  • <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

If implementing list tags in your emails is something you’re interested in, read on!

How to get started with semantic bulleted lists

To get started with bulleted lists in your emails, here’s the minimum code you need to make them work.


<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
    <li>
        Unordered Disc Bullet
    </li>
</ul>

<ol style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li>
        Ordered Uppercase Alphabet Bullet
    </li>
</ol>

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 and both lower and upper case letters and roman numerals can also be used in ordered lists. Here is the full list of type attribute options that 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)

There are a couple of things of note about how we’ve styled the margin in these lists. We’ve also included “margin-left” in both lists. That’s to make sure that the bullets render inside of your container boundaries rather than misaligning or not appearing at all.

Gmail Considerations

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, which 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 code like so:

<head> CSS


u + .body .glist { margin-left: 0 !important; }

@media only screen and (max-width: 640px) {
  u + .body .glist { margin-left: 25px !important; }
}

HTML


<body class="body">
    <ul class="glist" style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
        <li>
            Unordered Disc Bullet
        </li>
    </ul>

    <ol class="glist" style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
        <li>
            Ordered Uppercase Alphabet Bullet
        </li>
    </ol>
</body>

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.

PS: Semantic bulleted lists are naturally mobile-responsive, so that’s a win-win with the accessibility benefits!

Styling your bullets

If you think you need to keep your bulleted lists simple (we’re thinking black, round bullets or just 1, 2, 3), you’re wrong! You can do virtually anything to bullets that you can do to text in emails. Do you want to change the color to match your brand’s style guide? Go ahead. Do you have an ordered list and want to use a custom font to match the rest of your email? You definitely can and should. For any list you can change the size and color of your bullets—and for ordered lists, you can change the font and bold or italicize your numbers or letters, too.

Let’s see what some of that styling does to our original code from earlier.


<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        Unordered, Colored, Enlarged Disc Bullet
    </li>
</ul>

<ol style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
    </li>
</ol>

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.


<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        <span style="color:#495055; font-size:16px; line-height:22px;">
            Unordered, Colored, Enlarged Disc Bullet
        </span>
    </li>
</ul>

<ol style="margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
        </span>
    </li>
</ol>

Much better—now you can have styled semantic bulleted lists without compromising the styling of your listed content.

Nesting your lists

Now that you know how to include one semantic bulleted list in your email, how about a nested list?

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:


<ul style="margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;" align="left" type="disc">
    <li style="color: #F1736A; font-size:22px; line-height:22px;">
        <span style="color:#495055; font-size:16px; line-height:22px;">
            Unordered, Colored, Enlarged Disc Bullet
        </span>
        <ul type="square">
            <li style="color: #F1736A; font-size:22px; line-height:22px;">
                <span style="color:#495055; font-size:16px; line-height:22px;">
                    Unordered, Colored, Enlarged Square Bullet
                </span>
            </li>
        </ul>
    </li>
</ul>

<ol style="margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;" align="left" type="A">
    <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
        <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet
        </span>
        <ol type="1">
            <li style="font-family: Times, serif; font-weight:bold; font-style: italic;">
                <span style="font-family: Arial, sans-serif; font-weight: normal; font-style: normal;">
                    Ordered, Uppercase, Serif, Bold, Italicized Numeric Bullet
                </span>
            </li>
        </ol>
    </li>
</ol>

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:

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. Plus, 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.

Note: Unfortunately, this does not work for Outlook for Windows.

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

You’ve styled your bullets—now 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, so 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 custom imagery.

<head> Metadata


<meta name=Generator content="Microsoft Word 15 (filtered medium)">

<head> CSS


<style type="text/css">
  @list heart {
    mso-level-number-format: bullet;
    mso-level-text: ♥;
  }
  @media screen and ( -webkit-min-device-pixel-ratio:0 ) {
    .heart { list-style: none; }
    .heart:before {
      content: '♥';
      margin-left: -1.4em;
    }
    .heart span {
      padding-left: .5em;
    }
    [class="x_heart"] { list-style: initial !important; }
    [data-outlook-cycle] .heart { list-style: initial !important; }
  }
</style>

HTML


<li class="heart" style="mso-list:heart;">
  <span>
    Heart Bullet
  </span>
</li>

Works in

  • Apple Mail
  • iPad
  • iPhone
  • Outlook for Mac (all)
  • Outlook for Windows (2013, 2016, 2019)
  • Windows 10
  • Android 4.4
  • Samsung Mail

Falls back to a normal disc bullet in:

  • Outlook for Windows (2007, 2010)
  • Gmail app
  • Outlook app
  • Outlook.com
  • AOL
  • Gmail
  • Yahoo

And the code using our Litmus logo:


<li style="list-style-image: url('https://campaigns.litmus.com/_email/2019/09_sep/201909xx_Ultimate-Bulleted/images/litmus-icon.png');">
    Image Bullet
</li>

Works in:

  • Apple Mail
  • iPad
  • iPhone
  • Outlook for Mac (all)
  • Android 4.4
  • Gmail App IMAP (GANGA)
  • Samsung Mail
  • AOL
  • Yahoo

Falls back to a normal disc bullet in:

  • Outlook for Windows (2007, 2010, 2013, 2016, 2019)
  • Windows 10
  • Gmail app
  • Outlook app
  • Outlook.com
  • Gmail

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?

You may or may not know that screen readers are rising dramatically in popularity—275 million people are predicted to use them by 2023. 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.

Ready to make your bulleted lists accessible?

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 bulleted list is bulletproof. Plus, our new accessibility checks in Litmus Checklist 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.

Learn more →