Project Solution: HTML Email Tag Structure
This solution guide walks through how to structure the HTML tags in order to integrate content and select tags prior to adding CSS styles.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

For this project, I'm going with a little bit different structure because emails are different from websites.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Marketing Email</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
    <body>
    </body>
</html>

This is how the basic structure looks like for emails. If you already did some research while trying out the solution yourself, then you'll be familiar with a lot of this boiler plate code.

If you look at the code, we're starting off with <!DOCTYPE>, but after that we're typing out some extra meta data information because email engines are much different from web browsers. You don't really have to worry too much about this code, but it's good to know what you should include.

In the second line, we have something called xmlns, and this is to helps emails to be compliant with apps such as Outlook and other email clients, so that they read the information correctly.

In the meta data tag inside <head>, I'm setting the content type, and effectively telling the email engine to expect UTF-8 charset. In the next meta data, I'm setting the device width and doing other things that deliver the exact design to the end users.

So, you can use this as a skeleton for your HTML emails in the future. It'll be available in the Show Notes section. You can go to "https://github.com/jordanhudgens/html-email". Here, you'll find a file called index.html that contains our code, and an image that we'll use as the background.

Next, we'll create content in the <body> tag. As always, we'll start with a <div> tag and give it an ID. We'll have a nested <div> inside which we'll put the text we want. You can put whatever you want here. I'm going to add a subheading, text and links. 

<body>
  <div id="heading">
    <div id="content">
      <h1>Hi, here's my message</h1>
      <h3>And a subheading</h3>

      <div class="alert">
        <a href="#">Checkout weekly specials</a>
      </div>
    </div>
  </div>
</body>

Once that's done, we'll create a footer, and we'll have some content here. Specifically, I want to add a custom entity. 

<div id="footer">
  <div class="footer-text">
    &reg; ABC Company 2016<br>
  </div>
</div>

If you go to the browser, you'll see that we have all the content, even if they look a little ugly.

medium

If you right-click and view the source code, you can see all our code.