This is a cross post from The Brunx, a new group blog that some colleagues and I have created. It’s a blog to help website owners get smarter about using the web. Have a look and if you like it, subscribe!

As a website owner, you want to be in control of your website. In particular, you want to be able to change your site’s content as your business changes. You don’t want to have to pay someone else to make updates every time you launch a new product, run an event, or have a client success story to tell.

For all these reasons, most recent business websites have been built around content management systems (CMS). A CMS lets you add and edit content using a WYSIWYG (“what you see is what you get”) editor, which makes formatting your website as easy as using a word processor.

At least, that’s the theory.

The problem with WYSIWYG editors

If you’ve spent much time actually using a CMS, you’ll have discovered a sad truth: WYSIWYG editors don’t always do a very good job. Things go wrong for no apparent reason. The spacing between paragraphs will start looking wonky. A whole block of text will appear in a bigger font size and you won’t be able to fix it. Special characters (such as accented letters in foreign words) will look fine in the editor, but appear as gobbledegook on the website itself.

When one of these things happens, you have three options:

1. Just put up with crappy-looking content
2. Make an emergency call to your web designer
3. Look at the underlying HTML and fix it yourself

Now, you might be perfectly with option 2, as long as you’re lucky enough to have a responsive web designer who’s happy to make little tweaks and doesn’t charge through the roof to do it.

But today I want to encourage you to declare independence from your web designer by learning some basic HTML – at least enough so you can have a go at option 3. You can save a lot of money and time just by learning enough HTML to take a look “under the bonnet” of your CMS and fix basic layout problems.

And I promise you, it’s easier than you think. I’m a humble copywriter with no programming knowledge whatsoever, and I managed to pick up some rudimentary HTML in just a few hours.

Um, what’s HTML again?

HTML (short for HyperText Markup Language) is the language used to create web pages (apart from the ones built in Flash). An HTML page consists of blocks of text surrounded by “tags” that tell your browser how to interpret that text. For example, there are HTML tags that tell the browser “this is a heading”, “this is a paragraph”, “this sentence is bold”, “this is a link”, “this is a bulleted list”, “insert an image here” – basically, any kind of basic formatting you might want to do on the web.

(More advanced formatting instructions – for instance, defining exactly what a heading should look like – are done using something called Cascading Style Sheets or CSS. Unless you’re really keen, CSS is best left to the experts, but you don’t need to know anything about CSS to use basic HTML.)

You can see an example of HTML by selecting “View > Source” (or similar) from your browser menu when you’re viewing any website. But more importantly for our purposes, any time you’re creating or editing a page in your CMS, there will be a button that allows you to toggle back from a WYSIWYG view to the underlying HTML. (The button will be labelled something like “View HTML”, “View Source”, or just “HTML”.)

When you create content in WYSIWYG mode (that is, using the standard editor), the CMS will try to interpret what you’ve entered and translate it into HTML. But this translation is often less than perfect. When something goes wrong, then as long as you know some basic HTML, you can click on the HTML button and tinker to your heart’s content.

Important caveat!

Before you tinker with any HTML on a live page, make sure you’ve copied the original HTML to somewhere safe, like a plain text file. That way, if you end up making things worse, you can always revert to what was there before!

Sounds good. So where do I start?

There are a ton of basic HTML resources out there, both online and in book form. Here’s a good one to start with. Don’t feel like you have to master everything: most of these books and tutorials teach you enough HTML to create a whole website, whereas you really only need to know how to format blocks of text.

Even if you learn nothing else…

Keep a list of HTML character codes handy. By inserting one of these codes directly into your HTML, you can ensure that browsers don’t have conniptions when they try to display special characters like accented letters, currency symbols, ampersands and so on.

For example, say I have a German employee called Müller who is particular about having the umlaut appear correctly in his name. All I need to do is look up the HTML code for “u umlaut” – it turns out to be ü – and insert it in the appropriate place in the HTML. In HTML, “Müller” looks like “Müller”.

As you get more familiar with HTML, you’ll often find it quicker to edit in HTML directly, rather than trying to work out how to do something in the WYSIWYG editor. If you get really keen, you may end up working in HTML pretty much full time. But you don’t need to go that far – any knowledge of HTML, no matter how small, will make you more independent and confident when it comes to editing your website.

Have you ever tried to learn HTML? Share your experiences and your favourite resources in the comments.