Posting Attractive Blog Posts

Most bloggers stick to paragraphs and an image or two when writing new posts. This is fine for some however you may want to broaden your horizons and learn more about the potential WordPress and its HTML counterparts have to offer.

The purpose of this post is to educate my clients and readers on some of the best practices concerning HTML in their WordPress posts and pages. Sure you can just write blocks of text and hope the content is compelling enough to stick but knowing a little HTML can go a long way in making your posts easier to read.

Learn Basic HTML

Paragraphs and Line Breaks:

The WordPress editor automatically removes <br> and <p> tags that don’t have any attributes and replaces them when your WordPress theme displays your content. This causes a lot of confusion when people who already know some HTML start trying to use the WordPress HTML editor and their paragraph tags keep disappearing. WordPress interprets a single line break as <br> and a double line break as <p>.

Headers:

Headers are a great way to tell your readers (and search engines) what the next block of text is about. Us humans have become accustomed to scanning posts rather than reading every little word. For this reason headers are a great way to help a reader find exactly what they’re looking for within your post.

<h1>Most Important Header</h1> <h2>Second Most Important Header</h2> <h3>Third Most Important Header</h3> ... <h6>Least Important Header</h6>

I usually try to pick up where my theme left off. So if my post title is using <h2> tags I will use <h3> tags to punctuate my main points in my post.

Images:

I personally think images are the most important part of a post next to its content. You are best off using the Upload/Insert functionality in your post editor. If your theme supports featured images you should most definitely be using them.

One of my WordPress image pet peeves is when people don’t use the built in CSS classes to align their images to the content. These are classes that the WordPress post editor uses by default and most quality themes will support.

A basic left aligned image in WordPress would look like:

<img src="example.jpg" class="alignleft" />

And there you have it. I’ll talk about the importance of additional tags like Alt and Title in a bit. For now let’s move on.

Lists:

Lists are a very important part of making your post scannable. I try and use them whenever I want to highlight key points because I know the reader is more likely to read them. There are two types of lists; ordered and unordered.

Ordered lists are exactly what they sound like:

First
Second
Third

And alternatively, an unordered list looks as follows:

Something
Something Else
And More

Your sidebar and navigation menus are most likely already making use of lists because of their ability to efficiently organize information. The basic syntax of a list is pretty straightforward.

First you need to declare what type of list you are using

<ol> – Ordered List
<ul> – Unordered List

And then you need to wrap your list items with the <li> tag.

A completed unordered list could look like this:

<ul> <li>Something</li> <li>Something Else</li> <li>And More</li> </ul>

Formatting:

You’ve got your main points highlighted with headers, lists and images to draw your readers eye. Now you can run though your post and do any additional needed styling to accentuate any remaining key ideas.

<strong> – Makes your content bold. Use instead of <b> to help search engines give extra weight.
<em> – Makes your content italic. Use instead of <i> to help search engines give extra weight.
<a href=""> – The anchor tag can be used to link to other websites or within your site. The href attribute specifies the destination of a link.
<blockquote> – Most themes will indent and emphasize blockquote text so this is a great way to emphasize chunks of text and quotes.
<pre> – By default, this tag maintains a text format. Good for bits of text where you want to preserve line breaks and spaces.
<code> – This tag distinguishes text that is computer code from normal language
<del> – This tag is useful for chunks of text you want to delete after a post has been published. Most browsers will render it as the original text with a line through it.
<ins> – This tag is useful for chunks of text you may want to add to your post after it has been published. Most browsers will render it as the original text with a line under it.

Accessibility

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities via Wikipedia. WordPress recommends that you use Alt and Title tags on images as well as Title tags on links.

Example:

<a href="example.html" title="Example"><img src="example.jpg" alt="Example" title="Example" /></a>

Using The HTML Editor (Video)

Conclusion

This is only a small sampling of the HTML tags you can use based on the ones I thought were most important. All of these HTML tags are either built into the WordPress editor or supported by popular WordPress themes. Of course focus more on the quality of your posts than using as many HTML tags as possible. Look at some of your favorite blogs to get an idea of how you might want to structure your posts. With a better understanding of whats possible you can create a more personal style.