We’ll finish up our tour of the body tag with several posts featuring general notes about common content elements. I’ll be taking my time with these as getting this stuff right will go a long way towards getting the most out of your site.

Comfy?

On with it then.

Links <a>

The link is the engine of the web. The concept of Hypertext (the H in HTML) itself is expressed in the power of the link. Google is Google because of the power of links. There is no better place to start.

Basic usage

<a href="http://www.drunkenfist.com/"  
        class="contact" 
        title="my personal site" 
        rel="me">DrunkenFist.com</a>

Write Good Link Text

For body copy you want to write link text that is descriptive of the link destination. generally this means a short phrase (5-10 words, depending on who you ask) that clearly describes the link. For that reason “click here” is generally not the greatest link text. For a live example and more on this topic take a look at link chapter of the the US Government’s Research-Based Web Design & Usability Guidelines. It’s full of really interesting tips on handling links.

For the SEO-minded, the above advice has the added bonus of generally including keywords which flow link juice and context to the targeted page.

Use Good Title Attributes

Not every link needs a title attribute, especially if it’s well written link text, but they can be used on some links to enhance the positive “scent.”

Learn common rel attributes and use them to your advantage

Rel attributes add computer readable information about the type of link. Here are some examples that I use. Definitions are from the Microformats site. Comments from me are in italics.

alternate

Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

You’ll see this in links to translated pages as well as in invisible link elements pointing to feeds and the like in the head of the document.

me

the referenced document represents the same person as does the current document.

Google uses this information to help put together some of their “social” profiles. It can be interesting or creepy depending on your attitude towards such things.

next

Refers to the next document in a linear sequence of documents. User agents may choose to preload the “next” document, to reduce the perceived load time.

I use this on the navigation of my gallery pages.

nofollow

indicates that the destination of that hyperlink SHOULD NOT be afforded any additional weight or ranking by user agents which perform link analysis upon web pages (e.g. search engines).

Used to help sculpt page rank. It used to be a more valuable tool.

prev

Refers to the previous document in an ordered series of documents. Some user agents also support the synonym “Previous”.

Like next I use this in my gallery pages.

tag

indicates that the [referenced document] is an author-designated “tag” (or keyword/subject) for the current page.

In use on this very page

toc

Synonym of contents (from “Table Of Contents”)

Another one in use on my gallery pages

Images <img>

Mark Pilgrim has a great post (which in turn is a part of his HTML5 book) on the introduction of images to the web.

Basic Usage

<img src="http://media.drunkenfist.com/img/art/graffiti_art/alphabet/graffiti-letter-b.jpg"
        width="593" 
        height="593" 
        alt="image, rob react, graffiti letter b" >

There are a couple of things to keep in mind when you’re working with images.

1. Always provide a height and width. This will speed up your site as browsers will be able to render a “placeholder” box and flow content around it before the actual file has been downloaded. This can be significant if you’re providing big images as content (think “art gallery”) as they can up to a few seconds to fully load. Owing to the nature of my personal site, I spend a lot of time thinking about how to serve big images on the web and this is a very clear win.
2. For content images (but not decorative images- which you shouldn’t be using anyway*), always provide alt text. This is both the right thing to do (it’s a primary step to making an accessible web site) and it will help computers (the most important of which are search engine spiders) understand the content of your images. I can tell you from personal experience image search traffic can be a hell of a traffic boost.

   This article looks at writing good alt text.

Image Formats

One thing that people often have trouble with is figuring out what image format to use. GIF? JPG? PNG? Here’s what I do.

Use JPGs for Photographs, Paintings, Etc.

If it got smooth transitions from light to dark, has a ton of colors and/or generally looks “real” your best bet is to use a JPG. The P ins JPG is for “Photographers” so it makes sense.

Here are a couple of examples of typical JPG images:

Use 8 Bit PNGs For Interface Images or Other Images With a Limited Number of Colors

If it’s got a limited number of colors (up to 256), I use an 8 bit PNG. For me this means most of my interface images are generated as 8 Bit PNGs. A good example of that is something like a site sprite

I also output crisp black and white line art as 8 Bit PNGs:

Use 32 Bit PNGs For Images with Special Transparency or Opacity Needs

The images on top are 32 Bit PNGs, see how the natural drop shadow and variable opacity works on top of the checkerboard? Move your mouse over the div and you’ll see it clearer as the background image will shift. Such is the power of 32 bit PNGs. These are larger file size (those bits come at a price,) so they can’t be used everywhere, but they’re really useful for special cases like this one.

I rarely use GIFs anymore.

Image Compression

I use Fireworks for image production, which does a really good job, by default, at image compression. With some occasional tweaks I’m able to get really good results. If you don’t have Fireworks, or patience to tweak images individually, I suggest using Smush.it on your images. Actually I suggest, using Smush.it even if you are using Fireworks and have a bunch of patience. Saving 5% is saving 5% especially if it’s this easy.

If you’re running the YSlow plugin, it’s available from the tools menu. It will cut your images down to size with very little effort.

*You should use CSS for styling. That includes decorative images. I’ll get into that once I tackle CSS. That’s coming soon! I swear.

That’s it for now. Next time we’ll look at a few more HTML elements. Should be a grand old time.