Last time we talked, I gave you a run-down of the basic coding languages, what they do and how they work together. If you missed it, no biggie. You can catch up here.
If you think back to our house analogy, HTML is like the foundation that your email/landing page stands on. We can’t build anything without it, so this is where our journey begins.
A marketing genius like you has probably modified and/or created an email. Sometimes, especially when emails break, you’re forced to abandon the WYSIWYG editor and sift through the actual code for answers. If you’re not well versed in HTML, it can be a little intimidating to modify code. It’s especially stressful when those modifications break the email even further and you don’t know why. We’ve all been there.
So, today’s focus is on HTML basics, particularly for email. We’ll start at the very beginning (a very good place to start) and walk through the initial setup for starting an email to get you familiar with some basic HTML terms and concepts. It’s like we’re pouring the foundation on which we’ll build everything else. Ready? Let’s go! To start, let’s take a look at an example of an empty HTML email that has no content. This is the bare framework that you’ll want to use for every email.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html >><head> <meta name="viewport" content="width=device-width;initial-scale=1.0; user-scalable=1;"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Code Like a Boss: Foundation for HTML Email</title> </head> <body> </body> </html>
Every HTML document (including emails) begins with a <!DOCTYPE> declaration. The <!DOCTYPE> basically tells the browser or email client which version of HTML you plan to use. There’s some debate over the best version for email. Campaign Monitor has a great discussion here, but for our purposes, you can use XHTML 1.0 Transitional (as shown above) or HTML5, which looks like this: <!DOCTYPE html>
After the <!DOCTYPE> declaration, we have our opening HTML tag, which simply tells the browser/email client that this is an HTML document. This might be a good time to talk about tags. Think of an HTML element (table, header, paragraph, link etc.) as a box or container. Most elements (with a few exceptions) have an opening (<>) and closing (</>) tag, which marks its beginning and end. Everything between those tags is “inside” that element or container. Notice the closing HTML tag (</html>) at the very bottom of our framework. Everything (besides our <!DOCTYPE> declaration) is contained within our HTML element. It’s the largest box that holds everything HTML-related. Make sense? Cool. Let’s move on.
The first thing inside our HTML element is the head. The head contains information about our HTML document, including meta tags and the title. Meta tags provide metadata about our HTML page. It’s data about data. These tags will not be visible in your email, but your browser/email client can read them. The ones used above help control character sets and allow the email to scale across multiple devices. You can do a lot with meta tags, so if you want to do more reading, here are a couple resources to get you started:
http://www.w3schools.com/tags/tag_meta.asp
https://litmus.com/community/discussions/39-explanation-of-doctype-html-attributes-meta-tags-in-email
The title also goes inside our head. As you’d expect, this is where we can assign a title to our email (or landing page). If you’re including a link to view an “online version” of your email, be sure to include this when you build, as it will show up in the browser tab, like so:
CSS styles can also go in the document head and are marked with start and end <style> tags, but that’s a lesson for a later date. I’ll dive into CSS in future posts, so stay tuned!
After the head (marked by a closing head tag </head>) comes our body. This is where all of our email content goes, and where we’ll do the majority of our building and editing. Right now, it’s like a blank sheet of paper or an empty box. For now, we’ll leave it empty, but next time, I’ll walk you through how to start adding content, with specific focus on HTML tables. Until then, happy coding!
If you have comments/questions, please leave them below. I’d love to hear from you.
Share This
About the Author: Relationship One
