Welcome to Benchmark!

Pierce Nahigyan

HTML Tips & Tricks #1 - Resizing Headers

Dec 06 2010, 11:27 AM by

HTML stands for HyperText Markup Language. Nearly every web page you've ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page's content, and deciphering The Matrix.

To encode text inside your emails you 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 we place an end tag, which includes a forward slash </h1>.

Thankfully, the Benchmark Email Editor takes care of most of this coding for you. What today's blog is about is teaching you HTML, one tip at a time, to give you the option of coding yourself. So take a deep breath, Neo, because here we go.

Today we'll focus on the Headers Script. Using this code you'll be able to make a header or headline ranging in size from 1, largest, to 6, smallest. This can make the subtitles for promotional newsletters or key extra items in your emails stand out.

First, open your Email Editor (Step 4 when creating a new email) and choose a template. Find the section you want to edit and click on the pencil icon in the top left corner.
Start with a blank slate and delete all superfluous text. This will make it easier to find the text you want to edit in HTML. Now write a test header where you want the official header to go.
Your left toolbar contains your Text Formatting Options. At the bottom of the toolbar underneath the social network links is the Code View button. Click on this to get a look at your document's source code.
When you take a look at the daunting jumble of HTML code inside you'll understand why most users won't even bother with it. Remember, as you add more text this code jumble will become more dense. Our header is in there, though.

Now comes the fun part. Let's change the header size. This HTML trick is accomplished with the simple addition of <h?> and </h?>. The question marks represent a number from 1-6. 1 is the largest size header and 6 is the smallest. Let's start off with 1.

Don't worry about any of the other code. Just find where your header begins (in my case, it is the "W" of "Welcome to Benchmark Email!"). This is where your first HTML bracket will go. It should look like this: <h1>Welcome to Benchmark Email!

At the end of your phrase (in my case the exclamation point after Email!) enter </h1>. See below:
Remember to leave no spaces between the coding. Save & Close the window and check out your text.
No sweat, right? This is the largest header setting (1). If that's too big, you can scale it down. You can play with the numbers to see what works for you. Just go back into the code view and find your text. You don't need to re-enter the brackets, just switch the number after the <h>. The limit is 6, seen below.
And there you have it. When we break it down, HTML isn't quite as daunting as it first appeared. But of course there are many more tags to cover and we'll be back next week with a brand new set of code.
 

Posted in Tips & Resources

Related Blogs