HTML Tips and Tricks

Introducing a new series! While it’s super easy to change how your blog post looks with a few clicks of a button in a rich text editor (that’s the one that looks like a word processor), being able to edit the “raw” HTML is a lot more useful and can end up being quicker to edit in the end!

We know that HTML and CSS can look a bit daunting if you’ve never used it before, so we’ll try to explain things as simply as possible. In this first post, we’ll go through the very basics – they’re things you probably include in every post without even realising it.

To turn a word bold, you would need to put a <b> or a <strong> before that word, then when you want the text to stop being bold, you would put a </b> or a </strong> in there, depending on what you used originally. Most HTML tags need to be “closed” in this way (although there are a few exceptions like the image tag, which we’ll explain later) so they must always match.

This word is <b>bold</b> and so is <strong>this phrase<strong>

To make something appear in italics, insert <i> or <em> before, and close it with </i> or </em>

This is in <i>italics</i> and so is <em>this!<em>

The latest HTML5 specification explains that <b> should be replaced with <strong> (and </strong> to close) and <i> replaced with <em> (and </em> to close). However, your blog provider may modify these so typing in <b> will automatically correct to <strong> (for example) when the post is published.

Want to underline something? Put <u> at the start, and </u> afterwards.

Hey! This is <u>underlined!</u>

Another thing that you’ll probably want to do is insert a link. For this, you would need to put <a href=”http://www.bonjourblogger.com” > (or whatever else you want to link, of course!) before the word/phrase you want to link, then close it with </a> There are other attributes that you can add into the link tag, such as alt text (which will help your visually impaired readers, and possibly the search engines), information to tell the browser which window to open the link in (whether it is the same window or a new one) or, of course, the nofollow attribute which as we explained in our “What does NoFollow Mean?” post recently, tells the search engines not to use your link to that site to boost their search ranking.

I'd like to link <a href="http://www.bonjourblogger.com">this bit of the sentence </a> to my favourite website about blogging!

Finally, to insert an image into a post, you would use <img src=”http:// www.bonjourblogger.com/image.jpg”>. Unlike the other tags mentioned above, you don’t need to close this one, but like the link attribute, you can also include information about how to align the image (whether you want the text to wrap around the image, etc), whether you want an image to have a border around it, and again, alt text – this will also help to inform the search engines what your image is about!

You can nest multiple tags – you just have to make sure that they don’t overlap. So, for example, you couldn’t use the following as that would break the rest of your blog:

This isn't good! <b><i>broken!</b></i>

But you could use this:

Look, it's <u><em>better</em></u> now!

which would both underline and make the text italic. (WordPress will correct this for you, but it’s better not to find out if it fixes it automatically!)

Let us know how you get on with this, and whether there is anything else you’d like to see!