Simple HTML for content creators

No one becomes a journalist or a writer because they are interesting in coding.*

And yet, here we all are producing content for websites – which means that the text we produce will inevitably be underpinned by code.

For all the everyday things that we do to text for the web, the underlying language is something called HTML (or hypertext mark-up language).

And all the everyday things we do will be handled by the content management system we use. Whether you are writing a post on Facebook, writing a WordPress blog post or producing a news article the underlying system will do the coding for you.

WHY BOTHER WITH UNDERSTANDING HTML THEN?

It’s true that 90% of the time, the HTML coding will be invisible to you – like magic.

But 10% of the time, something may go wrong. You have copied and pasted text from a word processing programme and no matter what you do all the lists have got little blobs instead of numbers (or have lost their little blobs). Or you have made a hyperlink and it just doesn’t work.

Then, dear reader, you are probably going to have to look at the HTML to see what is wrong.

HOW TO SEE THE HTML

It’s easiest to do this on a big screen.

In most browsers, you are looking for the page source. Right click anywhere on the web page, and select View Page Source (this might be called different things in different browsers – there’s a good guide here). You’ll almost certainly get a page that looks completely terrifying.

A screenshot of a tiny bit of the HTML code underlying one of my blog posts.

Stay calm.

If you are in a CMS, you are looking for a button or tab that carries the words HTML, or perhaps Text – that’ll show you a version of your text with the HTML displayed.

Again, stay calm. You are not going to have to do anything with the text that you see – you’re just going to find the bit that you need to change.

WHAT TO DO NEXT?

If you are running down an errant link with (say) the words “Click to read more about dogs”, then use your browser’s search function (good guide on how that works in various browsers here) to find the bit of code in the sea of gobbledygook.

AND NOW WHAT ARE YOU ACTUALLY LOOKING AT?

I have never yet found a better explanation of what HTML is than this one by Joe Burns from at least as far back as 2008:

H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms — you’ll be talking acronyms ASAP). Let me break it down for you:

Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.

Text is what you will use. Real, honest to goodness English letters.

Mark up is what you will do. You will write in plain English and then mark up what you wrote.

Language because they needed something that started with “L” to finish HTML and Hypertext Markup Louie didn’t flow correctly. Because it’s a language, really — but the language is plain English.

HTML Tags

HTML works in a very simple, very logical, format, says Burns. It reads from top to bottom, left to right. HTML is written with TEXT, and you use tags (or commands) to perform the functions you need. They usually begin with a less-than sign (<) and end with a greater-than sign (>).

COMMON HTML COMMANDS

Note that it doesn’t matter if you use lower case or upper case letters in your commands.

Bold letters: text inside here
Italic letters: text inside here
Underlined letters: text inside here
New paragraph: text inside here 
You see the pattern?

LINKS – HOW THEY WORK AND HOW TO FIX THEM

What a link (the bit you click on in text on a web page) is supposed to look like, and what the various parts of code mean:

<A HREF=” https://www.google.co.za”>Click here to go to Google</A>

Here’s what that all means (and here I am largely quoting Joe Burns again):

A stands for Anchor. It begins the link to another page.
HREF stands for Hypertext REFerence, which tells the browser: “This is where the link is going to go.”
http://www.google.co.za is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes.
“Click here to go to Google” is the text you want to appear on the page for the reader.
</a> ends the link command.

Things that often go wrong in links:
One or other of the quote marks are missing, or the equal sign is missing
The URL is not exactly correct – eg https://www.google.co.z, with the last letter “a” missing

Things that can go wrong with HTML generally:
A tag is incomplete (one of the < or > are missing, or a slash is missing)
An opening tag doesn’t have its matching closing tag

In all these cases, you type in the corrected code and save your article – the correction should then be active.

Email links

The mailto: command follows the same coding scheme as the hypertext link above. Here’s the pattern:

<A HREF=”mailto:firstname.lastname@gmail.com”>Click here to mail me</A>

It’s the same format as a link except you write “mailto:” in place of the http:// and an email address in place of the page address. Yes, you still need the tag at the end. There is NO SPACE between the colon and the e-mail address.

Final words: HTML is the easiest of codes to master – not least because there are so many good Internet resources with full listings of all the commands. There’s a good one here , and please do take a look because this article really only shows the ears of the hippo that is HTML. If this article leaves you feeling that you’d like to learn more, try an online course. Or book some time with me for a tutorial!

Contact me if you would like to chat about how I can help with all your organisational or communication needs (coaching, editing, writing, social media). And you can subscribe to my newsletter here.

Main photo: Florian Olivo on Unsplash

*But some journalists do discover that they are interesting in coding, and go on to work in fields like data visualisation.