Welcome to Benchmark!

Pierce Nahigyan

HTML Tips & Tricks #3 - Header Alignment & Breaks

Dec 20 2010, 02:01 PM by

What Is HTML
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 as well as providing the backbone for Benchmark's email marketing software.



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>. We used these in our first HTML Tips & Tricks blog and we'll be using them again today.

The Benchmark Email Editor covers almost all of your HTML needs. But for those of you out there who like to see how the raw code transforms into your lovely newsletters, open up your email editor and let's get to it. Today we'll handle alignment formatting and line breaks.

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 is so you'll have less code to sift through when you start experimenting with your own HTML. Make two headings and leave a space between them. Like so:
Now go to your Insert Additional Elements box and look beneath the social links. Click on the Code View button to access your HTML.
This is the HTML. For those of you who work with code, you'll notice that the HTML is now color-coded. This is a new feature we'll be talking more about next week. For now, study that code and you'll notice an important tag.

See our two headings? There is no longer a space between them but two <br> tags. The <br> tag functions as a space. Imagine that every time you see a <br> the computer is pressing the Enter key. Often you may see a <p> tag, which designates a new paragraph, but <br> (which designates a line break) works better in the Benchmark Editor. <br> will give you a single space rather than the sometimes open break of the <p> tag.

Last week we went over how to center text by using the <center> and </center> tags. While this method will work in many back ends, a more specific tag will allow you to alter the size of your text and function in all HTML editors.

Find the <br> tag in front of your first header. After the <br> tag, type in <h? style="text-align: center;"> and put </h?> at the end of the sentence. See below:

You'll notice I replaced h? with h2. For those of you who didn't read our HTML Tips & Tricks #1, the h? tag controls the size of the header (ranging from 1 - 6). I'll let you decide what size you want your header. But what about this new code? It functions the same as last week's <center> tag except now it gives us the additional adjustment of header size. See the results below:
If you don't see the same results, make sure you're leaving no spaces between the text of your heading and the angle brackets. Also, it is important that the number you place next to the <h> is the same on both sides. If you use <h2 style=> for the start tag you must close the code with </h2> after the header's period.

For our next header I will use <h3> to indicate the change in size. To make a left-aligned heading, simply replace center with left.
Now your page looks like this:
Naturally, to make the heading right-justified, simply replace "left" with "right" after text-align.

Now, what about a division to offset the header from the rest of the text? To get something like this:
Just open your Code View and type <hr> after your alignment tags.
It's really that simple. The <hr> tag gives you a horizontal line under your heading. If you placed it after the first <br> tag the line would be one space lower. I hope these basic codes have been helpful so far. Next week we'll cover the different kinds of hyperlinks. Until then, happy coding!

 

Posted in Tips & Resources

Related Blogs