How to write e-mails in HTML and send it using Gmail ?

Last Updated : 25 Jul, 2024

In this article, we are going to learn that how users can write e-mails in HTML format and send them using Gmail. However, Gmail doesn't offer an HTML editor still we can send HTML templates in an e-mail using some tools and methods. Many people need to send an e-mail with HTML templates to others. By using the below methods, users will be able to send HTML formatted emails using Gmail. They don't need to use a third-party tool like Mailchimp, etc.

There are 3 methods to send HTML formatted email using Gmail.

Copy & Paste HTML from the webpage to Gmail editor.
By Using chrome's developer tool.
By using the Chrome extension.

Method 1: Copy & Paste HTML from the webpage to Gmail editor

Gmail offers a "what you see is what you get" editor. If we paste the raw HTML code into the editor, the recipient also sees the same raw HTML code. So, Instead of adding the raw HTML, we need to copy the HTML code output from the web browser and past it into the Gmail editor. The below steps will help you to generate an HTML formatted e-mail.

Step 1: Create a new HTML file and add the below HTML code into that.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Simple HTML webPage</title>
</head>
 
<body>
    <h1>Welcome to GeeksforGeeks</h1>
    
<p>A computer science portal for geeks</p>


    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
         alt="GFG image" /> 
</body>
 
</html>

Step 2: Open the HTML file in the web browser and Copy the HTML from there.

Step 3: Paste the HTML into the Gmail editor.

Step 4: Send the e-mail as you send normally it from Gmail.

Method 2: By using the chrome's developer tool

Chrome's developer tool allows users to edit the code of the webpage. Here, we will find the relevant element for the Gmail editor and add the HTML code to it. Users need to follow the below steps to use this method.

Step 1: Open the Gmail editor and right-click anywhere inside the editor.

Step 2: From the menu, click on the inspect option. You will see chrome's developer tool is opened and the HTML code of the Gmail editor.

Step 3: The user needs to find the div element with the "contenteditable=true" mark. Right-Click on the div element and choose edit as an HTML.

Step 4: Remove the code from the div element and add your HTML template code.

Step 5: Now, close the chrome's developer tool and you can see HTML is added to Gmail editor.

Method 3: By using the chrome extension

We will use the "Html inserter for Gmail" chrome extension to directly write an HTML code inside the Gmail editor. We just need to add a chrome extension to the chrome browser and Gmail will automatically show the option to write HTML code. To implement this method, follow the beneath steps.

Step 1: Add the Html inserter for Gmail chrome extension to chrome browser from here.

Step 2: Click on the HTML icon beside the send button.

Step 3: Add the HTML code here.

Step 4: Click on the Insert HTML button, and we have done.

Note: When you send an e-mail with an HTML template, you should not add CSS with an external CSS file, and web fonts. Furthermore, you have to use only online hosted and publicly available images inside the HTML template.

Output:

All the above 3 methods will give the same result as the below image. Now, users can send this HTML template to anyone like a simple e-mail.