Knowing a little code is essential to creating the kind of post that will do well, it allows you to insert a little personality and to organize and format your information.

WordPress does have a built in editor, but it can become cumbersome and confusing to use. I recommend turning the visual editor off and doing it the old fashioned way: actually learning the tags you’ll need most often.

HTML Code

Although it looks complicated, the basics of HTML are sensible and easy to grasp. Code is inserted on either side of the text you’d like to affect and there is always an opening tag and a closing tag.

Header Tags

Used to break up sections and emphasize points. h1 is the largest and they grow smaller as the number goes higher.

The code looks like this:
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>

The results will look similar this: (They vary by WP template design).

h1 tag

h2 tag

h3 tag

h4 tag

Bold Text

Gives your words emphasis.

<strong>The code looks like this</strong>

The result looks like this

Italics

Another (less obvious) way to emphasize your text.

<italics>The code looks like this</italics>

The result looks like this

Small

Used to credit sources and make notes.

<small>The code looks like this</small>

The result looks like this

Centering

Often used for images, but can also be used to emphasize text or quotes.

<div align=”center”>The code looks like this</div>

Lists with bullet points

For listing short points – keep them one line long if you can.

The code looks like this:
<ul>
<li>List point 1</li>
<li>List point 2</li>
</ul>

The result looks like this:

• List point 1
• List point 2

Images

The code for images is a little more complicated, but learning it (or just cut and pasting it) allows you to not only manipulate your images, but to optimize them and make your blog more user friendly for handicapped and mobile readers.

When you use WordPress you can upload the images and copy the link URL into the code example below.

The code looks like this:

Opening tag —> <img src="http://www.yourwebsite.com/image/image-name.jpg" alt="The alt tag is what is vocalized to blind people when they visit your website" title="The title is the text that appears when your curser hovers over an image" width="width of your image" height="height of your image" /> <---closing tag. If you want to align your images to the right or the left of the text you can add (align="right / left") before you close the tag. Here is a shorter example (if you want to cut and paste one)
<img src="http://www.yourwebsite.com/image/image-name.jpg" alt="A pen nib dripping ink" title="A pen nib" width="100" height="177" />

The results look like this:

Links

Linking is a good way to get yourself noticed and give credit where credit is due. The concept of anchor text is often misunderstood. When linking to someone, give them a good one, use the name of the website, the website URL, article title or relevant keywords as your anchor text. I promise, very few people want you to point at them saying “click here”.

Best practice is to write with links in mind, crafting your words to create good links (to yourself and to others) benefits everyone involved, makes your links more valuable and keeps your copy on-topic.

The code looks like this:

<a href="http://www.somewebsite.com">Insert anchor text here</a>

The results look like this

There is plenty more to learn about HTML, however for your average blog post these are the few important bits everyone should know.

Be sure to look for more tips in the introduction to this blog post series, and part 2 on formatting. Up next in part 4 I will discuss images, how (and where) to look for them and some tips on editing and copy insertion.