really basic HTML links

How to make hyperlinks is probably the most common HTML question I get from non-coding types. Bloggers and other web content managers just need to know how to make links. And though most Content Management Systems or blog software have an easy way to add a link to your content, they don’t always have an easy way to make an image into a link.

So here it is:

HTML tags that style text have an opening tag and a closing tag that closely mirrors the opening tag. Links are created with the <a> tag and include an instruction that tells the browser where to go called the href. The <a> tag precedes the text to link and the </a> tag closes the link. A standard link looks like this:

<a href=”http://link.to.website.com”>text you wish to link</a>

To link an image you just place the opening and closing link tags on either side of your image. Your image is delivered in a tag like this:

<img src=”http://path.to.your.image” />

Your new linked image will be something like this:

<a href=”http://link.to.website.com”><img src=”http://path.to.your.image” border=”0″ /></a>

You’ll notice I added border=”0″ to the image tag. That prevents your image from being surrounded by a border of your link color. Ideally, your designer has accounted for this in the stylesheet to your site where you can dictate rules for the style of images everywhere. But if not, it’s a handy thing to know. I know it’s annoying when linked images are surrounded in big, blue borders.