Log In / Sign Up

Components

Layouts

Templates

HTML Email Lists

Bullet points and numbered lists help break up content and make it easier to scan. But in HTML emails, default list styles are often stripped or inconsistent—so styling lists properly is key.

✅ Best Practices

  • Use <ul> for bullet lists and <ol> for numbered lists
  • Style with inline CSS—especially for font, spacing, and indentation
  • Use <li> for each item and avoid nesting lists too deeply
  • Test in Gmail and Outlook, which often ignore default list styling

⚙️ Sample List Markup (Copy & Paste)

Unordered List (Bullets)

See the Pen List Markup by Email Code Camp (@EmailCodeCamp) on CodePen.

Ordered List (Numbers)

See the Pen Ordered List by Email Code Camp (@EmailCodeCamp) on CodePen.

🪺 Nested List Markup (Copy & Paste)

See the Pen Nested List by Email Code Camp (@EmailCodeCamp) on CodePen.

✅ Why This Works in Email:

  • Tables handle layout consistently across all major email clients
  • Inline styles ensure list formatting isn’t stripped
  • Nesting is controlled with padding-left and simple styling—nothing complex or deep