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 “”. 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="">

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
  • Awadhesh


  • Sarah

    Thank you so much!!! I was searching everywhere for this.

  • Pingback: How To Compose Html Email In Gmail | Adsense()

  • Pingback: My Homepage()

  • Trever Faden

    I’ve made a chrome extension to help do exactly this. 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 –

  • Drsavant

    This doesn’t work at all ! ! ! I’ve tried it many times, and I just tried it again in yahoo. It just copies the html code as plain text. I’m surprised anyone got this to work in gmail, yahoo, hotmail, etc.

  • sushanth

    css alingment gets all round the place can any one help

  • something

    Man, you dont have to copy the code! Open the preview with the browser, then you copy the page that is showing and paste in your email message!! REpeating: DONT copy the code! COPY the browser preview! Then it works..

  • Leon Suffice Elless

    So, what would you suggest?…
    Use this context as the premise of whatever answer you would give:

    There’s a job that I want to apply for and it revolves around coding html emails…i thought it would be nice/boost my chances if i could send my application/cover letter in the form of a designed html email…The email would contain an animated gif/logo at the top, a section of text that comprises the cover letter, and a link to download/view my cv

  • Pranz

    I have a perfect HTML to insert into Gmail, but can’t seem to keep the background color. Any pointers?

  • AmeriKKKaisAlQaeda

    This doesn’t work.

  • Phyu Mon

    THIS has ended my quest to do email templates without too much of a hassle. You made my day.

  • Bmoody28

    Maybe someone here can help me. I needed to embed a hyperlink in to an image. I used adobe photo shop and using slice was able to embed the hyperlink creating an html document/image. Now when I open the image in the browser, select all, copy and then paste it into my gmail, the body of the email stays blank. I tried attaching the image inline to the email and gmail says it must be in http:// format however no image hosting sites accept an html image, only jpeg in which the link on the image no longer works. HELP

  • Lori L’Heureux

    Unfortunately this technique doesn’t work if you’re doing a media query to determine which styles are to be executed (based on screen size detected). Only one state will copy over. Any suggestions? thx!

  • demens

    thanks!! this work great

  • josan

    Works on Gmail. Now I don’t have to use a third-party app. Thanks :)

  • fekko

    Dont get it: i can see the embedded item in the preview, once i send it, there is just the text surrounding the item left, not even the html-code.
    what means classic mode? just the design? I changed that.

  • Simeon Prince

    It worked for me. Are you in Gmail Classic Mode? that might be the problem. But as the author said, design your html page, open in a browser, press ctrl+a to select all, go to gmail, compose a new message, then paste. If you’re using a premium email service, that has a rich text editor, then it won’t work. for that you must view the source in the browser, select all and copy the html code, then go to the rich text editor, click on the html button, then paste the code. hit apply, return to rich text mode and you’ll see it applied right away.

  • Larry

    Simeon, are you doing this in Gmail? When I try to compose a new Gmail, and paste the selected web page into the body, it removes any html-related code, and only leaves the text. I’ve followed the instructions, but it seems like Gmail is sensing HTML and removing it on it’s own. I’ve tried both IE and Chrome, neither worked.

  • Simeon Prince

    Tried it and it worked, no problem. so now I can send Pretty HTML Newsletters, and whatever else to clients. It even showed up properly on my smartphone! Thanks a lot!

  • Pete Austin

    Works for layout within body, but not for script or head content.

  • sID


  • 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="">HTML Inserter For Gmail</a>

  • Mizna Faryal

    thank you so much

  • 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.

  • 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!

  • Donavan Jones

    Works Great! Thanks for the info

  • Sandi Putra


  • RobbTheMan

    Just open the HTML page (images must have AN ABSOLUTE LINK "😉 then select all (Command+A), then copy paste into gmail email. DONE, works like a charm. Way to go Nerds! thanks a bunch

  • 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.

  • Ting Sao

    Works great, thank you!


  • shiv

    great Idea Thanks :)

  • tunde

    good one, thanks