Home » The tutorial » Anchor Tags

Anchor Tags 

Before we go too much farther with this, I'm going to go over a little bit of basic HTML so further discussion makes more sense to those following along at home. 

Links
It's called the web for a reason.  Pages link to other pages creating a web.  So your site probably needs to link to something.  If you want more than a single page web site it at least needs to link to other pages in your site.  This is done with the anchor tag.

If you look at the navigation section of the demo page we're building, you'll see anchor tags.  They start with <a> and end with </a>, and you change a few settings to get them to go where you want. 

First, everything between the <a> and </a> will show as a link.  So, <a>Home Page</a> will create a link with the text 'Home Page'.  <a><img xsrc="logo.gif"></a> will cause the image logo.gif to be linked.  (The <img> tag will probably be next on my list to discuss).

href
The first part of an anchor tag to worry about is the href.  This tells the browser where the link goes.  Take the following links for example.

<a href="contact.php">Contact</a>
<a href="http://www.google.com">Google</a>

The first takes you to the contact.php page in the same folder as the page you're on.  So, if you're viewing /index.php, it will be /contact.php.  If you're viewing /pages/bob.php, it will take you to /pages/contact.php.  The second will take you to another site.  We're going to focus on the first type because that's what you're more likely to be doing to start - linking within your own site.  And just so I don't leave it out, you could rewrite the first link as

<a href="contact.php">Contact</a>

and it would be correct, and it would get you to the right place.  But it's more typing than is needed and if Bob ever changes his domain he'll have to go back and change all the links.  It's just easier to use the first type whenever possible.  If you want to try and impress your web nerd friends, the first type is a relative link and the second is an absolute link.

target
I'm listing the target attribute to be complete, but unless you're using frames I suggest you don't use this.  The real reason for target is to allow you to specify which frame you want a page to open in if you're dealing with a frameset page.  But, you can also put target="_blank" or target="_new" to cause a link to pop open a new page.  Personally, I can't stand sites that pop up new pages.  Very few have a valid reason to do so.  But, if you want to do it, using the target attribute is the easiest way.

title
The title attribute is becoming increasingly important with search engines.  It is a way for them to know what the, well, title is of the link.  It is also used in some browsers as a tool tip over the link.  So title="Bob Smith Photography Home Page" would cause a tool tip over the home page link.

And, all of it together
Before scrolling down, see if you can figure out what all will happen from this code....

<a href="contact.php" title="Contact Bob Smith Photography" target="_blank">Contact</a> 

....no cheating....

Ok, you can peek.  This will display the word 'Contact' that links to the page 'contact.php'.  A tool tip with the text 'Contact Bob Smith Photography' will show when the user hovers their mouse over the link.  And it will open the link in a new window.

A special case for email
If you want to create a link that will allow the visitor to bring up their email client, there is a special trick.

<a href="mailto:bob@bobsmithphotography.net">Email Bob</a>

This will show the text 'Email Bob'.  When the visitor clicks on Email Bob their email client should come up, assuming it's set up correctly.  (If it's not, there's really not much you can do, but most everybody will be set up right.)  This gives you an easy way to let your visitors contact you.

One warning, spammers have robots out scouring the web looking for email addresses.  By putting your email in a link in this way it will be found and you will get spam.  In my case, I'm confident enough in the spam filtering of Thunderbird that I'm not worried about it and I'd rather get the random spam that gets through to make it easier for my visitors to contact me.  But if you're worried about spam, do not use this type of link.

And a quick mention of case
You'll notice I write all the tags in lower case.  For HTML, it doesn't matter.  <A HREF=""> and <a href=""> are the same.  For XHTML, which is supposed to replace HTML it does.  Everything is supposed to be lower case.  I type all my stuff in lower case just out of habit.