Welcome to Benchmark!

Pierce Nahigyan

HTML Tips & Tricks #4 - Adding Links

Dec 28 2010, 07:14 AM by

What Is HTML?
HTML (HyperText Markup Language) is used by most web pages, especially those using HyperText Transfer Protocols (or HTTP, which is the first part of the web address at the top of this page). HTML is the programming that translates coding into the images that you see, embedding videos and images and scripts, structuring a page's content and providing the backbone for Benchmark's email marketing software.

To properly code with HTML you will use HTML elements called tags. These tags are enclosed inside brackets. For instance, <h1> is the start tag for a large header font. At the end of the header or headline that we are encoding, we place an end tag, which includes a forward slash </h1>. These tags enclose the section or text that you want to format. Think of the start tag as an open channel. The code inside designates what will flow into that channel. The end tag closes the channel and locks the section into the code.

The Benchmark Email Editor takes care of almost all of your HTML needs. But for those of you who like to do your own coding, or even for the curious who'd like to give it a try, these tips will give you a working knowledge of how to code, one tag at a time.

Today we'll focus on adding links to your email or newsletter. Adding links to websites can broaden the scope of your email or direct your readers' attentions to your own sign-up boxes or landing pages. It is an invaluable tool when email marketing and today we will cover two methods of linking.

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 crazy designs already added. Find the section you want to edit and click on the pencil icon in the top left corner.
Delete all of the body text. This will give you less code to sift through when you start experimenting with your own HTML. Now write a brief sentence with a word you want to use as a link. In my case I'll use "Benchmark Email". I want my users to be able to click on that word and link directly to my website.
Once you have the word (and know which address you want to link to), click on the Code View button under the Insert Additional Elements box.
This opens your document in HTML. What we're looking at is the same document stripped down to its code. Locate your sentence with the word you want to link.

Right after "Dear Bob," you will see two <br> tags. Remember from last week that these are line breaks. Because the code is all mashed together, the <br> tags indicate that I have left a space between "Dear Bob" and the body of the email (the body starts at the second line break).

Now it's time for us to turn our word into a hyperlink. Remember to begin the code at the start of your word, not at the beginning of your sentence. My start tag will look like this: <a href="http://www.benchmarkemail.com">. Leave no spaces between the start tag and your link word and make sure you have entered the full web address between the quotations. Leaving out a quotation at the beginning or end of the url can lead to an incomplete code and you may end up with a broken link. Also key to note is the space between the a and href.

At the end of your link word, simply close the code with the </a> tag. See below.

Save & Close your HTML window. If your url is accurate your word should now be linked.
Always check your link once you have encoded it. First save your email. Then click on the highlighted word.

The code we have used is a direct link. This means that when users view your email and click on the link their browser will take them directly to the url specified. This has its disadvantages. Most email marketers will tell you to keep your customers on your page - if you're linking to an outside source, a direct link will take them away. However, if you use a direct link at the end of your email or newsletter to take the user to a sign up box or special landing page, it may be exactly where you want them to go.

The next code we'll use opens the link in a new tab or browser. This is my preferred way of linking. If the user is done with what they're viewing they will close or exit out of their first window. But giving them the option to toggle between two tabs leaves them free to navigate between their source page and the linked material. In the end, it's a matter of what works best for you.

Open your Code View again and find your original start tag. The beginning is written the same, but after the quotation marks around your linked url, leave a space and write target="_blank">. Each one of those elements is important and it's easy to skip a space or a quotation (and don't forget the underscore before blank). See below for how it fits into the code.
If you have input the code correctly the linked word should not look any different. However, when you click on it it should now open in a new tab or new browser (depending on your internet settings). If it doesn't, go back to Code View and check your start and end tags. (When creating this blog I found that I had originally written three t's in http.)

Details matter. And now that I've illustrated how to use links I hope you'll give it a try. Until next time, happy coding!

Posted in Tips & Resources

Related Blogs