HTML guide to blogging using WordPress

WordPress makes it pretty easy for someone to post messages, create categories and manage comments and blogroll without knowing any HTML. Having said that, a basic knowledge of HTML can be quite useful.

Once you’ve logged into your admin interface and clicked on write you will be greeted by a page containing an area for you to insert your title and another for your content. In between, lies a toolbar with tabs which provides you with basic HTML functions. Some of them are obvious, but if you’ve never written HTML code you may not know what some of these stand for.

If you are familiar with Microsoft Word you will probably have guessed that b and i stand for bold and italic.

Highlighting a word in your post with either of these will wrap your word with the <strong></strong> tag to make it bold or <em></em> to emphasize your text and make it italics. Why strong and em? It’s a bit of a long story and you can learn more if you want to, but you don’t need to.

The link tag creates a link to a new html document. This one is pretty straightforward.

The b-quote stands for blockquote. It is perfectly acceptable to quote others in your blog and this is exactly what the blockquote does. By wrapping your quote between <blockquote></blockquote> tags this section of the text will be indented and you can even style it differently with advanced css (cascading style sheet) technique.

The del tag allows you to strike through selected text. This is useful if you’ve written a post, published it and made corrections to it at a later date.

The ins tag places a timestamp in the post. Personally I’ve never used this WordPress feature and have never seen it used.

The img tag allows you to insert an image in your text. This feature is only available if you’ve already uploaded your image on your server. If you are going to add images to your post, I highly recommend that you read Monique’s excellent post Tech 101: Using photos on your website.

The next three tags are in my opinion the most important tags and the ones that most bloggers aren’t aware of. The ul stands for unordered list, ol, ordered list and li, list item.

To create a list of items say numbered from 1 to 3 you would wrap your 3 lines with the <ol></ol> tags and the <ul></ul> will give you a list of three bullets.

Each line of text should also be wrapped between <li></li> tags.

Thus the following examples will give you an ordered list and an bulleted list:

Today I want to:
<ol>
<li>Sleep</li>
<li>Eat</li>
<li>Drink</li>
</ol>

I would like to eat:
<ul>
<li>Cheese</li>
<li>Bread</li>
<li>Chutney</li>
</ul>

The code tag is used for inserting code. Since WordPress was created and developed by coders, you can imagine why they thought this was a good idea. If you are reading this post, chances are, you won’t need to use it.

The more tag is a WordPress tag. You will notice that when you click on more, the tag <!—more--> is added to your text. It doesn’t look like the other ones. Adding this tag automatically creates the read more link in your article.

The lookup tab opens a pop up window allowing you to search for a word’s meaning online.

The close tab will close any open tags. But pay close attention to the closing tags. Software is only software after all and not a mind-reader. To make sure that your tags are all closed appropriately, save your post and use the preview pane at the bottom of the page to review it. If an entire paragraph is linked or bold, chances are you forgot to close a tag.