Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design HTML Email Design Coding HTML Email Building Common Design Patterns

Posted by Josh Hicks
Josh Hicks
14,146 Points

Is there a reason he's not using <p> for the text in the email?

I noticed that he is using things like h1 or h3 tags for text, but no tag at all for the paragraph text which would normally use a <p>. Is there a reason for this?

Matthew Greenberg
Matthew Greenberg
8,173 Points

To my understanding, paragraph tags are optional and have very mixed support in regards to styling in different email clients.

Anything optional should be omitted if possible to keep file size down.

Best of luck.

-Matt

Josh Hicks
Josh Hicks
14,146 Points

Matt,

That makes sense to me. I'm guessing that p tags are only optional for HTML Emails and not regular websites too? I'll have to do more research on that. I've also heard about a technique of not using any closing tags at all in html to reduce file size. Have you heard of or used that technique?

thanks

Matthew Greenberg
Matthew Greenberg
8,173 Points

I wouldn't omit p tags in my actual HTML documents. One reason is if you use a css reset, It has no way to target the text that is being displayed. so default styles will apply to the text since it has no attribute to link the css to the text.

You can leave off the closing tag blackslash on tags that dont require a closing tag like the input attribute

<input type="text" />
// shorten to this
<input type="text">

So i guess you save one char, not much but could add up.

2 Answers

Anthony O'Neill
Anthony O'Neill
8,186 Points
Anthony O'Neill
Anthony O'Neill
8,186 Points

Hey,

I'm an email designer for an email marketing company (we do exist! :P), and our main reason for omitting < p > tags is that Outlook 2007, 2010, and 2013 convert your HTML email into VML (vector markup language) as it uses the Microsoft Word rendering engine. Most elements are converted to a reasonable equivalent however < p > tags are treated as < div >'s which can bring up all sorts of issues with padding and margins. I would recommend you use plain text and style it like so using < br / > tags for line breaks;

<td align="center" valign="top" style="font-size:12px;color:#000000;">
Hello World!
<br />
Regards,
<br />
Anthony
</td>
geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Hey Anthony O'Neill , I see you are experienced with HTML emails, I already knew I should avoid using p tags, but I didn't know all the details and all reasons. So really, thank you.

However, there is something bothering me with the first videos I've just seen. That's the use of classes and ID. Why ? Because where I work I sometimes have to create HTML e-mails. Nevertheless, I was told to not use classes and ID ! And instead, all the time use inline styles, to be sure the e-mail is well supported on most e-mail clients and etc...

Would you mind giving your opinion on this ?

Thank you.

Anthony O'Neill
Anthony O'Neill
8,186 Points
Anthony O'Neill
Anthony O'Neill
8,186 Points

Hi geoffrey, sorry for taking so long to get back to you.

I can think of two reasons for using a class or ID in an HTML email. The first and most popular reason is for responsive design for mobile devices. In case you're not familiar with that process it involves targeting class names with CSS within a CSS media query. That method is widely supported on mobile devices as they tend to use quite modern renderers, however the Gmail app ignores them as does Gmail for desktop.

The second reason is a preprocessor tool known as an Inliner. As some coders prefer to use styles sheets rather than inline styles to avoid repeating themselves the inliner will grab all of the styles and add them inline styles removing the class in the process. Here is a popular one by Zurb Ink Inliner

I hope this helps, but just let me know if you want any clarification.

Thank you