Anatomy of an HTML email

Understanding the basics of a HTML email before working with the email editor in Shaman

Katy Moore avatar
Written by Katy Moore
Updated over a week ago

In this article:

Creating email content using HTML makes your emails more visual and attractive. A basic understanding of HTML will really help you to get the most out of your layout and designs.


1. Canvas & Background Color:

Deciding a background color for your content is a great place to start. A canvas that has a background colour - filled 100% width depending on the screen of the device - and a main content area. This content area usually has a width of 600-650px and will scale for smaller screens like a phone (in which case you would not see the background color). You can set the content width in the tab: body.


2. Tables & Rows:

When working with HTML, it is useful to think of your email in terms of tables, or a type of grid. For larger 'rows' you use blocks. Within these blocks, you can define a background color and a content background color.


3. Top & Bottom Padding

To add some space to the top edge of your email and the first block (block 1 in the screenshot), you can set top padding. You can do this in the same way at the end of your email under the last block (block 2 in the screenshot) by setting the bottom padding.

Within every block, you can add multiple content items such as an image, text, divider, or a button. You can learn more about any of these content items in our help center (just click on the word eg, the image above). You can add custom padding to each content item as well. For more information on adding padding to blocks in your email content, you can check out this article here.


4. Columns per block

Within a block, it is possible to create columns, and set a specific width for each column. In this case, we created 2 columns in block 2.

Top tip!

The majority of emails start with an eye-catching banner and finish with a footer (which could contain important legal information about your company or the specific Product/ brand in the email.

Did this answer your question?