Webifiable

Last time we started looking at the basics behind hyperlinks. While most websites now take care of the hyperlink code for you, it’s still good to know what’s going on behind the scenes, at least for troubleshooting purposes. Let’s finish up looking at hyperlink basics.

In addition to linking text, images can also be linked. You can use code like the following to link an image:

<a href=”http://www.google.com”><img src=”google-logo.png” /></a>

That would presumably create an image of Google’s logo linked to Google’s website.

In addition to href, another attribute links can have is the “target” attribute. This tells the browser where to open the link. The default setting is to open links in the same window and/or tab. You can open links in a new window or a tab like this:

<a href=”http://www.google.com” target=”_blank”>This will open Google in a new window or tab</a>.

Note that you can’t control whether it opens in a new window or tab. That’s up to the user’s browser settings. In fact, they may even have it set so that the link actually opens in the same window or tab. So the target attribute is not currently used nearly as much as it used to be.

We mentioned last time that adding a “mailto:” at the beginning of a link makes browsers open your email program and start an email addressed to that individual. In fact, you can also specify the subject as in this example:

Feel free to <a href=”mailto:info@webifiable.com?subject=Complaint from website visitor”>email me with any complaints</a>.

In fact, you can actually set up a link to carbon copy someone else as well.

Feel free to <a href=”mailto:info@webifiable.com?cc=steve@apple.com&subject=Complaint from website visitor”>email myself and Steve Jobs with any complaints</a>.

You can also start the email body with “body” and a blind carbon copy with “bcc.” Just be sure to start with mailto:email@domain.com, follow that with a ? before the first parameter, and a & before any other parameters.

In addition to “mailto:”, you can also use a “tel:” to indicate a telephone number:

You can call our <a href=”tel:1-555-555-5555″>job hotline</a> any time!

This is certainly most common on mobile websites, where users are already surfing the website on their phone.

Hopefully you have a better grasp of just what hyperlinks can do now, and can at least trouble-shoot any hyperlink weirdness your CMS creates more easily.