{"id":3642,"date":"2023-07-19T12:00:00","date_gmt":"2023-07-19T16:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email\/"},"modified":"2025-06-24T11:11:10","modified_gmt":"2025-06-24T15:11:10","slug":"the-ultimate-guide-to-bulleted-lists-in-html-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email","title":{"rendered":"The Ultimate Guide to Bullet Points in HTML Email"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_3078864cec9bdbd1277b9f4f566a08f6\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Key Takeaways<\/h3>\n<ul>\n<li>Using semantic HTML list tags to create bullet points that are both accessible and easy to scan across devices and screen readers.<\/li>\n<li>Avoiding table-based bullets that disrupt screen reader flow, helping you maintain a better experience for visually impaired users.<\/li>\n<li>Styling bullet points with custom fonts, colors, or icons to match your brand while keeping the list content readable and consistent.<\/li>\n<li>Fixing Gmail and Outlook quirks with targeted CSS strategies to ensure bullet alignment and formatting render correctly everywhere<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In the world of <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/foundations-of-email-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">email design<\/span><\/a><span style=\"font-weight: 400;\">, a seemingly straightforward task\u2014like adding a bulleted list to an email\u2014can actually be quite complicated. That\u2019s because bullet points will render differently depending on your subscribers\u2019 email clients. (Fun fact: there\u2019s over <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-is-email-rendering-so-complex\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">300,000 potential ways an email can render<\/span><\/a><span style=\"font-weight: 400;\">.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a workaround, we often see email marketers:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Resorting to tables to maintain consistent formatting, or<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoiding bullet points altogether.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">While these are considered \u201cfixes,\u201d they aren\u2019t accessible and should only be thought of as temporary solutions. Why? Because both approaches create difficulties for subscribers who rely on <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-does-your-email-sound\" target=\"_blank\" rel=\"noopener\">screen readers<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, what\u2019s an email marketer to do? If you\u2019re looking for an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">accessible<\/span><\/a><span style=\"font-weight: 400;\"> fix to bullet points in email, you\u2019re in the right place.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this guide, we\u2019ll share everything you need to know about bulleted lists in email. Read on to learn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#benefits\"><span style=\"font-weight: 400;\">The benefits of bullet points in email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#listtags\"><span style=\"font-weight: 400;\">Using list tags<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#semantic\"><span style=\"font-weight: 400;\">Getting started with semantic bulleted lists<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#gmail\"><span style=\"font-weight: 400;\">Gmail considerations and workarounds<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#outlook\"><span style=\"font-weight: 400;\">Outlook considerations and workarounds<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#nested\"><span style=\"font-weight: 400;\">Nested lists<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#custom\"><span style=\"font-weight: 400;\">Custom symbols and images<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#not-ideal\"><span style=\"font-weight: 400;\">Why the table method isn\u2019t ideal for accessibility<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#accessible\"><span style=\"font-weight: 400;\">How to make table lists accessible<\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"benefits\"><span style=\"font-weight: 400;\">The benefits of HTML bullet points in email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">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 <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/email-copywriting-kit\/\"><span style=\"font-weight: 400;\">email copy<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2 id=\"listtags\"><span style=\"font-weight: 400;\">Using list tags for bulleted lists<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Here at Litmus, we use list tags to code HTML email bullet points.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><code>&lt;ul&gt;<\/code><\/span><span style=\"font-weight: 400;\"> indicates an unordered list, or a bulleted list of items<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><code>&lt;ol&gt;<\/code> <\/span><span style=\"font-weight: 400;\">indicates an ordered list, or a numbered list of items<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><code>&lt;li&gt;<\/code> <\/span><span style=\"font-weight: 400;\">indicates a line item in either an unordered or ordered list of items<\/span><\/li>\n<\/ul>\n<h2 id=\"semantic\"><span style=\"font-weight: 400;\">How to get started with semantic bulleted lists<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To get started with bulleted lists in your emails, you\u2019ll need to include some basic code to make them work.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We cover the following ahead:<\/span><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/1_image4.png\" \/>\n<h3><span style=\"font-weight: 400;\">Unordered disc bullet<\/span><\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;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\">\n    &lt;li>\n        Unordered Disc Bullet\n    &lt;\/li>\n&lt;\/ul><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_3d3253895c6fa6c118d09d4d395faa5d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><span style=\"font-weight: 400;\">Ordered disc bullet<\/span><\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;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\">\n    &lt;li>\n        Ordered Uppercase Alphabet Bullet\n    &lt;\/li>\n&lt;\/ol><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_5c9405c3693ddae1da10cd1e37088acb\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">In this code, you\u2019ll notice a couple of things we\u2019ve made sure to include. One of those is identifying the specific type of bullet we\u2019re interested in including in our list, with a defined type attribute in the <\/span><span style=\"font-weight: 400;\"><code>&lt;ul&gt;<\/code><\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\"><code>&lt;ol&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tags. For <\/span><span style=\"font-weight: 400;\"><code>&lt;ul&gt;<\/code><\/span><span style=\"font-weight: 400;\">, we\u2019ve specified a disc-style button.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For <\/span><span style=\"font-weight: 400;\"><code>&lt;ol&gt;<\/code><\/span><span style=\"font-weight: 400;\">, we\u2019ve specified \u201cA\u201d\u2014so list items would be identified with A, B, C, and so on\u2014but numbers, roman numerals, and both lower and uppercase letters can also be used in ordered lists.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is the full list of type attributes you can use in email:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unordered list type options<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">disc (read as \u201cbullet\u201d \u2022 )<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">circle (read as \u201cwhite circle\u201d \u25cb )<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">square (read as \u201cblack square\u201d \u200e\u25a0 )<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ordered list type options<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">1 (default decimal numeral)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">A (uppercase alphabet)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">a (lowercase alphabet)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">I (uppercase roman numeral)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">i (lowercase roman numeral)<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You may have noticed: we included <\/span><span style=\"font-weight: 400;\"><code>margin-left<\/code><\/span><span style=\"font-weight: 400;\"> in both lists. That\u2019s to make sure that the bullet points render <\/span><i><span style=\"font-weight: 400;\">inside<\/span><\/i><span style=\"font-weight: 400;\"> of your container boundaries, rather than misaligning or not appearing at all.<\/span><\/p>\n<figure id=\"post-24151 media-24151\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/3_image6.png\" alt=\"Example of bulleted lists in email showing margin-left\" width=\"620\" height=\"90\" \/><\/figure>\n<h2 id=\"gmail\"><span style=\"font-weight: 400;\">Gmail considerations and workarounds<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Notably, Gmail webmail (but not Gmail app for mobile) is the one client that doesn\u2019t need <\/span><span style=\"font-weight: 400;\"><code>margin-left<\/code><\/span><span style=\"font-weight: 400;\"> to ensure the bullets render inside the correct boundaries. This means your lists <\/span><i><span style=\"font-weight: 400;\">will<\/span><\/i><span style=\"font-weight: 400;\"> include that extra left indentation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">u + .body .glist { margin-left: 0 !important; }\n \n@media only screen and (max-width: 640px) {\n  u + .body .glist { margin-left: 25px !important; }\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b86ce27e7b5252df4bf7ee00a984d21d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">With these classes in place, we only need to add them to our HTML.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;body class=\"body\">\n    &lt;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\">\n        &lt;li>\n            Unordered Disc Bullet\n        &lt;\/li>\n    &lt;\/ul>\n    &lt;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\">\n        &lt;li>\n            Ordered Uppercase Alphabet Bullet\n        &lt;\/li>\n    &lt;\/ol>\n&lt;\/body><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_bde117456359e00eeeda7be6ca45feed\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">As you can see, we included the mobile responsive media query to ensure that the margin reset doesn\u2019t affect the Gmail app on mobile. Also, <\/span><strong>please note the order in which the CSS is written<\/strong><span style=\"font-weight: 400;\"><strong>.<\/strong> If you put the mobile-responsive CSS <\/span><i><span style=\"font-weight: 400;\">before<\/span><\/i><span style=\"font-weight: 400;\"> the desktop CSS, then the mobile-responsive CSS will be overruled due to the cascade.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">P.S. Semantic bulleted lists are naturally mobile-responsive, so that\u2019s a win-win with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">accessibility<\/span><\/a><span style=\"font-weight: 400;\"> benefits!<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image10.gif\" alt=\"Example of bulleted lists in email as a GIF, showing how they respond on mobile\" width=\"600\" height=\"706\" \/>\n<h2 id=\"outlook\"><span style=\"font-weight: 400;\">Outlook considerations and workarounds<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Additionally, there are a few workarounds you\u2019ll need to make bullet points render correctly in <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Outlook<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In Outlook, lists tend to have large margins. To work around this, wrap your code in <\/span><span style=\"font-weight: 400;\"><code>&lt;div&gt;<\/code><\/span><span style=\"font-weight: 400;\">. 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.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, add this to your CSS head:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;!--[if (gte mso 9)|(IE)]>\n&lt;style>\nli {\nmargin-left:27px !important;\nmso-special-format: bullet;\n}\n.forDumbOutlooks {\nmargin-left: -25px !important;\n}\n&lt;\/style>\n&lt;![endif]--><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_723bf21c1b67e27384b5bfc51ddbef8f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">The <code>mso-special-format<\/code> 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 <code>forDumbOutlooks<\/code> class moves the <code>&lt;div&gt;<\/code> 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&#8217;t show up anywhere else.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, add the HTML:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;tr>\n    &lt;td align=\"left\" valign=\"top\">\n            &lt;div class=\"forDumbOutlooks\">\n                &lt;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\">\n                    &lt;li>Fusce et ullamcorper magna. Sed non ornare enim. Duis libero neque, porta at feugiat eget, vulputate pharetra metus.                    &lt;\/li>\n                    &lt;li>Nam non leo eu justo lobortis porttitor id id metus.\n                    &lt;\/li>\n                    &lt;li>In scelerisque, sapien nec aliquam elementum, augue nisl sodales nulla, eget mollis lorem lectus ut sapien.\n                    &lt;\/li>\n                &lt;\/ul>\n            &lt;\/div>\n    &lt;\/td>\n&lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_44082accd6b2efd0f4dd017f71551824\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<figure id=\"post-24153 media-24153\" class=\"alignnone\">\n<h2><span style=\"font-weight: 400;\">How to style HTML bullets in email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve established HTML email bullet points can be a bit\u2026 complicated, does that mean you need to keep things simple? (We\u2019re thinking black, round bullets, or just 1, 2, 3.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The answer: absolutely not! Good news: the sky\u2019s the limit with bullet points.\u00a0 You can do virtually anything to bullets that you can do to text in emails.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Do you want to change the color to match your brand\u2019s style guide? Go ahead. Do you want to use a custom font or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web font<\/span><\/a><span style=\"font-weight: 400;\"> 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\u2014and for ordered lists, you can change the font and bold or italicize your numbers or letters, too.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s see what some of that styling does to our original code from earlier.<\/span><\/figure>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;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\">\n    &lt;li style=\"color: #F1736A; font-size:22px; line-height:22px;\">\n        Unordered, Colored, Enlarged Disc Bullet\n    &lt;\/li>\n&lt;\/ul>\n \n&lt;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\">\n    &lt;li style=\"font-family: Times, serif; font-weight:bold; font-style: italic;\">\n        Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet\n    &lt;\/li>\n&lt;\/ol><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_181de1aec1477639f97e98a8348128e1\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<figure id=\"post-24153 media-24153\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image8.png\" alt=\"Example of bulleted lists in email, showing a bullet followed by stylized bullet\" width=\"600\" height=\"47\" \/><\/figure>\n<p><span style=\"font-weight: 400;\">This styling isn\u2019t 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 <\/span><i><span style=\"font-weight: 400;\">bullet<\/span><\/i><span style=\"font-weight: 400;\">, not the copy that comes after it. This is a quick fix\u2014simply wrap the text of the list items in a styled <\/span><span style=\"font-weight: 400;\"><code>&lt;span&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tag to reset the copy to its intended font style.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;ul style=\"margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;\" align=\"left\" type=\"disc\">\n    &lt;li style=\"color: #F1736A; font-size:22px; line-height:22px;\">\n        &lt;span style=\"color:#495055; font-size:16px; line-height:22px;\">\n            Unordered, Colored, Enlarged Disc Bullet\n        &lt;\/span>\n    &lt;\/li>\n&lt;\/ul>\n \n&lt;ol style=\"margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;\" align=\"left\" type=\"A\">\n    &lt;li style=\"font-family: Times, serif; font-weight:bold; font-style: italic;\">\n        &lt;span style=\"font-family: Arial, sans-serif; font-weight: normal; font-style: normal;\">\n            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet\n        &lt;\/span>\n    &lt;\/li>\n&lt;\/ol><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_c717864a3358020072d709eee56df942\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<figure><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/2_image3.png\" \/><\/figure>\n<figure><span style=\"font-weight: 400;\">Much better. Now you can have styled semantic bulleted lists without compromising the styling of your listed content.<\/span><strong>Word of warning!<\/strong> <span style=\"font-weight: 400;\">You cannot change the color or font weight on ordered list bullets in Outlook for Windows. Also, using this method to style the bullet points will cause any links in the bullet points to render lower than the rest of the text in older versions of Samsung Mail. So be mindful of where your audience is opening your emails when implementing these methods.<\/span><\/figure>\n<figure>\n<h2 id=\"nested\"><span style=\"font-weight: 400;\">Nested lists in email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you know how to add semantic bulleted lists in your email, how about a <\/span><i><span style=\"font-weight: 400;\">nested<\/span><\/i><span style=\"font-weight: 400;\"> list?<\/span><\/figure>\n<figure id=\"post-24154 media-24154\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image9.png\" alt=\"Example of bulleted lists in email, showing nested bullets\" width=\"600\" height=\"96\" \/><\/figure>\n<p><span style=\"font-weight: 400;\">It\u2019s 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\u2019s nested <\/span><i><span style=\"font-weight: 400;\">within<\/span><\/i><span style=\"font-weight: 400;\"> a <\/span><span style=\"font-weight: 400;\"><code>&lt;li&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tag instead of outside, otherwise you might see some rogue bullets appear in email clients like Gmail IMAP (GANGA). Here\u2019s how that code would look:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;ul style=\"margin:0; margin-left: 25px; padding:0; font-family: Arial, sans-serif;\" align=\"left\" type=\"disc\">\n    &lt;li style=\"color: #F1736A; font-size:22px; line-height:22px;\">\n        &lt;span style=\"color:#495055; font-size:16px; line-height:22px;\">\n            Unordered, Colored, Enlarged Disc Bullet\n        &lt;\/span>\n        &lt;ul type=\"square\">\n            &lt;li style=\"color: #F1736A; font-size:22px; line-height:22px;\">\n                &lt;span style=\"color:#495055; font-size:16px; line-height:22px;\">\n                    Unordered, Colored, Enlarged Square Bullet\n                &lt;\/span>\n            &lt;\/li>\n        &lt;\/ul>\n    &lt;\/li>\n&lt;\/ul>\n&lt;ol style=\"margin:0; margin-left: 25px; padding:0; color:#495055; font-size:16px; line-height:22px;\" align=\"left\" type=\"A\">\n    &lt;li style=\"font-family: Times, serif; font-weight:bold; font-style: italic;\">\n        &lt;span style=\"font-family: Arial, sans-serif; font-weight: normal; font-style: normal;\">\n            Ordered, Uppercase, Serif, Bold, Italicized Alphabet Bullet\n        &lt;\/span>\n        &lt;ol type=\"1\">\n            &lt;li style=\"font-family: Times, serif; font-weight:bold; font-style: italic;\">\n                &lt;span style=\"font-family: Arial, sans-serif; font-weight: normal; font-style: normal;\">\n                    Ordered, Uppercase, Serif, Bold, Italicized Numeric Bullet\n                &lt;\/span>\n            &lt;\/li>\n        &lt;\/ol>\n    &lt;\/li>\n&lt;\/ol><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_970c08693ae0db7dcb870ab7e9683a63\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Quick note: nested lists inherit the global styling of the parent lists, so you don\u2019t need any additional spacing or styling to keep the lists consistent. However, spacing can still be tricky\u2014surprise, surprise\u2014in Outlook. Here are our tips to make sure you keep your spacing the way you want it.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Horizontal spacing<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For horizontal spacing, add <\/span><span style=\"font-weight: 400;\"><code>padding-left: #px;<\/code><\/span><span style=\"font-weight: 400;\"> with the correct dimension to the <\/span><span style=\"font-weight: 400;\"><code>&lt;li&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tag. This will help control spacing between the bullet and the copy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note this unfortunately, doesn\u2019t work in Outlook for Windows.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Reminder<\/strong>: don\u2019t forget to include the <\/span><span style=\"font-weight: 400;\"><code>margin-left<\/code><\/span><span style=\"font-weight: 400;\"> pointer mentioned at the beginning of this guide to ensure your bullets don\u2019t render far away from your copy.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Vertical spacing<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For vertical spacing, add <\/span><span style=\"font-weight: 400;\"><code>margin-bottom: #px;<\/code><\/span><span style=\"font-weight: 400;\"> with the correct dimension to the <\/span><span style=\"font-weight: 400;\"><code>&lt;li&gt;<\/code> <\/span><span style=\"font-weight: 400;\">tag. This will help increase vertical spacing between each list item.<\/span><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/2_image5.png\" \/>\n<h2 id=\"custom\"><span style=\"font-weight: 400;\">Using custom symbols or images for bullets<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Want to take your bullet points up a notch? Try using images or icons instead!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unlike styling your bullets to a custom size or <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\">web safe font<\/a>, custom symbol and image bullets aren\u2019t as universally supported across email clients, often leading to <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-email-image-blocking\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">images being blocked in email<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0 Be sure to proceed with caution and use an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" rel=\"noopener\" target=\"_blank\">email design tool<\/a> like Litmus Email Previews to make sure your lists render well across your subscribers\u2019 devices.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For our code, we\u2019ll change our bulleted lists to include hearts, as well as our very own Litmus logo for some great <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-need-email-brand-guidelines-and-what-to-put-in-them\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">email branding<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Metadata<\/span><\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;meta name=Generator content=\"Microsoft Word 15 (filtered medium)\"><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_b727e22711b1c4f038344718874078e6\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>CSS<\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;style type=\"text\/css\">\n  @list heart {\n    mso-level-number-format: bullet;\n    mso-level-text: \u2665;\n  }\n  @media screen and ( -webkit-min-device-pixel-ratio:0 ) {\n    .heart { list-style: none; }\n    .heart:before {\n      content: '\u2665';\n      margin-left: -1.4em;\n    }\n    .heart span {\n      padding-left: .5em;\n    }\n    [class=\"x_heart\"] { list-style: initial !important; }\n    [data-outlook-cycle] .heart { list-style: initial !important; }\n  }\n&lt;\/style><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_de5c23b5b9d40f5dcefaa38575f55bd1\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3>Symbol bullet code<\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;ul style=\"Margin:0; Margin-left: 25px; padding:0; font-family: Arial, sans-serif;\" type=\"disc\">\n  &lt;li class=\"heart\" style=\"mso-list:heart;\">\n    &lt;span>\n      Heart Bullet\n    &lt;\/span>\n  &lt;\/li>\n&lt;\/ul><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_9b1d879873daa538eacfa65fc5ae934b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<figure id=\"post-24152 media-24152\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/1_image7.png\" alt=\"Example of bulleted lists using a heart bullet\" width=\"600\" height=\"20\" \/><\/figure>\n<h3>Image bullet HTML<\/h3>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;ul style=\"Margin:0; Margin-left: 25px; padding:0; font-family: Arial, sans-serif;\" type=\"disc\">\n  &lt;li style=\"list-style-image: url('https:\/\/campaigns.litmus.com\/_email\/2019\/09_sep\/201909xx_Ultimate-Bulleted\/images\/litmus-icon.png');\">\n      Image Bullet\n  &lt;\/li>\n&lt;\/ul><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_0ece1af2b7fd8e6e774632176f365541\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<figure id=\"post-24156 media-24156\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image11.png\" alt=\"Example bulleted lists, using an image bullet\" width=\"600\" height=\"25\" \/><\/figure>\n<h2 id=\"not-ideal\">Why the table method isn\u2019t ideal for accessibility<\/h2>\n<p><span style=\"font-weight: 400;\">You\u2019ve heard us say that you should avoid using tables when coding bulleted lists. But why?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/accessibe.com\/blog\/knowledgebase\/what-are-screen-readers-and-how-they-enable-blind-people-to-surf-the-internet#:~:text=Almost%207.3%20million%20Americans%20rely,%2Dto%2Dspeech%20and%20Braille.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">estimated 7.3 million<\/span><\/a><span style=\"font-weight: 400;\"> 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When it comes to your email\u2019s content hierarchy, we advocate for the use of semantic tags as much as possible\u2014that is, meaningful and intentional use of <\/span><span style=\"font-weight: 400;\"><code>&lt;h1&gt;<\/code><\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\"><code>&lt;h2&gt;<\/code><\/span><span style=\"font-weight: 400;\">, and so on, versus generic <\/span><span style=\"font-weight: 400;\"><code>&lt;p&gt;<\/code><\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\"><code>&lt;span&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tags. But when it comes to semantic tags, one sticking point for email developers is the bulleted or unordered list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Screen readers have trouble reading out <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/html-tables-in-email-what-could-possibly-go-wrong\" target=\"_blank\">emails with tables<\/a>. If a screen reader identifies a table in your email\u2019s code, it will read out loud as one. It will literally tell you about each and every row and column\u2019s 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at this bulleted list:<\/span><\/p>\n<figure id=\"post-24147 media-24147\" class=\"alignnone\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/3_image2.png\" alt=\"Example of bulleted lists, listing out fruits\" width=\"600\" height=\"56\" \/><\/figure>\n<p>Coded with tables, it would sound a little like this:<\/p>\n<audio class=\"wp-audio-shortcode\" id=\"audio-3642-1\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/table-example.mp3?_=1\" \/><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/table-example.mp3\">https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/table-example.mp3<\/a><\/audio>\n<p><span style=\"font-weight: 400;\"><br \/>\nThat\u2019s\u2026 not <\/span><i><span style=\"font-weight: 400;\">great<\/span><\/i><span style=\"font-weight: 400;\">, 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?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unlike tables, <\/span><span style=\"font-weight: 400;\"><code>&lt;ul&gt;<\/code><\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\"><code>&lt;ol&gt;<\/code><\/span><span style=\"font-weight: 400;\">, and <\/span><span style=\"font-weight: 400;\"><code>&lt;li&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tags are much easier for a screen reader to understand.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When a screen reader sees these tags in an email it\u2019s reading out loud, it will read this to your subscribers:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To begin a list, it will tell you how many items there are in the list.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">It will describe the type of bullet used to denote each list item, from the following:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\"><strong>Unordered Lists: <\/strong>\u201cbullet\u201d for <code>type=\u201ddisc\u201d<\/code>, \u201cwhite bullet\u201d for <code>type=\u201dcircle\u201d<\/code>, \u201cblack square\u201d\u00a0for <code>type=\u201dsquare\u201d<\/code><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\"><strong>Ordered Lists:<\/strong> the associated alphanumeric character or Roman numeral (For example: \u201ca\u201d, \u201c2\u201d, \u201cIV\u201d)<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To end a list, it will say \u201cout of list\u201d<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">For example, here\u2019s an accessible bulleted list, read by a screen reader:<\/span><\/p>\n<audio class=\"wp-audio-shortcode\" id=\"audio-3642-2\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/list-example.mp3?_=2\" \/><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/list-example.mp3\">https:\/\/litmus.com\/blog\/wp-content\/uploads\/2019\/09\/list-example.mp3<\/a><\/audio>\n<p><span style=\"font-weight: 400;\"><br \/>\nThat sounds much better than hearing a whole bunch of rows and columns, doesn\u2019t it? It\u2019s much easier to understand content in lists when it\u2019s read out loud in the same way you would read the list inside your head, as if you were looking at the email itself.<\/span><\/p>\n<h2 id=\"accessible\"><span style=\"font-weight: 400;\">How to make table lists accessible<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">But what if you <\/span><i><span style=\"font-weight: 400;\">have<\/span><\/i><span style=\"font-weight: 400;\"> to use lists in tables? Fear not: we\u2019ve got a solution to make them more accessible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a look at one of our recent emails. The following list is done with a table:<\/span><\/p>\n<figure id=\"attachment_73991\" aria-describedby=\"caption-attachment-73991\" style=\"width: 1018px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-73991 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.30.12-PM.png\" alt=\"Example of Litmus' Product Pulse newsletter with accessible table lists\" width=\"1018\" height=\"928\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.30.12-PM.png 1018w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.30.12-PM-300x273.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.30.12-PM-768x700.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.30.12-PM-700x638.png 700w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><figcaption id=\"caption-attachment-73991\" class=\"wp-caption-text\">Source: Litmus&#8217; <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/subscribe\" target=\"_blank\" rel=\"noopener\">Product Pulse<\/a> newsletter<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">We used images (the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/emojis-in-subject-lines\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">emojis<\/span><\/a><span style=\"font-weight: 400;\">) for bullets and gave them an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">ALT text<\/span><\/a><span style=\"font-weight: 400;\"> of <\/span><span style=\"font-weight: 400;\"><code>\u201cbullet\u201d<\/code> <\/span><span style=\"font-weight: 400;\">so it says \u201cbullet\u201d before each item. We\u2019ve also included <\/span><span style=\"font-weight: 400;\"><code>aria-role=\"list\"<\/code><\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\"><code>aria-role=\"listitem\"<\/code><\/span><span style=\"font-weight: 400;\"> to add some context for screenreaders so it read it as a list.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-73992\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM.png\" alt=\"Example of how to make table lists accessible\" width=\"1696\" height=\"868\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM.png 1696w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM-300x154.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM-1024x524.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM-768x393.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM-1536x786.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/Screen-Shot-2023-07-13-at-4.46.31-PM-700x358.png 700w\" sizes=\"(max-width: 1696px) 100vw, 1696px\" \/>\n<p><span style=\"font-weight: 400;\">Here\u2019s the code:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;tr>\n  &lt;td align=\"left\" valign=\"top\">\n      &lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"list\">\n        &lt;tr role=\"listitem\">\n          &lt;td align=\"center\" valign=\"top\">\n            &lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/writing.png\" width=\"20\" height=\"20\" alt=\"bullet\" style=\"display: inline; margin: 0; padding: 0; vertical-align: -5px;\" border=\"0\" \/>\n          &lt;\/td>\n          &lt;td align=\"left\" valign=\"top\" style=\"padding-left: 10px;\">\n            &lt;p>&lt;strong>Subject line generator&lt;\/strong> helps boost email engagement&lt;\/p>\n          &lt;\/td>\n        &lt;\/tr>\n        &lt;tr role=\"listitem\">\n          &lt;td align=\"center\" valign=\"top\" style=\"padding-top: 30px;\">\n            &lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/speaking-head.png\" width=\"20\" height=\"20\" alt=\"bullet\" style=\"display: inline; margin: 0; padding: 0; vertical-align: -5px;\" border=\"0\" \/>\n          &lt;\/td>\n          &lt;td align=\"left\" valign=\"top\" style=\"padding: 30px 0 0 10px;\">\n            &lt;p>&lt;strong>Tone of voice&lt;\/strong> optimizes copy for any brand&lt;\/p>\n          &lt;\/td>\n        &lt;\/tr>\n        &lt;tr role=\"listitem\">\n          &lt;td align=\"center\" valign=\"top\" style=\"padding-top: 30px;\">\n            &lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/emojis\/globe-showing-americas.png\" width=\"20\" height=\"20\" alt=\"bullet\" style=\"display: inline; margin: 0; padding: 0; vertical-align: -5px;\" border=\"0\" \/>\n          &lt;\/td>\n          &lt;td align=\"left\" valign=\"top\" style=\"padding: 30px 0 0 10px;\">\n            &lt;p>&lt;strong>Language translation&lt;\/strong> translates copy in just a few clicks&lt;\/p>\n          &lt;\/td>\n        &lt;\/tr>\n      &lt;\/table>\n  &lt;\/td>\n&lt;\/tr><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_84602cfca33ed1e304a4c2574156d87b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><span style=\"font-weight: 400;\">Ready to make your lists bulletproof?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Motivated to make your email\u2019s bulleted list <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/favorite-emails-april-2023\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">accessible<\/span><\/a><span style=\"font-weight: 400;\"> and want to make sure it renders well across email clients and devices? Using a tool like <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-testing\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Litmus Email Previews<\/span><\/a><span style=\"font-weight: 400;\"> will help you ensure your bullets in the email are <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">bulletproof<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Plus, Litmus\u2019 accessibility checks <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\"><span style=\"font-weight: 400;\">t<\/span><\/a><span style=\"font-weight: 400;\"> 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.<\/span><\/p>\n<p><strong>What\u2019s more:<\/strong> <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Visual Impairment Filters<\/span><\/a><span style=\"font-weight: 400;\"> are now available in Litmus, <\/span><span style=\"font-weight: 400;\">designed to make your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\" target=\"_blank\">email design experience<\/a> inclusive for all subscribers.<\/span><\/p>\n<p><i>Originally published on July 8, 2019, by Alice Li. Last updated July 14, 2023.<\/i><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_24449d62cf0a8549d15ed9db46e7f92c\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Email Guardian is there when you can\u2019t be<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Keep your emails pixel perfect and ready to drive revenue and results with Litmus Email Guardian! Never worry about accidentally sending out broken bullet lists again. <\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tTry it now!\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!<\/p>\n","protected":false},"author":3,"featured_media":73170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[520,102],"blog_category":[10300],"class_list":["post-3642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-accessibility","tag-html","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Ultimate Guide to Bullet Points in HTML Email - Litmus<\/title>\n<meta name=\"description\" content=\"Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide to Bullet Points in HTML Email\" \/>\n<meta property=\"og:description\" content=\"Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-19T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-24T15:11:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1395\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Ultimate Guide to Bullet Points in HTML Email - Litmus","description":"Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide to Bullet Points in HTML Email","og_description":"Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!","og_url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2023-07-19T16:00:00+00:00","article_modified_time":"2025-06-24T15:11:10+00:00","og_image":[{"width":1395,"height":733,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email"},"author":{"name":"","@id":""},"headline":"The Ultimate Guide to Bullet Points in HTML Email","datePublished":"2023-07-19T16:00:00+00:00","dateModified":"2025-06-24T15:11:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png","keywords":["Email Accessibility","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email","url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email","name":"The Ultimate Guide to Bullet Points in HTML Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png","datePublished":"2023-07-19T16:00:00+00:00","dateModified":"2025-06-24T15:11:10+00:00","description":"Adding bulleted lists in emails can be trickier than you think. This guide helps you create accessible and bulletproof HTML email bullet points. Read now!","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/HTML-Bullets-Header.png","width":1395,"height":733,"caption":"illustration of an email coming out of an envelope, decorated with list tags on top of a purple blue gradient background."},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Ultimate Guide to Bullet Points in HTML Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3642"}],"version-history":[{"count":17,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3642\/revisions"}],"predecessor-version":[{"id":117996,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3642\/revisions\/117996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/73170"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3642"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3642"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}