A Simple and Non-Scary Guide to HTML for Bloggers

Simple guide to HTML for bloggers

Even if you haven’t launched your blog yet, you’ve probably come across the term ‘HTML’. You might know what it looks like. Or you might just have a hazy idea it has something to do with web pages – like I did when I started.

My first experience with HTML was back in 2002, when I wanted to change the design of my my first blog. But one look at all the seemingly random ‘code’ on the page and I immediately put designing my own blog in the ‘too hard’ basket.

In fact, anything remotely technical on that first blog felt too hard. Even making a word bold wasn’t easy. You couldn’t just hit the ‘b’ button in the back end of your blog to magically change it. You had to know the code for bolding words.

As a result, it took me three months of writing completely in plain text before I learnt my first bit of HTML code.

With that under my belt I decided I could learn a bit more. And I discovered the basics aren’t too hard to master.

And that with that knowledge comes benefits.

Like me when I started, many bloggers think HTML is complicated or intimidating. But it doesn’t need to be.

Today, I’ll explain what HTML is, what it looks like, how it works, and why it’s important for bloggers to have a basic grasp of it.

By the end of the post, you’ll be able to write your own simple HTML code (and I promise it’ll be much easier than you think).

Note: In this post, all instructions are for self-hosted WordPress blogs. But the HTML code itself will always be the same, regardless of what platform you use.

What Does HTML Mean, and What Does It Do?

HTML stands for ‘Hypertext markup language’.

It’s used to ‘mark up’ plain text so it can be formatted with paragraph breaks, bold or italic sections, coloured fonts, and much more.

The ‘hypertext’ part means the text can include links (or ‘hyperlinks’) to other resources.

If this blog post didn’t use HTML at all, it’ would start like this:

Even if you haven’t launched your blog yet, you’ve probably come across the term ‘HTML’. You might know what it looks like. Or you might just have a hazy idea it has something to do with web pages – like I did when I started. My first experience with HTML was back in 2002, when I wanted to change the design of my my first blog. But one look at all the seemingly random ‘code’ on the page and I immediately put designing my own blog in the ‘too hard’ basket. In fact, anything remotely technical on that first blog felt too hard. Even making a word bold wasn’t easy. You couldn’t just hit the ‘b’ button in the back end of your blog to magically change it. You had to know the code for bolding words. As a result, it took me three months of writing completely in plain text before I learnt my first bit of HTML code. With that under my belt I decided I could learn a bit more. And I discovered the basics aren’t too hard to master. And that with that knowledge comes benefits. Like me when I started, many bloggers think HTML is complicated or intimidating. But it doesn’t need to be. Today, I’ll explain what HTML is, what it looks like, how it works, and why it’s important for bloggers to have a basic grasp of it. By the end of the post, you’ll be able to write your own simple HTML code (and I promise it’ll be much easier than you think).

Not very easy to read, is it? With HTML, the post has paragraph breaks, bold text, and more.

What Does HTML Code Look Like?

All of your blog posts already include HTML that WordPress has put there for you. Here’s an example of HTML:

For a limited time, you can buy my ebook for just $3.99.

And here’s how that sentence would look on the live website:

For a limited time, you can buy my ebook for just $3.99.

This is what the code does:

  • The

    and

    start and end the paragraph.

  • The and start and end the section of bold text.

The

,

, and are called ‘tags’.

Each ‘element’ in HTML (e.g. a paragraph, a list, a section of bold text) has to have an opening tag and a closing tag. (You might also hear them called ‘start’ and ‘end’ tags.)

And closing tags always have a forward slash at the start.

This can be quite a lot to take in if you haven’t seen any HTML before. Here are another couple of example so you can see simple HTML tags in action:

For a limited time, you can buy my ebook for just $3.00.

This sentence would look like this:

For a limited time, you can buy my ebook for just $3.99.

For a limited time, you can buy my ebook for just $3.99.

[c]

This sentence would look like this:

For a limited time, you can buy my ebook for just $3.99.

Note: HTML instructions are always spelt using US English. So make sure you use ‘color’ and not ‘colour’.

How to View the HTML Version of One Of Your Blog Posts

When you write a blog post, you probably use the “WYSIWYG” (“What You See Is What You Get”) editor. This lets you see your post formatted in the same way it will appear on your website.

But you can easily switch to the HTML view of your post by:

  1. Editing an existing post (or creating a new one)
  2. Clicking the ‘Text’ tab at the top of the posting box (next to the ‘Visual’ tab).

You’ll now see your post marked up with HTML code. For instance, the previous few paragraphs of this post would look like this:

Text view of post

To make things easier for you, WordPress doesn’t include the

tags around paragraphs in the Visual editor. But they’re in the HTML on your actual site.

Creating an HTML Version of Your Post

If you’re guest posting for a blog that needs posts in HTML format, you can simply create your post as a draft on your own blog using the ‘Visual’ tab as normal.

Then click the ‘Text’ tab and copy the HTML version into Notepad document (or any other program that saves files as plain text).

When Might You Need to Use HTML?

Most of the time it makes perfect sense to stick with the visual editor. WordPress has made this more and more user friendly over time, and hopefully you’ll be able to do all the formatting you want using it.

However, sometimes it can be very handy to at least feel comfortable with viewing HTML and making minor edits.

For instance:

  • If something goes wrong with your post’s formatting and you can’t easily fix/undo it in the visual editor, you may be able to spot and correct the problem when you view the HTML code.
  • If you want to create a custom text widget for your blog (such as an ‘About’ widget to tell readers a little about you), it’s useful to be able to include a link to your ‘About’ page and a photo of you. While there are themes and plugins that can help, you may not want to add these to your blog. Using HTML is a quick, efficient way to achieve what you want with the widget.
  • If you’re asked to supply content in HTML format (e.g. when guest posting, and particularly when providing a guest post bio), you may need to copy and paste HTML (if not actually write it).

Trying Out Different HTML Tags

We’ve already looked at some simple HTML tags: , and .

Here are some more tags to try. Create a draft post or page on your blog, and don’t be afraid to experiment.

Line break:

This tag is opened and closed all in one, which is why it has a forward slash at the end.

The
creates a single line break (not a paragraph break). You might use it if you’re writing poetry.

These

Words

Are

All

Separated

By

Line

Breaks

In the visual editor, you can hold down Shift while hitting Enter to create a line break.

Horizontal Rule:


This is another tag that is opened and closed all in one. It creates a line across the page, like this:


It can be useful for separating one part of your blog post from another (e.g. if you have a special offer at the start or end).

In the visual editor, you can click the “Horizontal line” button to create one. It looks like this:

Horizontal line button in WordPress

Lists:

    or

      and

As a blogger, you’re probably familiar with the importance of lists. You’ll almost certainly want to create a list using bullet points or numbers at some point or other.

In HTML, these lists are called: