UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online HTML email template builder does
Writing HTML for email is not like building a web page. Email programs strip styles, block images, ignore modern layout and render the same code in very different ways. Designers who build emails by hand learn to use nested tables, inline styles and small tricks for Outlook. This free online HTML email template builder does that work for you. You choose blocks such as a header, heading, paragraph, image, button, two columns, divider, spacer and footer, edit their text and colors, and the tool writes clean, responsive, table-based email HTML that you can copy and paste into your email platform.
A live preview shows the result at desktop width and at a 375 pixel mobile width, and a checks tab flags the usual problems before you send: a long subject line, missing preheader, no unsubscribe link, images with no alt text, weak contrast and a size that risks Gmail clipping. It is a practical email template generator for newsletters, promotions, welcome messages and announcements.
How to build an HTML email template step by step
- Start from a template. Choose newsletter, sale, welcome or announcement and click Load template.
- Set the basics. Write the subject line, add preheader text, pick a width, a font and your brand colors.
- Edit the blocks. Change the text, add image addresses and button links. Add, move or delete blocks to fit your message.
- Preview it. Switch between desktop and mobile.
- Read the checks. Fix anything marked Check.
- Copy the HTML. Paste it into the custom HTML area of your email platform, or download the file.
- Send a test. Look at it in Gmail, Outlook and on your phone before you send to your list.
The blocks and what each one is for
| Block | Use it for | Tip |
|---|---|---|
| Header | Your brand name on a color band | Swap in a hosted logo image if you have one |
| Heading | The main message or a section title | One clear headline beats three |
| Paragraph | Body copy | Short paragraphs, 16 px text, line height 1.6 |
| Image | A hero picture or product photo | Always write alt text and link it if it makes sense |
| Button | The one thing you want readers to do | Use a verb: Read, Get, Shop, Book |
| Two columns | Two short points side by side | They stack on a phone |
| Divider and spacer | Breathing room | Do not overuse |
| Footer | Address and unsubscribe link | Required for commercial email |
Why email uses tables and inline styles
Web designers use CSS grid and flexbox. Email designers use tables. The reason is the rendering engines. Desktop Outlook uses the Word engine to draw HTML, which ignores many CSS properties. Some webmail programs remove the style tag or parts of it. Inline styles survive in nearly all of them, and table layouts hold their shape. The builder therefore writes every style inline, wraps the layout in a role=presentation table, adds a conditional fixed-width wrapper for Outlook, and keeps a small media query in the head for programs that support it. Images get explicit widths, display block and zero borders so they do not show gaps or blue link outlines.
Design tips for emails that get read
- Lead with the point. Many people read only the first screen.
- One main call to action. A second link is fine, but one button should stand out.
- Keep it narrow. About 600 pixels wide, with generous padding.
- Use readable text. At least 14 to 16 px for body copy, and strong contrast between text and background.
- Do not hide the message in an image. Images are blocked in many programs, so important text should be real text.
- Write alt text. It shows when images do not load and helps people using screen readers.
- Write a strong subject and preheader. The Email Subject Line Generator gives you ideas and shows how they look in an inbox.
Sending, testing and deliverability
Great HTML is only half the job. Before a campaign goes out, send a test to several programs, including Gmail on the web, Outlook and a phone. Check that links go to the right place and images load. Run the words you plan to use through the Email Spam Word Checker, authenticate your sending domain with the DMARC and SPF Record Generator, and clean your list with the Email Validator and List Cleaner. If a test lands in spam, the Email Header Analyzer shows how the receiving server judged it. Going away after a send? Set an automatic reply with the Out of Office Message Generator. Your readers also need an honest way to join, which you can add with the Newsletter Sign-up Form Generator.
Accessibility and dark mode
An accessible email is easier for everyone. Use real text for key messages, descriptive alt text, a logical order of blocks, link text that makes sense out of context (for example Read the guide, not Click here) and enough contrast. The builder reports the contrast ratio of your body text and button text against their backgrounds and aims for 4.5 to 1, the common standard for normal text. Many programs now offer dark mode and some invert colors automatically. Pick colors that still work if they are changed, avoid pure white text on a transparent logo image and test the result.
Legal basics for marketing email
Commercial email is regulated. In the United States, CAN-SPAM requires accurate sender information, a non-deceptive subject, a valid physical postal address and a working opt-out that you honour promptly. The European Union and United Kingdom require a legal basis, usually consent, for most marketing to individuals and a clear way to withdraw it. Many other countries have similar rules. The footer block puts an address and an unsubscribe link in every email, but you are responsible for honouring opt-outs and keeping records. This page is general information, not legal advice.
Accuracy, limits and responsible use
The builder produces standard email HTML without scripts, forms or external stylesheets. It cannot know how every email program will draw it, and it does not host images or send messages. Preview in your own tool and test in real inboxes. Use it only for lawful, permission-based email.
Frequently asked questions
How do I use this free HTML email template builder?
Pick a starter template, edit the blocks on the left, and watch the preview update. When you are happy, copy the HTML or download it as a file and paste it into your email platform.
Is this HTML email builder really free?
Yes. It is a free online tool with no sign-up, no watermark and no limits. The code you copy is yours to use anywhere.
Why does email HTML use tables?
Many email programs, especially desktop Outlook, use limited rendering engines that handle tables much more reliably than modern layout features. Table-based layout with inline styles works in the widest range of inboxes.
Is the template responsive?
Yes. The email has a fixed maximum width on large screens, scales down on small ones, and two-column blocks stack on mobile. Use the Mobile preview button to check it.
What width should an HTML email be?
About 600 pixels is the long-standing standard. It fits the reading pane of most desktop programs and scales down well on phones.
Can I use my own images?
Yes. Paste the https address of an image hosted on your own server or a content delivery network. The builder does not upload images. Always add alt text, because many programs block images by default.
Which fonts are safe in email?
Web-safe fonts such as Arial, Georgia, Verdana, Trebuchet MS, Tahoma and Courier New. Custom web fonts work in only some programs, and the others use a fallback.
What is preheader text?
The preheader is the short line of preview text shown after the subject in many inboxes. The builder hides it inside the email so it appears only in the preview.
What does the Checks tab do?
It tests common problems: a long subject, missing preheader, no unsubscribe link, images without alt text, placeholder image addresses, weak color contrast and an HTML size near the Gmail clipping limit.
Why does Gmail clip some emails?
Gmail cuts off messages whose HTML is larger than about 102 KB and adds a View entire message link. The builder reports the size so you can stay under it.
Can I use merge tags like {{first_name}}?
Yes. Type them into any text field and your sending platform will replace them. Use the tag format your platform expects.
Will it work in Outlook?
The layout uses tables, a fixed-width wrapper for Outlook and a padded-link button, which work in desktop Outlook. Still, test in the programs your readers use, because rendering differs.
Does it support dark mode?
The code declares support for light and dark color schemes. Programs differ in how they adjust colors, so choose colors with good contrast and test in dark mode.
Do I need an unsubscribe link?
For commercial email, yes. Laws such as CAN-SPAM, GDPR and PECR require a clear way to opt out and, in many places, a postal address. The footer block provides both.
Can I send the email directly from this tool?
No. The tool makes the HTML. You paste it into your email platform, an HTML-capable mail client or your own sending system.
Can I move blocks around?
Yes. Use Up and Down on any block, delete it, or add new ones. The preview and code update at once.
Can I print or save the design?
Yes. Download the HTML file, or print or save a summary page with your settings, block list, checks and the start of the code.
Sources and further reading
- U.S. Federal Trade Commission, CAN-SPAM Act: A compliance guide for business.
- Google, Gmail help: Message size and clipping.
- W3C, WCAG 2.1: Contrast (Minimum).
- Microsoft, Word HTML and CSS rendering in Outlook.
- Information Commissioner's Office, Direct marketing and electronic communications.
- MDN Web Docs, The table element.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.