I got my start in web publishing as an assistant editor for a sort of daily online magazine. This was an entry-level position, and my title was really a nice way of calling me a “production junkie.” My days were mainly filled with sending out newsletters, writing blurbs, and most of all, posting content.

Lots of it.

Not only was this several years before anyone had heard the phrase “content marketing”, it was also long before most content management systems had developed visual editors, or WYSIWYGs.

This meant everything that went up on the website needed to be HTML coded from scratch. New paragraphs? They needed code. Hyperlinks? They needed code. Tables? They needed lots of code, followed by a very large drink after.

Fortunately, today’s content management systems take care of a lot of this for you, creating the HTML on the backend while you post and tweak your content visually. With that being said, these programs still have their share of limitations, and as a marketer you still may find yourself needing to work some HTML magic to get your page looking just right. You might also need to review the HTML code of a page to see where things might be going wrong.

If you’ve never worked with HTML before, this may sound a bit daunting (after all, it’s like learning a whole new language). Fortunately, this language is pretty easy. Here are a few basic HTML tips to get you started, and which may help you at some point down the line.

(Note: HTML code requires you to choose the “HTML” or “Text” view option in your CMS. If you try adding this code in the visual editor, it won’t work and you will feel silly.)

Rule No. 1 – Follow the carrots

The first thing to remember is that pretty much all HTML code is encased in “carrots”, also known as the little greater than/less than characters on your keyboard (< >). Between these characters is where you tell the code what to do.

For example, a new paragraph would begin with the code <p>. When the paragraph is finished, you would then close it out using </p>. This pattern is followed with the majority of HTML code you’ll find yourself using.

Got it? Good. Now let’s look at some quick tips and tricks.

Font styles

The simplest HTML involves bold or italicized text. Sometimes bold is done with the code <b> </b>, other times you’ll see <strong> </strong>. These mean the exact same thing.

For italics, sometimes you’ll see <i> </i>, while other times you’ll see <em> </em> (for “emphasis”). Again, these mean the exact same thing.

Obviously, most visual editors have buttons to do this for you, along with other font style changes like size and style. But what many programs won’t do for you is…

Font colors

What if you want to change the color of your font and your editor doesn’t provide that option? You can use CSS code (sort of the more powerful cousin of HTML), or simply try the following:

CODE

<font color=”red”>text</font>

LOOKS LIKE
text

In this case, the word “text” would become red, but since I closed out the code, everything after it would remain standard black. You can change colors by writing out simple color names (“blue”, “green”,), or experiment with different shades by replacing those color names with HTML color codes, which can be found in charts like these.

Break tags

Another thing most editors won’t let you do is create single-spaced, non-breaking lines (in other words, a line that starts right under the one above it). Instead, you’re forced to just start a new paragraph.

To get around this, use the <br /> tag in place of the paragraph tags in the HTML. You only have to use this once per line, and it doesn’t need to be closed out like other HTML code.

CODE

<p>Brendan Cournoyer<br /><em>All-Star Shortstop</em></p>

LOOKS LIKE
Brendan Cournoyer
All-Star Shortstop

Hyperlinks

Hyperlink creation is another task that most editors will do for you, even giving you the option to have them open in new windows. The HTML code for this looks like this:

<a href=”URL” target=”_blank”>text</a>

The <a href= begins the hyperlink, after which you simply paste in the URL of the page you wan to link to (within quotations). You then close out the link with </a>. The target=”_blank” code tells the link to open in a new window (to have it open in the same window, just remove this code).

OK, so your editor does that for you. Well, what if you want to remove the underline in your hyperlinked text? All you need to add is a simple style code, like so:

CODE

<a href=”https://twitter.com/brencournoyer" target=”_blank” style=”text-decoration: none”>Follow me on Twitter</a>

LOOKS LIKE
Follow me on Twitter

Images

Adding images in HTML is easy. The only rule is that the image you choose has to be hosted online. Whether you’ve published the image to your own CMS or are grabbing it from somewhere else on the web, you’ll need the image URL (all published images have URLs, just like webpages, often ending in something .jpg or .png).

To embed an image, use the following code:

<img src=”IMAGE URL”>

Within this code, you can also adjust the height and width of the image, add a border, hyperlink it, and so on. For example, a square image with new dimensions set at 200×200 pixels with a thin black border would require the following code:

<img src=”IMAGE URL” border=”1″ height=”200″ width=”200″>

Alignment

Finally, you can easily change the positioning of text and graphics by changing the alignment of the paragraph they sit within. For example, starting a paragraph with <p align=”center”> will place everything after it in the center of the page, until the paragraph is closed out.

There are other ways to affect the alignment of on-page elements, but this one is by far the simplest.

As you can see, HTML coding isn’t all that complicated, and if you get good at it, there is a lot you can do to manipulate the look of your pages. 

Making quick changes like these are easy, but larger technical barriers can slow down your marketing. Check out this post about how to get around the IT department and get your content marketing moving at the pace it needs to.

About the Author

Brendan Cournoyer is the Director of Content Marketing at Brainshark, a business presentation solution provider that enables companies to improve productivity for sales, marketing and training. For more musings on the world of content marketing, SEO, and more, follow Brendan on Twitter @brencournoyer.