HTML Email in Gmail


Here below are the steps to creating an HTML email in Gmail, based on a YouTube video called How to Create a HTML Email in Gmail by Local Business Marketing Online (LBMO).

  1. Go to Gmail, log in
  2. Click Compose
  3. Go down into the body and type some placeholders, perhaps several asterisks like this *********
  4. In the email right-click and select Inspect
  5. Right-click the selected text and click Edit as HTML
  6. Go to your HTML document (text editor) and select everything between the body tags (including the body tags) and copy it
  7. Note: the code will need to be standard HTML code with no CSS
  8. Go back to your email and select your placeholder code (asterisks)
  9. Paste your HTML code in. Your HTML code will replace the asterisks.
  10. Click somewhere in the white space to the left and you should see the email update in the upper section

HTML Code

Before doing the above steps you will need to have your HTML code ready. There are a lot of articles here on HTML and CSS. When you create your HTML code for the content of your email you need to keep in mind that the code you paste in above cannot have separate CSS styles. What does that mean? All of your styling (colours, fonts and so on) will need to be inline styles. We have a post on inline styles. So to that end we will demonstrate some HTML code with a simple inline style.

On another post here I have some code that you may copy for yourself and use. The post is CSS Layouts for HTML Email.

Inline Styles

I have used inline styles right here to make the above heading red. How did i do it? I simply added the text style=”color:red” right into the HTML tag h4.