Blogging software isn’t perfect. That’s about the nicest way I can put that actually. As much as I love WordPress in particular, a lot of bloggers I know complain about how it formats posts. Personally I don’t run into any major problems when formatting blog posts, but I also happen to know HTML. So when I’m writing a blog post, I’m using the HTML editor, not the visual editor. I recommend that any blogger who’s struggling to find out why their posts aren’t formatting properly switch over to the HTML editor and take a look at what’s going on behind the scenes.
This guide assumes that you know very little HTML, so bare with me if there’s some obvious stuff that you already know. This post also focuses on WordPress as a blogging platform, but it may be useful to other bloggers.
Understanding the HTML Editor
In order to make any changes in the HTML editor, you need to grok what you’re looking at. Become familiar with common HTML tags:
<strong>This text will appear bold</strong>
<i>This text will appear italic</i>
<a href="http://webfly.wpengine.com">This is a link</a>
You’ll notice that most of these have an opening and closing tag. Italic for example begins with
<i> and ends with
</i>. This isn’t that important, but it does help to know this in an instance when you have a whole paragraph linking a URL when you only meant for one word to link to it… chances are you’re missing the closing
</a>. By the way, the only one of these that doesn’t wrap around text is
Breaking Down the HTML Jargon
Of course HTML doesn’t always look this simple. Sometimes it looks like this:
[caption id="attachment_838" align="alignleft" width="300" caption="Is Your Website Getting Left Behind?"]<img class="size-full wp-image-838" title="left-behind" src="http://webfly.wpengine.com/wp-content/uploads/2011/05/left-behind.jpg" alt="" width="300" height="300" />[/caption]
A little overwhelming at first right? Let’s break it down.
So in this example we have a caption tag around an image tag.
Here’s a breakdown of the caption tag:
[caption id="attachemnt_838" align="alignleft" width="300" caption="Is Your Website Getting left Behind?"]
- Captions are a WordPress shortcode and depending on how your WordPress theme handles them, they will have a different appearance on your blog.
idis simply an id that WordPress assigns when you inserted it into your post. You don’t need to change anything here.
Alignis exactly what it sounds like. You can set this to “
aligncenter” or “
Widthis the width of your image.
caption=is the caption text that appears under your image.
The next part of the code is the image tag.
<img class="size-full wp-image-838" title="left-behind" src="http://webfly.wpengine.com/wp-content/uploads/2011/05/left-behind.jpg" alt="" width="300" height="300" />
Classis another piece of this code automatically inserted by WordPress. It’s not necessary to display an image.
Titleis what appears when you mouse over the image. It’s important to fill this out because it helps search engines understand what your image is.
Srcis the URL to the image. If you entered that URL into your browser you would only see the image.
Altis your “alternate text” that displays if your image doesn’t load. This is also important to fill out.
heightare the dimensions of your image. If you had nothing entered in, the image would display at whatever its original size was.
The remainder of the code is simply the end of the caption tag:
Tip: WordPress shortcodes will always be in brackets “[ ]” while HTML will always be in tags “< >“. That means that short codes only work in WordPress while HTML tags work on any website.
So now that you know a little bit about HTML, let’s see what you can fix.
Common Formatting Problem: My images don’t go where I want them to!
One of the biggest gripes bloggers seem to have with WordPress is that their images never seem to go where they want them to. It looks fine in the visual editor, but the second they hit preview and suddenly there are unexplained gaps between sentences.
Take a look at this screen shot and you’ll see what I mean. There’s a huge gap between “You can select from the items which have already…” and “been submitted by other.” Yet in the visual editor, everything looks fine.
To know what’s really going on, you have to look behind the scenes, at the HTML editor. The HTML editor reveals that the code for the image (that bit that says “
[caption...“) was inserted mid-sentence, after the word “already.” Now it makes a lot more sense that there would be a gap between the word “already” and “been” in the post.
Now that we know what the problem is, we can insert the caption and image tag before the text, rather than in the middle of it. Just copy that portion of the code, delete it and paste it at the top of your paragraph.
Now the image will appear next to your text without inserting any unwanted lines between text.
Hopefully that will help anyone who’s been having issues with getting their images to go in the right place. Of course, formatting images can get much more complicated, especially when you have multiple images or lists. Stay tuned for more HTML tips.