What Is HTML?

HTML (HyperText Markup Language) is used by web pages to translate raw computer code into images and text. It can embed videos and images and scripts and structure a page’s content. Along with CSS, HTML makes up the majority of what you see on the internet. It is also the backbone of Benchmark’s email marketing software.

We use HTML elements called tags to alter the content of web pages or emails. These tags are enclosed with brackets, such as in the case of <h1>, the start tag for a large header font. Each HTML code must start and end with (appropriately enough) a start and end tag. The tags surround a text, image or address – anything that you want to include in your content. The end tag is usually the same as the start tag but begins with a forward slash </h1>. To see how we used header tags, check out our first HTML Tips & Tricks blog.

Knowing how to use HTML isn’t necessary for the Benchmark Email Editor, but for those of you who are curious about what makes your email tick, this blog series will introduce you to the inner workings of code.

Div Tags and Menus

Today we’ll touch on the <div> tag, a versatile piece of coding that works as a sort of master code. The <div> tag is introduced to set a piece of HTML off from the rest of the script. A <div> tag has many uses, but for this lesson we’ll use it to insert a menu at the top of your email newsletter. The menu can contain a series of links that your subscribers can click on to direct them to a section of your website or newsletter.

Step 1

First, open your Email Editor (Step 4 when creating a new email) and choose a template, preferably one that doesn’t have too many colors or designs already added. Find the section you want to edit and click on the pencil icon in the top left corner.

 

 

 

 

 

Step 2
We’ll keep this as simple as possible. Write a “Dear so-and-so” and a sentence to use as reference. Now go ahead and click on the Code View.

 

 

 

 

 

 

 

 

Step 3
This next part will look a little complicated but stick with me. What we want to create is an easily identifiable menu that can direct your subscribers to sections of your website. The <div> tag allows us to easily code several addresses into one space. First, open your start tag with the code <div id=”menu”>. Enter it just above your “Dear so-and-so” text.

The <div> tag begins our section of coding and the id specifies an HTML attribute. Where do you want your menu to go? On the left, center or right? I’ll align it on the right. To do that, continue the code with <div id=”menu” align=”right”>. (But feel free to enter “left” or “center” to experiment.) The only spaces should be between div and id and “menu” and align. See below.

 

 

 

 

 

 

 

 

Now we want to choose our menu links. Pick 3 addresses at random. For this example we’ll set up 3 links in our menu: Home, Templates and Blog. I want the links to send readers to my homepage, template selection and blog page respectively. To do that, I need to hyperlink each menu item. Don’t remember how to link web addresses? Check out HTML Tips & Tricks #4 – Adding Links to refresh your memory.

To add your menu items, add each address and the word you want to link to it below the <div> tag with a standard <a href> tag. See below.

 

 

 

 

 

 

 

 

 

 

 

Close the tag with a </div> underneath your links and press Save & Close.

Step 4
Barring typos or dropped quotation marks, your template should look something like the image below. Personally, I often mistype “align” as “alight” – which renders the menu on the left side because only the word “align” will translate the code properly. It’s also easy to miss the first or last quotations when using the <a href> tags. If your menu doesn’t look right, go back to Code View and check each tag carefully.

 

 

 

 

 

The <div> tag is one of the most commonly used codes in HTML and this is only the start of what you can use it for. Add a menu at the top of your next email newsletter for a professional look and a convenient shortcut for your subscribers. Until the next lesson, happy coding!