HTML for email makes you frustrated? Not this one!
Forget about writing HTML for old email and let’s welcome new ways to write HTML for email

Have you ever made an appearance for a web page using HTML? Do you remember how to make that look? Maybe for simplicity, you will make it like the code below.
Looks easy right? To make Hello World in the middle, all you have to do is add the style = “text-align: center” code. I am sure, if the code increases, you are still able to overcome it. But, have you guys ever made HTML for email? Here is a simple example.
The two code examples above have the same goal, which is to display the Hello World text in the middle. The difference is the first code for web display in general, while the second for email.
Are you starting to find something unique in creating HTML for email?
If not, let’s make the HTML for email more interesting.
In my workplace, Tunaiku, there is a need to send email to Tunaiku users for promotional purposes. Like sending letters in general, email certainly have parts such as header, body, and footer. To make it look more attractive, email will be inserted some images and styles. Here is the HTML code for the email in question.
Already getting dizzy? Hopefully not yet, yes … 😜. Based on the code above, you need to combine <table> inside <table> to get the desired results.
Oh yes, the code above is not fully maxed out yet. What if the body part is required to be made column? What if the footer section is required to be linked to social media like Instagram or Facebook? Instead of getting confused, you can see the complete tutorial on creating HTML for email here.
Does the tutorial link that I provide cover all aspects of creating HTML for email?
In general, it is actually enough. However, there are a few things you need to consider when creating HTML for email, including:
- Can the HTML be viewed properly on a device other than a Desktop PC?
- Can the HTML be viewed properly through email applications such as Outlook from Microsoft or Mail from Apple?
- Can the HTML be viewed properly using various web browsers, such as Google Chrome, Mozilla Firefox, or Internet Explorer?
Quite a lot right? That’s only part of what I know. Maybe there are more things that I don’t know about. Based on the above considerations, of course there are many things you need to do so that the HTML for email gets the best results.
So, have you guys thought about all that? Or don’t you start getting frustrated? 😏
Hmm, just calm down … I have a framework that can help you to overcome the difficulties in making HTML for email… (yeah… 🤩). Let’s get on with it …
Let’s get acquainted with a framework that can help you in creating HTML for email
“ Out of sight, out of mind”. Therefore, let us first become acquainted with this framework that can help us. The name of this framework is MJML. MJML is a mark-up language that can reduce difficulties when creating HTML for responsive email. For how it works, MJML will be compiled into a responsive HTML form and can be opened through a different web browsers or email applications.
MJML was made by the developer team of Mailjet. Before MJML became open-source, MJML had been used by an internal company for 1 year in creating responsive HTML for email. To find out more about MJML’s background, you can see it here.
How to make HTML for email with MJML?
We will try to create HTML for email with the MJML framework. Before that we need to install MJML. To do the installation, you can simply type the syntax below into the terminal or CMD in the directory where you create the HTML file for email with MJML.
npm install --save mjmlIf you want to create this MJML globally or if you want to use MJML on a different project without reinstalling, you can type the syntax below.
npm install -g mjmlYou want to try MJML without installation? Of course, you can. You can try this MJML directly by visiting Try It Live.
Next, create a file with the name you want but with the extension .mjml, for example index.mjml. We will try to make Hello World like the code I have given the example above. Here is the MJML code.
To compile the MJML file, we type the syntax below.
mjml [input] -o [output]- [input] is the MJML file that we will compile to HTML, for example index-input.mjml.
- [output] is an HTML file compiled from MJML, for example index-aoutput.html.
- Don’t forget to enter the path to your file if the file is in a different directory, for example ./dirirect/index-input.mjml.
You can see the results of the MJML to HTML compile below.
The compiled HTML file looks quite long, because MJML has made the HTML responsive and can be used for different web browsers and email applications. Interesting right? hehe…
Is the MJML feature only that? Of course not. If I explain all the features in this article, it will definitely get very long. Therefore, MJML features will be created in a separate article. Just wait, buddy! 👍
The above example is only a small part of the actual HTML form for email. You might need extra strength in creating HTML for more complex emails. The important thing is keep the spirit! 😉
Conclusion
The MJML framework can be one of the best solutions for you to create HTML for email with complete features such as responsiveness and support for an excellent web browsers or email applications.
Reference
Thanks for reading. Sorry if there are deficiencies. Do not hesitate to ask… 😄

