HTML Basics

While PostUp provides an HTML editor (WYSIWYG) for making simple changes within an email, it is always recommended as a best practice to make changes directly within the HTML code whenever possible. The following should not be used as a definitive guide to manipulating or coding HTML.

Email HTML can differ greatly from HTML best practices used for websites. Email clients vary in the elements of HTML coding they support, and when coding an email you should always allow for the lowest common denominator. Email HTML typically is far behind the practices that can be used when coding for web.

What is HTML?

Think of HTML as another language. In fact, HTML stands for HyperText Markup Language. It is a language read by web browsers and email clients to translate your message into a visual design, as opposed to an email solely containing plain text. HTML works in a very simple, very logical, format. It reads like you do, from top to bottom, left to right. What you use to indicate which sections are headings, or where you want to have bold or underlined text, etc is a series of tags.

Tags are written using the < and > symbols. The less than symbol (<) designates the start of a tag. The greater than symbol (>) designates the end of the tag. What the tag does is determined by what you put in the tag. For example, <table> is the tag to designate that you want to open a table. Tags always consist of two parts though. You must have an initial tag to show where the action should start, and an ending tag to show where it should finish. These are referred to as the opening and closing tags. This is similar to when you use quotation marks to indicate speech. “This is the speech portion” is indicated by where the quotations begin and end. If you don’t put an ending quote, the speech would continue throughout the rest of the document. Using the <table> example, if you don’t add a closing tag, your email would consist of a single table. For tags, the closing tag is very easy to find as the closing tag always includes a / symbol. Adding </table> closes the table.

You will typically find HTML to be much longer than the visual display of the email because everything must be written out for the browser/email client to translate. If you want to create a table, you need more than just <table> example </table> if you want the table to include more than one row, or have multiple columns. A more accurate example of a table is included in this HTML:

<!DOCTYPE html>

<html>

<head>

<title>This is the title of your document</title>

</head>

<body>

<table>

<tr>This is a row in a table

<td>This would be a column/cell, within the row</td>

<td>This would be the second cell in the row</td>

</tr>

</table>

</body>

</html>

Making Changes to Text

HTML can be used to format the text within your mailing. Most HTML includes styling within the header to be used throughout the message, but some web-based email clients strip out these styles and apply their own. This is why your email may look great in one client, but show an entirely different font in another. There are certain best practices that can be used to prevent this, such as:

Defining text styles inline
Using universally accepted fonts
Setting a backup font

To define styling for your text, you would include style tags within the cell tag <td> using the appropriate style indicator. These tags can define font, size, color, or whether to capitalize the text.

Tag	Definition	Example Code	Example Display
font-size	Size of the text	<td style="font-size:12px">Example Text</td>	Example Text
font-family	Font	<td style="font-family:Arial">Example Text</td>	Example Text
font-weight	Thickness of the text	<td style="font-weight:bold">Example Text</td>	Example Text
text-transform	Capitalization of the text	<td style="text-transform:uppercase">Example Text</td>	Example Text
color	Color of the text	<td style="color:#18d4f2">Example Text</td>	Example Text
text-decoration	Formatting of text line decoration	<td style="text-decoration:line-through">Example Text</td>	Example Text

You can combine multiple style elements within a cell by separating each element using a semi-colon and adding a space (; ) after the semi-colon. See this example code:

Which would display as:

Text Goes Here

You can also add quick styling to a specific word or phrase in the line to have it stand out. For example, instead of having the entire line displayed in bold, you could indicate that a single word should be bolded thus:

Which would display as:

Text Goes Here

If you are using an HTML template, you can easily search for a keyword like “td style,” “td width,” or “style” to find the existing styles and make quick edits. You can also search for “font-family” to verify which fonts are being used and if a backup font is set.

recommends using a universally accepted font so that your email will render consistently across clients. See our Web Font Tips page for a list of universal fonts. If not using a universal font, consider setting a backup.

To set a backup font, simply add a second font to the tag, separated by a comma. In the example

the main font is Helvetica, with Arial indicated as the backup. If you do not set a backup font, email clients that do not accept your font can choose to use any other font instead.

Line Breaks

Email clients reading HTML code do not normally recognize a hard return as a line break. This means that if you are adding text to a mailing and you hit “Enter,” or “Return” to start a new line, it may render as a continuous line of text to your recipients. You can prevent this by adding line breaks using the break tag.

The break tag is unique in that it does not require a closing tag; however, you have two different versions of break tags. You can use either <br> or <br/> depending on whether you are coding in HTML or XHTML. PostUp suggests using <br/> as most emails use XHTML. To enter a line break simply add the tag where the break should occur like thus:

This is my first line of text. <br/> This is my second line.

Which would render as:

This is my first line of text.
This is my second line.

Changing a Link

One of the easiest changes to make in HTML is swapping out a new destination link. A link is indicated with the tag <a href=”http://example.com”> and the closing tag </a>. The URL itself must always be surrounded by quotation marks in order to be clickable. Many templates will use “##” as a placeholder for you to easily search and replace.

There are two main ways to use a link: to make text a clickable link, or to make an image a clickable link.

When creating text as a link, you would surround the text with the link tag. The line of code would be written as:

<a href="http://example.com"> Click here! </a>

Which would render as:

Click here!

Notice that the email client has automatically underlined the link and changed the font to blue. To control the styling of the link, you can add style elements to your link tag like so:

<a href="http://example.com" style="text-decoration: none; color: #18d4f2;"> Click here! </a>

Which displays as:

Click here!

A new style tag you may see used with links is the target tag. This controls the behavior of how the link will open. PostUp recommends as a best practice using the “_blank” code in order to have the link open in a new window or tab. This helps ensure that you do not lose further clicks by recipients leaving the email. A link code with targeting added would be written like this:

<a href="http://example.com" target="_blank"> Click here! </a>

Adding a link to an image is very similar to creating a text link. Your link tag would surround the image. The main difference is that because the image is typically within a cell and contains styling as well, there will be more code in the line of HTML. If you are not familiar with working in HTML it may be harder to identify images. An easy way to find an image is to search for “img src” to find the image tag. Once you add or swap your link tag, the code will be written similar to this example:

Adding a MailTo Link

When working in HTML it is very easy to add a call to action for your recipients that allows them to click and send an email to a preset destination. These are called MailTo links. Creating a MailTo link is very similar to adding or swapping out a normal link. The difference is the addition of “mailto” in the tag.

With MailTo links, you can choose whether to simply set the destination email address, include the default subject line, or also include the default body of the email.

To simply set a link with a destination email address, the line of code would be written as:

<a href="mailto:training@postup.com"> Click here to email us! </a>

If you want to include a subject line, you would use a question mark to separate the email address from the subject= part of the tag. You do not want to include spaces directly within the code, so to indicate spacing in the subject line, use %20 between each word as in this example:

<a href="mailto:training@postup.com?subject=I%20Would%20Like%20a%20Free%20Training"> Click here to email us! </a>

To go a step further and also populate the default body of the email you will add &body= to the end of the subject line code. Similar to the subject line, you will continue to use %20 to indicate spaces, however, you will not need to separate the body with a question mark. A line of code that includes the body would look like this:

<ahref="mailto:training@postup.com?subject=I%20Would%20Like%20a%20Free%20Training&body=Please%20let%20me%20know%20when%20I%20can%20schedule%20a%20training%20on%20cool%20PostUp%20features! "> Click here to email us! </a>

Changing an Image

When replacing an image within an HTML template, it is still easiest to search for “img src” to find the image tag. An image tag consists of <img src=”##”> and may contain additional styling to indicate the size, height, and alternative text of the image. An image is another tag that does not require a closing tag. The image itself is defined by the link or pathway indicated by img src=”##” with the ## being replaced with the image location.

Most images are hosted externally, in which case the location would be a link, such as:

If you are storing images within the PostUp CMS, the location is the pathway to the stored image. You can easily find this pathway using the Image Tags option within PostUp. The tag is consistently set to be [-Image:/IMAGENAME-] with any folders or subfolders being added prior to the image name, such as [-Image:/FOLDERNAME/SUBFOLDER/IMAGENAME.JPG-]. When adding an image pathway to your code, it is important to make sure the image pathway is still kept within the quotation marks, similar to when using a link. See the new example image tag:

PostUp recommends making sure the new image is the same width as the original image in order to ensure your template displays consistently. However, if you are swapping out only the img src=”##” code and the image tag contains the width and height specifications, you can use an image of a different size.

Most templates will include an “alt” option within the image tag. This allows you to set up alternative text that will display for recipients that have images blocked. PostUp highly recommends including at least basic alt text.

As always, when performing any edits in your mailings PostUp recommends rigorous testing before sending.