HTML Basics: A Back Pocket Guide for Beginners
Most email marketers, at one point or another, have had to go in and edit code. Having a solid understanding of HTML basics makes editing, and eventually, building your own code much less daunting. We often post HTML tips and how-tos for including fun and engaging tricks into email. For instance, we’ve covered click-to-reveal code in email, HTML background images, embedding HTML5, gifs in email, and so many more. Now, we’re going back to the basics. Learning how to implement unique code tricks into email is much easier when you have a baseline knowledge of how everything works and talks to each other. Email HTML comes with its own set of nuances than HTML for web. So to start, we'll cover baseline web HTML basics and then get into HTML for email in a later post.
Table of content
What is HTML?
The dictionary defines HTML, or HyperText Markup Language, as “a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.” Or, in other words, it’s the organizing of information for display purposes.HTML Basics
Let’s start at the very beginning (a very good place to start).What is a doctype?
At the very top of any email HTML, you’ll see:<!doctype html>Tags
A tag in HTML tells the browser what part of the email to apply the enclosed rules to. We say “enclosed” because tags must be opened and closed in order to render:<head>
Content, content, content.
</head>
You can have multiple open tags at once, but they must be closed in the mirrored order in which they were opened:
<body>
<div>
<h1>
</h1>
</div>
</body><div> tag is a child element of <body> and the <h1> tag is a child element of <div>. When you see a reference to a “child” element, that’s the relationship it’s referring to: a tag within a tag.
And yes, since nesting elements can go on for a while, the parent/child metaphor extends to grandchild, great-grandchild, etc. Low and behold, this is called a hierarchy. This is important to remember, because ancestral elements can take behavior and styling direction from parental elements.
Within each tag, you can add styling parameters, which we’ll go into below.
Dividers
You may know dividers as<div>s. These handy little tags act as containers for other elements in the HTML and help separate the content into sections.
For instance, you’ve probably seen a divider have an id tag, such as <div id=”promotion”>. This indicates that everything contained within this specific container has to do with the promotion part of the email. Dividers can also contain CSS language to style several elements at once.
Attributes
You can’t have an extended element tag without an attribute (in this case,<div id). Attributes are used to extend an element’s tag and can include anything from identification to styling and more.
An attribute must have a name and a value. The name in this example is id and the value is ”promotion”. The value will either have a hashtag, be put in quotes, or have a period (but we'll go into that later). You can add as many attributes in a single opening tag as you’d like, just remember that those stylings and information will apply to all content in that <div>’s container.
Here’s an example we can breakdown:
<div id=”promotion” style=”text-align: center;color: #9383a7;font-weight: normal;text-decoration: underline;"><div id=”promotion”, declares that the subsequent content is the promotional container of the email. Everything inside the tag that follows “promotion” are styling parameters for the email client to follow when rendering:
<div id=”promotion” style=”text-align: center; lets the browser know to center the text. We separate out each parameter with a simple ; stroke.
<div id=”promotion” style=”text-align: center;color: #9383a7; cites the color of the text.
<div id=”promotion” style=”text-align: center;color: #9383a7;font-weight: normal; declares a normal font weight.
<div id=”promotion” style=”text-align: center;color: #9383a7;font-weight: normal;text-decoration: underline; calls for underlining the text.
And then, of course, we close the “ and > to produce:
<div id=”promotion” style=”text-align: center;color: #9383a7;font-weight: normal;text-decoration: underline;">id= and style= above are both attributes. The text alignment, color, font weight, and text decoration are called properties.
Display Text
A plain text paragraph would go into an email as<p></p>. Sometimes a great email requires a bit of formatting to make it engaging for the reader. Maybe you want to add fonts, colors, size changes, etc. to a portion of the text, but not the whole paragraph.
Within a paragraph, you can use <span></span> tags, to style inline content. Meaning, you can add CSS elements to stylize a portion of text that’s on the same line as, or inline with, other text that doesn’t need formatting.
A brief intro to CSS
Cascading Style Sheets, or CSS, oftentimes goes hand in hand with HTML. Wait, what’s a style sheet? A style sheet tells browsers how to render CSS declarations, which browsers already have a built-in version of. If HTML is the foundation and skeleton of a house, then CSS is the drapery, furnishings, landscaping, amenities, etc. It makes HTML feel warm and cozy instead of calculated and plain. CSS is a series of rules for HTML to follow. Each rule has a selector and declaration block A selector dictates which HTML element to style (ex:<p>, <h1>, <title>, etc.).
A declaration block is always enclosed in { } and includes a CSS property (color, font-size, etc.) and a specification of how to style each property.
Let’s look at this example:
This tells all <p> elements to be size 22 font, purple, and center-aligned.
<style>
p {font-size:22px; color:purple; text-align:center;}
</style>Reserve your treehouse accommodation in Sequoia National Park and get 15% off any 2019 trip.
Using CSS with HTML
Display text: Reserve your treehouse accommodation in Sequoia National Park and get 15% off any 2019 trip. Code:<p>Reserve your treehouse in <span style=”color: purple; font-weight: bold;”>Sequoia National Park</span> and get <span style=”color: purple”>15% off any 2019 trip</span>.
And for good measure, let's look at the <div id="promotion"> example above. Use a # for your attribute when you're pulling in styles from a style sheet. Since CSS pulls in styles from a style sheet, you can use a # attribute for the <div id, such as:
<div id="promotion">
Alternately, add {class} as the attribute when you’re pulling in a class style from the CSS:
<div class="promotion">
Remember, you need a unique id for every element or container, but you can reference the same class multiple times in the same HTML document.
Here's an example of a basic web page showing how the classes and id's are used:
<!DOCTYPE>
<html>
<head>
<style type=“text/css”>
#promotions{
padding:10px 3px 50px 0px !important;
background-color:#BADA55
!important;
width:600px !important;
}
.promotions{
padding:10px 3px 50px 0px !important;
background-color:#BADA55
!important;
width:600px !important;
}
</style>
</head>
<body><div id=“promotions”></div><div class=“promotions”></div></body>
</html>!important; is a tag that forces the browser to comply with the class or id.
Back Pocket Reference Guide
Like we said, there are ample attributes and tags you can use in email HTML. Here’s a quick roundup of some of the most popular ones and what they control for easy reference when you’re getting fancy with your next email’s HTML.Common tags
<title></title> gives your email a title. This must be in the <head></head> element.
<body></body> contains all of the content of your HTML email. All of it. This tag is literally the second to last line of code in your HTML email, right before you close the </html> tag.
<div></div> acts as a container/divider for specific elements.
<span></span> pulls in CSS for content styling.
<img> denotes an image. This tag is self-closing. An image tag must have the src (source) attribute, and the alt (alt text) attribute is highly recommended for image blocking (hi there, Outlook) and email accessibility. The src tells the browser where the image is coming from, and alt text gives a quick description of the image.
<a></a> is a hyperlink. This is paired with the href attribute to declare the link’s destination: <a href=”www.website.com”>Content</a>
Tables
HTML emails are built on tables, but it’s the formatting and CSS that masks any appearance of a grid in the body. A single cell in a table can hold any type of content you'd like—images, text, links, videos, even other tables. Content can go into a table row<tr></tr>, a table heading <th></th> (which are automatically made bold), or table data <td></td>, which is a specific cell.
Any table starts with<table></table> tags. Within each table, you must give direction as to the content attributes. Attributes of a table can include:
border=specifies pixel width and color of a border.cellpadding=indicates how far from the edge of the cell the text is.bgcolor=sets the background color (if any) of the entire table.cellspacing=indicates how much space is in between each cell.width=specifies width parameters of the table.
source: w3schools.com[/caption]
And these are handy to keep on hand for styling and formatting:
<br> is a line break. It acts the same as an “enter” keystroke, so include however many of these as “enter” strokes you would like. This tag is self-closing as well, so it doesn’t need a closing counterpart.
<h1></h1>, 2, 3, 4, 5, <h6></h6> are all recognized headings in HTML.
<blockquote></blockquote> makes a quote or other content stand out on the page.
And a blockquote can look a little something like this.
<strong></strong> makes text bold.
<em></em> makes text italicized.
<li></li> populates items in list form, which can either be an ordered list <ol></ol> or unordered list <ul></ul>.
<ol></ol> and <ul></ul> specifies whether list items show up as ordered (numbered) or unordered (bulleted).
Example:
<ul>
<li>flights</li>
<li>accommodations</li>
<li>rentals</li>
</ul>Result:
- flights
- accommodations
- rentals
Common attributes
href="" specifies the link to use when hyperlinking content in HTML. You’ll see this paired with the <a> tag above, <a href=”www.website.com”>Content</a>
id="" identifies a particular element or divider container (there cannot be duplicate ids).
align="" specifies center, right, or left alignment of the container.
alt="" adds a description to images.
class="" specifies which class name to apply to an element. A class name contains pre-set parameters to apply to specific pieces of content.
title="" adds a title.
style="" stylizes particular elements.
lang="" specifies the language of the element, which is also greatly beneficial for screen readers. (English is specified as "en",
Onward and Upward
Feeling overwhelmed? Don't worry, we've got you covered. There are safety nets in place within the Email on Acid workflow to ensure proper rendering of your code. This comes highly recommended, regardless if you're an absolute beginner with HTML or a proficient coder. HTML is its own language. The more you digest it and practice here and there, the easier it becomes, just like anything. We're all in this email journey together, so if you have any tips you'd like to share or know of anything we're missing in the Back Pocket Reference Guide above, let us know in the comments. This post was created with the help of Codecademy, HTML.com, and W3Schools.
