HTML Tips & Tricks for Bloggers

html tips and tricks
source: Evan Wu

While the visual editor in WordPress and other blogging platforms really gives you a lot of flexibility when formatting your posts, it’s a good idea to understand the HTML behind it as well. Not only does that allow you troubleshoot, but it also allows you to do more behind the scenes without having to pay or beg someone else to help you.

Here are some common HTML tricks that every blogger should know:

1. Clean up the HTML.

Blogging platforms have gotten pretty good at accepting something that’s been pasted from a text editor like Microsoft Word, but sometimes it can still cause issues. For example, if your text document has special formatting — smaller type or a special font — sometimes that will transfer over even if you don’t want to.

To fix it, the best thing to do is to clean up the HTML. Look for <font> or <span> tags and delete those (be sure to delete the closing tags — i.e. </font> or </span> — as well). These tags set color, size, typeface and more, so they’re often the culprit of any issues you run into.

2. Look for missing quotation marks.

I recently shared a post written in HTML with a group of bloggers, and the second half of the post kept disappearing on them. To figure out the issue, we simply went to the HTML view to the place where the post “broke” to look for any broken code. It turns out that I had left off a quotation mark at the end of an image source, and the HTML could not render without it. URLs and attributes must be enclosed in quotation marks inside an HTML tag, as you see in the example below:

<a href=”URL”><img src=”IMAGE URL”>

3. Watch out for smart quotes.

Similarly, I’ve talked about the danger of smart or curly quotation marks before. These are a symbol themselves, so they break HTML in the same way that a missing quotation mark does.

4. Using target=”_blank” rel=”nofollow”.

I probably type this string of code more than any other: target=”_blank” rel=”nofollow”

That command goes inside of an <a> tag (which creates a link) and tells your reader’s browser to open the link in a new tab. It also tells Google not to share “link juice” or credibility with this site. I use target=”_blank” for almost all links, and I add rel=”nofollow” to links that go to corporate or generic sites like Facebook and Flickr.

You can place those anywhere inside the <a> tag, although you’ll notice that WordPress often puts them in this order if you go to the visual view:

<a rel=”nofollow” href=”URL” target=”_blank”>LINK</a>

5. Fix the spacing.

If your post has odd spacing issues — an extra line break here or different size gaps there, look for these three tags:

  • When copying from somewhere else on the internet, watch out for <div></div> tags that might affect your spacing. You can simply delete these from around text unless you’ve put them there for a reason.
  • &nbsp; adds a space and can be useful for creating an extra space here or there, but on a line by itself, it can also creates an extra line break.
  • Similarly, <br/> is the actual code for creating a line break, which you may want sometimes and not want at others.

6. Set your image alignment.

This one is one of my favorites, mostly because it took me so long to figure it out when I was a new blogger! If you upload an image through WordPress or Blogger, you’re given the option to set your alignment. However, if you copy image code from somewhere else, you may not always have that option (especially in the sidebar, footer, etc.)

To change the alignment of your image, add class=”aligncenter” inside the <img> tag to center an image, or change it to alignleft or alignright as needed:

<img class=”aligncenter” src=”IMAGE URL”>

7. Change your image size.

Likewise, if you’re uploading a photo through the post editor, you can set the size before inserting it, or  drag the corners to resize it (hold shift to maintain the ratio).

But it’s not quite as easy to resize an image outside of that editor. When I was blogging just to stay in touch with family & friends, I would spend hours trying to figure out the correct height and width to resize my photos by changing those attributes in the HTML, which often resulted in distorted photos. A much simpler way to do this is to delete either the height or width tag and set the size for the remaining tag, which will automatically scale the entire photo.

So, for example, if you have a photo that is 928×433 pixels, your code will look like this:

<img src=”IMAGE URL” width=”928″ height=”433″>

If you want your photo to display at 500 pixels wide, you can simply erase the height attribute and change the width to 500, like this:

<img src=”IMAGE URL” width=”500″>

It will automatically scale the image to 500×229, no calculator needed!

Help me add to the list! What other HTML tricks have you learned?

Close Menu