As someone with a web design background, I often notice the nitty gritty of blog posts, especially since blogging platforms have expanded the possibility of fully-fledged websites to a whole new lot of people, whereas before it was pretty much limited to those who knew how to code. This is brilliant, because being a good writer, photographer, musician, whatever, doesn’t always come with coding knowledge.

From my own blogging and through reading others’ I’ve noted some elements that are ‘necessary’ but may not be obvious when you’re using a template or the visual option in your admin section. They are things I use on an almost daily basis, so you could say I’m biased, but when I see that someone hasn’t taken advantage of something, for whatever reason, I can’t help but want to let them know how they might have altered the technical presentation, the way Google sees things, and the like, for the better.

So here are a few elements that are important to a website, and the basic ways you can implement them.

Title And Alt Tags

You can use ‘tags’ (code) on images to let people know the subject of the photo, and also to alert screen-readers (for blind visitors) to what the image shows. For example, if you’ve a photo of an Oxford college, I may not know it’s Oxford unless you say so in your blog post. And given that we often don’t actually want to talk about the subject of the photo – we merely want the image to add beauty to the post – it can be frustrating to a reader if they like the photograph but have no idea what it is of. Often an image will only quote a number, for instance if you’ve uploaded it straight from a camera.

There’s a very easy way to let readers know what the photo shows without altering the content of your posts, and that is to include the title tag when you add the image to the post. For example, if I were adding a photo of Worcester College in Oxford I would type the following (where “img href” specifies the location of the image):

<img href=”/myimagefolder/image.jpg” title=”Worcester College, Oxford University”>

Here is the result. Hover your mouse over the image.

Similarly, the “alt” tag (“alternative”) helps blind visitors who depend on their browser to read text aloud to them, and it can also be used to tell the browser what the photograph shows in general. It comes into play if an image won’t load – if the browser can’t find the photo, this alternative text will be displayed, so if nothing else readers will know there should be an image there. For example, this is what I use when I include a book cover in a blog post:

<img href=”myimagefolder/50shades.jpg” alt=”Book cover”>

Because I use both “title” and “alt” the final result of the book cover coding will be:

<img href=”myimagefolder/50shades.jpg” title=”E L James: Fifty Shades of Grey” alt=”Book cover”>

Depending on the reason for the photo, I might make my “alt” information similar to the “title” information.

An additional reason for adding these tags, if you want to optimise your blog for search visitors, is that Google and other search engines use the title and alt tags to further understand what your page is about. You’re likely familiar with the idea of keywords – the title and alt tags extend the possibilities for adding your keywords to the post.

Acronyms

You may have noticed that nine times out of ten, any acronyms I use on this site have a dotted line under them. If you hover your mouse over the acronyms you’ll see that the full phrase pops up over the letters. Using this – adding the full term without losing the abbreviation – is great because there will always be acronyms that some people do not know, and including the full phrase means they don’t have to go to Google and search for the meaning. (And searching on Google is difficult in these cases because many people use the same acronyms for different phrases.) Terms like ‘TV’ ‘DVD’ and ‘DNA’ are pretty universal and transcend cultures, but if you think of ‘ARC’, for example, how many casual readers will know that that means ‘Advance Reader Copy’? I know I had to Google it when I first became a book blogger.

If you want to provide acronyms on your blog, the coding is very simple. You include two tags around the acronym itself. The basic structure is full phrase, the acronym itself, then the closing tag. Examples:

<acronym title=”Advance Reader Copy”>ARC</acronym>
<acronym title=”Lord of the Rings”>LOTR</acronym>

To see the result, hover over the following text: ARC.

Using acronyms makes your posts more reader-friendly and limits the chances of you losing readers due to them not being able to understand your book-industry terminology.

The copyright symbol

This is one to use if you want to do things ‘correctly’. It’s easy enough to copy the copyright symbol from, say, a Microsoft Word document, but sometimes an Internet browser won’t show it properly. To combat any issues, there is a simple piece of coding that will produce a text-friendly version:

©

In other words if I’m writing “[copyright symbol] 2013 The Worm Hole” I will type:

&copy; 2013 The Worm Hole.

Result: © 2013 The Worm Hole.

Both the ampersand and semi-colon are important to include, if you don’t include them it’ll simply say “copy”.

So there we are. Three pieces of coding that are easy to remember and use, and will aid your site in being visitor-friendly and search-engine-friendly, too.

What coding elements do you regularly use on your blog?