How would you send an HTML email from Gmail or Yahoo? Is it possible to embed HTML using Gmail or Yahoo?

Gmail, Yahoo Mail, Hotmail, and Outlook all allow you to send out HTML emails. They also provide some simple tools to allow you to add styles to your text – like italics, colors, bolding, etc.

Yes – you can easily embed your own HTML inside Gmail Yahoo Mail and Hotmail!

However, as you may have already noticed, you can not just write HTML tags into your emails and expect HTML to display. Luckily for you, there is an easy solution that allows you to embed HTML into your Gmail or Yahoo mail message – we broke it down in four easy steps below. But, a word of warning: you should note that this method may not work for you – but it’s worth trying out since it’s so simple.

So, how can I send out an HTML email in Gmail, Yahoo, or Hotmail?

It’s actually quite simple – if you want to compose an email and insert your own html formatting then these are the four steps you need to take – it is essentially a copy and paste, but we wrote out all of the little details:

1. Use an html editor (like DreamWeaver, TextWrangler, Coda, or whatever you may have) and create the email in the editor. Then save the file with a “.html” extension. Where you save the file does not matter at all, but it’s probably easiest just to save the HTML file on your desktop so you can easily access it in step 2.

2. Open that html file in an internet browser – Firefox, Safari, Internet Explorer, Google Chrome, etc. If you just click on the file it should just directly open up in a browser, since your computer is smart enough to know that a “.html” file should be opened in a browser. If the file does not open directly in a browser, simply open a browser window, and then in the browser menu go to “File->Open File”, and choose the .html file.

3. In your browser menu, go to Edit, and then “Select All” or Ctrl+A ( or Command + A if you are on a Mac) to select everything that is displayed in the browser. This is the magic step that stores all the HTML onto your clipboard – so make sure you get this one right!

4. Paste (CTRL + V or Command +V) the html to the Gmail or Yahoo Mail message. Then you are done! This should work like a charm – and you should be able to see the HTML message directly in your message before you send it.

Absolute versus relative references in your HTML email

If you are using relative references to your CSS and image files then you will probably have to change those references to be absolute. What’s the difference between relative and absolute references? Well, suppose you have an image that you want displayed in your HTML email, but it’s currently stored on your desktop – so, for example, the reference to the image file looks something like: “img src=”/Users/someUserName/Desktop/your-image.jpg”. This is a relative reference. If you want to embed an image inside an HTML email, you will have to first store that image on a server, and then point to that image appropriately with an absolute reference – something like “http://www.someserver.com/images/your-image.jpg”. More details on this below.

If your images and CSS files are on your desktop there is no way this would work – they have to be on a server because people viewing your email do not have access to your desktop, nor would you want them to!

A summary of how to insert your own HTML into a Gmail or Yahoo mail message

So, the answer to this is quite simple – after you open up the contents of the HTML message in an internet browser, you simply select that entire page to copy the contents (using CTRL-C , CMD-C, or Select All) of the page and then finally just paste those contents into the Gmail or Yahoo message using CTRL-V or CMD-V.

How to embed HTML images and CSS into a email?

The best way to embed images into an email is to first host those images on a server and then use the html you create to access those images. So, for instance, you may end up with an html tag like this:

<img src="http://www.somesite.com/images/logo.jpg">

And then you would just put that tag wherever appropriate in your HTML code for your email message, and then you can follow the same steps given above to send out that HTML message with the images embedded.

The same rule applies for external CSS files. It’s definitely easier to use the copy/paste method we described above if you just have your CSS inline – as in embedded inside the HTML email.


Hiring? Job Hunting? Post a JOB or your RESUME on our JOB BOARD >>

Subscribe to our newsletter for more free interview questions.



FOLLOW Varoon Sahgal, Author of ProgrammerInterviewon

  • tunde

    good one, thanks

  • shiv

    great Idea Thanks :)

  • http://www.facebook.com/ting.sao Ting Sao

    Works great, thank you!

    J

  • Administrator

    It might be because you are using relative references to your CSS and image files (as opposed to absolute references)…your CSS and image files will have to be hosted somewhere on a server (but you CSS could alternatively be inline – as in embedded on the actual page versus a separate file)…this method does always work for me and it is definitely the same as sending an HTML email…but of course your HTML has to be written to support the copy and paste – if your images and CSS files are on your desktop there is no way this would work – they have to be on a server.

  • RobbTheMan

    Just open the HTML page (images must have AN ABSOLUTE LINK "http://www.YOURWEBSITE.com&quot ;) then select all (Command+A), then copy paste into gmail email. DONE, works like a charm. Way to go Nerds! thanks a bunch

  • Sandi Putra

    BEAUTIFUL! IT WORKS ON MINE!! THANKS!!!

  • http://www.donavanjones.com/ Donavan Jones

    Works Great! Thanks for the info

  • anononodon

    Actually the answer is DON'T. Apparently Gmail, Yahoo and Hotmail can't seem to agree what to do with HTML in an email. If you send a link as HTML then Yahoo, for example, will reformat it breaking the link.

    Which is entirely unacceptable! What is this 1998? Pathetic!

  • anand

    Thats working fine, but manually. Actually I need code to perform same task at server side when requested. any help will be appreciated.. Thanks in advance.

  • Mizna Faryal

    thank you so much

  • treverfaden

    I've made a chrome extension to help do this right in gmail. It overlays an HTML code editor on top of Gmail and injects your HTML email directly into the gmail compose window. You can even save your snippets and reuse them as you'd like!

    Give it a shot here: Google Chrome Web Store – <a href="https://chrome.google.com/webstore/detail/html-inserter-for-gmail/enbnalopmjbaoabgclmajcnjamoglodp?hl=en-US&utm_source=chrome-ntp-launcher">HTML Inserter For Gmail</a>

  • sID

    AWESOME! THANKS!