The Mueller Writing Blog

Blog posts, eBooks and other content marketing resources written by Heather Mueller

Do you live in the visual editor of WordPress? Time to learn some HTML!

Don’t worry. I’m not going to scare you with this post. The truth is I know very little code myself—I just have a really awesome WordPress developer who fixes all my goofs.

I am, however, going to encourage you to step out of your comfort zone, if even just a little.

Last month, I offered up the Mueller Writing checklist you can use before publishing important blog posts. (Get that cheat sheet here.) In it, I promised to offer some of my favorite HTML shortcuts in a follow-up post.

So, here goes…

In my years of writing web copy, I’ve learned that a little HTML knowledge goes a long way.

Tags I recommend getting comfortable with include:

1. target=“_blank”

What it does:
Opens your link in a new tab or window. Target=”_blank” goes within your href attribute (which you use to open a link in the first place).

So, for example, if you wanted to open the Mueller Writing homepage in a new tab the HTML would look like this:

<a href=”http://www.muellerwriting.com” target=”_blank”><Mueller Writing</a>

When to use it:
Now, some digital marketers are going to disagree with me on this one, but I’m still going to recommend it:

Any time you link from your own website to another domain, use target=“_blank” so that it will open it in another tab or window.

Why I like it:
You want readers to easily come back to your blog post. Not because you’re trying to trick them into sticking around, but because you’re providing something of real value.

Personally, I get annoyed when I click a link in a how-to blog post that takes me away to another website. If you do this, your visitors will have to hit the back button and then scroll down to where they left off on your post. It’s a step that many readers (including myself) simply won’t bother to take.

So do yourself a favor and use target=“_blank” when linking to another website, to make sure readers can easily pick up where they left off.

2. <h2></h2>

What it does:
Text enclosed inside these tabs become your secondary headline, or subhead. The “h” stands for headline. The number correlates to font size and style. You can also use h3s, h4s and so on. The higher the number, the smaller the font.

When to use it:
Use subheads to help break up text and make it easier to skim. Each webpage should have just one h1 (your primary headline), but you can have as many h2s, h3s, and so on as you like.

A word of caution:
When it comes to your headers, order is important. For example:

h1
h2
h3
h3
h4

NOT:

h1
h2
h3
h4
h2
h3

Here’s what SEO pioneer Bruce Clay had to say about the order of header tags in response to a question I posed through my connection with the SEO Content Institute:

Hierarchy [of subheads] is important, but it is just 1 of 200 variables and may not be a show stopper. I would not go out of my way to do it wrong. And it is lazy to use heading tags for font control instead of proper CSS styles. I think it is a mistake to ever intentionally violate intended hierarchy for that tag.

3. <blockquote></blockquote>

What it does:
Indents your text from both sides, similar to a “pull quote” in print collateral.

When to use it:
Any time you have a big block of quoted copy or would like to draw attention to a source (see my quote from Bruce Clay, above, for an example).

Why I like it:
This one is handy for testimonials, call-outs and customer reviews.

Here are a couple more HTML tags I use often:

<strong><strong>
Bolds copy you want to stand out on the page, which is good for the 79% of people who scan your content.

<em><em>
Creates italics. Again, use this for copy you’d like to stand out on the page.

<ul><ul>
Creates a bulleted list

Another reason I recommend knowing a little HTML

If you write blog posts and webpages in Microsoft Word first (which makes it easier to get your client’s or boss’s approval), knowing some HTML will make publishing go much faster. Cutting and pasting from Word into the visual editor can result in messy code and funky formatting.

If you add your most-often used HTML tags to your draft as you write, all you have to do is cut and paste into the text editor of WordPress.

Still afraid of the WordPress editor?

Here’s a tip: Make a change in the visual editor first, then immediately switch over to the text editor to see what happened in the code. Repeat this process and eventually those HTML tags will become second-hand.

0 comments… add one

Leave a Comment