How to develop semantically correct lists. A plus link View in your browser heading level 1 Type E: heading level 2 09. The List Issue: Part One less ol greater less ul greater less li greater Ordered list tag. Unordered list tag. List item tag. Lists are used to display content that’s intended to be quickly and easily digested by the subscriber. However, in a desire to control the way they’re rendered across email and webmail clients, they’re often developed in a way that is not semantically correct. In this issue, I’ll look at how you can develop lists in a way that is semantically correct, at the way email and webmail clients render them by default, and how you can restyle them so that they render in a way that works for your email. heading level 3 Developing a semantically correct list. To develop a semantically correct list, first wrap each of your list items within a pair of list item tags ( less li greater ). Then wrap your list items within a pair of unordered list tags ( less ul greater ), to create an unordered list, or a pair of ordered list tags ( less ol greater ), to create an ordered list. heading level 4 HTML less ul greater less li greater List Item One less slash li greater less li greater List Item Two less slash li greater less li greater List Item Three less slash li greater less slash ul greater An unordered list, developed in a way that is semantically correct. list with 3 items bullet List Item One bullet List Item Two bullet List Item Three out of list An unordered list. list with 3 items 1. List Item One 2. List Item Two 3. List Item Three out of list An ordered list. heading level 3 The way email and webmail clients render lists by default. Email and webmail clients apply their own styles to lists, the most common being padding:0 0 0 40px; , which they apply to less ul greater and less ol greater tags, rendering a left indent on a list, and margin:15px 0 15px 0 , which they apply to less ul greater and less ol greater tags, rendering spacing above and below a list. Gmail also applies margin:0 0 0 15px; to each less li greater tag, rendering a 55px left indent. Yahoo! Mail applies margin:0; to less ul greater and less ol greater tags, rendering no spacing above and below a list, and also renders each list marker as a circle, rather than a disc. Here are some more examples of the styles that email and webmail clients apply to less ol greater , less ul greater and less li greater tags by default: table with 5 rows and 2 columns row 1 Apple Mail mac OS, Apple Mail i OS column 1 through 2 Apple Mail mac OS, Apple Mail i OS row 2 through 3 Apple Mail mac OS, Apple Mail i OS column 1 ul, ol row 2 Apple Mail mac OS, Apple Mail i OS column 2 padding:0 0 0 40px; row 3 Apple Mail mac OS, Apple Mail i OS column 1 margin:15px 0 15px 0; row 4 through 5 li row 4 Apple Mail mac OS, Apple Mail i OS column 2 padding:0; row 5 Apple Mail mac OS, Apple Mail i OS column 1 margin:0; out of table Default styling applied to lists on Apple Mail mac OS, Apple Mail i OS. table with 5 rows and 2 columns row 1 Gmail: Safari, Firefox, Chrome, Explorer column 1 through 2 Gmail: Safari, Firefox, Chrome, Explorer row 2 through 3 Gmail: Safari, Firefox, Chrome, Explorer column 1 ul, ol row 2 Gmail: Safari, Firefox, Chrome, Explorer column 2 padding:0 0 0 40px; row 3 Gmail: Safari, Firefox, Chrome, Explorer column 1 margin:15px 0 15px 0; row 4 through 5 li row 4 Gmail: Safari, Firefox, Chrome, Explorer column 2 padding:0; row 5 Gmail: Safari, Firefox, Chrome, Explorer column 1 margin:0 0 0 15px; out of table Default styling applied to lists on Gmail. table with 5 rows and 2 columns row 1 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 1 through 2 Yahoo! Mail: Safari, Firefox, Chrome, Explorer row 2 through 3 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 1 ul, ol row 2 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 2 padding:0 0 0 40px; row 3 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 1 margin:0; row 4 through 5 li row 4 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 2 padding:0; row 5 Yahoo! Mail: Safari, Firefox, Chrome, Explorer column 1 margin:0; out of table Default styling applied to lists on Yahoo! Mail. table with 5 rows and 2 columns row 1 AOL Mail: Safari, Firefox, Chrome, Explorer column 1 through 2 AOL Mail: Safari, Firefox, Chrome, Explorer row 2 through 3 AOL Mail: Safari, Firefox, Chrome, Explorer column 1 ul, ol row 2 AOL Mail: Safari, Firefox, Chrome, Explorer column 2 padding:0 0 0 40px; row 3 AOL Mail: Safari, Firefox, Chrome, Explorer column 1 margin:15px 0 15px 0; row 4 through 5 li row 4 AOL Mail: Safari, Firefox, Chrome, Explorer column 2 padding:0; row 5 AOL Mail: Safari, Firefox, Chrome, Explorer column 1 margin:0; out of table Default styling applied to lists on AOL Mail. table with 5 rows and 2 columns row 1 Outlook dot com: Safari, Firefox, Chrome, Explorer column 1 through 2 link Outlook dot com : Safari, Firefox, Chrome, Explorer row 2 through 3 Outlook dot com: Safari, Firefox, Chrome, Explorer column 1 ul, ol row 2 Outlook dot com: Safari, Firefox, Chrome, Explorer column 2 padding:0 0 0 40px; row 3 Outlook dot com: Safari, Firefox, Chrome, Explorer column 1 margin:15px 0 15px 0; row 4 through 5 li row 4 Outlook dot com: Safari, Firefox, Chrome, Explorer column 2 padding:0; row 5 Outlook dot com: Safari, Firefox, Chrome, Explorer column 1 margin:0; out of table Default styling applied to lists on link Outlook dot com dot table with 11 rows and 2 columns row 1 Outlook 2007, 2010, 2013, 2016: Explorer column 1 through 2 Outlook 2007, 2010, 2013, 2016: Explorer row 2 through 3 Outlook 2007, 2010, 2013, 2016: Explorer column 1 ul row 2 Outlook 2007, 2010, 2013, 2016: Explorer column 2 padding:0; row 3 Outlook 2007, 2010, 2013, 2016: Explorer column 1 margin:0 0 0 40px; row 4 through 5 ol row 4 Outlook 2007, 2010, 2013, 2016: Explorer column 2 padding:0; row 5 Outlook 2007, 2010, 2013, 2016: Explorer column 1 margin:0 0 0 48px; row 6 through 7 li row 6 Outlook 2007, 2010, 2013, 2016: Explorer column 2 padding:0; row 7 Outlook 2007, 2010, 2013, 2016: Explorer column 1 margin:0; row 8 through 9 li (first list item) row 8 Outlook 2007, 2010, 2013, 2016: Explorer column 2 padding:0; row 9 Outlook 2007, 2010, 2013, 2016: Explorer column 1 margin:19px 0 0 0; row 10 through 11 li (last list item) row 10 Outlook 2007, 2010, 2013, 2016: Explorer column 2 padding:0; row 11 Outlook 2007, 2010, 2013, 2016: Explorer column 1 margin:0 0 15px 0; out of table Default styling applied to lists on Outlook 2007, 2010, 2013, 2016 (Explorer). The way email and webmail clients render lists by default may not be how you would like them displayed in your email. If not, you’ll have to restyle the styles on your less ul greater , less ol greater and less li greater tags. heading level 4 The left indent By default, the left indent is the distance between the left edge of the less td greater or less div greater containing your text, and the first character of your list item – not the list marker. graphic Indent. heading level 3 Restyling the styles on your less ul greater , less ol greater and less li greater tags. Except when developing lists for some versions of Outlook (which I’ll come to in part two), you can define your lists left indent by applying padding left inside your opening less ul greater and less ol greater tags, and the spacing above and below your list by applying margin top and margin bottom inside your opening less ul greater and less ol greater tags. The margin top and margin bottom you apply inside each of your opening less li greater tags defines the spacing above and below each of your list items. In this example, the less ul greater is styled with padding:0 0 0 20px; and margin:0 , the first two less li greater tags are styled with margin:0 0 10px 0 , and the last less li greater tag is styled with margin:0 : heading level 4 CSS less ul style equals padding:0 0 0 20px; margin:0 greater less li style equals margin:0 0 10px 0 greater List Item One less slash li greater less li style equals margin:0 0 10px 0 greater List Item Two less slash li greater less li style equals margin:0 greater List Item Three less slash li greater less slash ul greater Restyling the ul tag, using padding to define the lists left indent and margin to define the spacing above and below the list. Restyling the first two li tags to define the spacing below each list item, and restyling the third li tag to restyle Gmail default styling. list with 3 items bullet List Item One bullet List Item Two bullet List Item Three out of list The restyled list. In this example, the less ul greater is styled with padding:0 0 0 40px; and margin:0 , the first two less li greater tags are styled with margin:0 0 5px 0 , and the last less li greater tag is styled with margin:0 : heading level 4 CSS less ul style equals padding:0 0 0 40px; margin:0 greater less li style equals margin:0 0 5px 0 greater List Item One less slash li greater less li style equals margin:0 0 5px 0 greater List Item Two less slash li greater less li style equals margin:0 greater List Item Three less slash li greater less slash ul greater Restyling the ul tag, using padding to define the lists left indent and margin to define the spacing above and below the list. Restyling the first two li tags to define the spacing below each list item, and restyling the third li tag to restyle Gmail default styling. list with 3 items bullet List Item One bullet List Item Two bullet List Item Three out of list The restyled list. As you’ve seen so far, you can develop lists in a way that is semantically correct, and so that they render in a way that works for your email. In part two, I’ll look at some more restyling techniques. black square Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please link email your thoughts, suggestions and questions dot Thank you for subscribing! content info landmark Beyond the Envelope Trademark Copyright Paul Airy, 2018 link plus 44 (0) 7962 177 477 (International) link 07962 177 477 (UK) at Paul Airy link Change your preferences link Unsubscribe If you want to link resubscribe , you know where to reach me! link graphic Tweet