I’m writing this mainly for my sister Charleen, who wanted to know this for something on Mullenweg.com, but hopefully it will be helpful to anyone wanting to learn a little HTML.
Most Basic
The purpose of the anchor, or <A> tag, is to reference someplace. Links are the very essence of the web, the hyper in hypertext. Let’s talk about the most most important attribute, href. A very basic link might look something like this:
<a href="http://www.photomatt.net">PhotoMatt</a>
To break it down, the <a at the front indicates the beginning of the anchor tag. After that we have the href attribute, which basically tells the browser where to go when you click on that link. You can have a fully qualified address or a relative address there, which we’ll discuss more in a minute. The place we want to send the browser to is equal to “http://www.photomatt.net”. The two biggest mistakes people make when making an anchor tag are forgetting the equal sign and forgetting to quote the attribute value, in this case “http://www.photomatt.net”. (Note: you can quote it either with double or single quotes, which can be useful when echoing out statements in PHP.) Then we close the first part of the A tag (don’t forget the endquote!) with >. Now we write the text which we want to appear linked, which in this case is PhotoMatt, then we close the anchor tag with </a> to indicate that the link is over. You can enclose multiple words or even an entire sentence. That’s it! You now have a link. Note that all the code should be lowercase, like in the example above. This is a good practice in every version of HTML, and is required in XHTML.
Getting Fancy
Now I know you’re thinking, what more could there be? Well to be honest, there isn’t that much else. One common technique, and one I like to use on this site, it to use the title attribute to give a little more information about the link. The title attribute works functionally just like href, but instead the content displays as a tooltip or popup in most browsers, and can be useful for telling additional information about the link. Here’s an example:
<a href="http://www.photomatt.net" title="Photos and thoughts from Matthew Mullenweg">PhotoMatt</a>
The end result is this: PhotoMatt. In the title attribute you can put a description of the link, warn that it’s a PDF or Word document, warn that it’s opening in a new window, whatever you want. Zeldman.com makes great use of the title attribute on almost all his links.
Another commonly used attribute is target, which tells the browser where to open the link. You should use it when you want to open a link someplace other than the current window or frame. In XHTML the target tag is depreciated (illegal, gone) unless you’re using frames and the corresponding DOCTYPE. The goal of this attribute is to facilitate linking in frames. A common use of the target attribute is to open a link in a new window, and to do that you set the attribute equal to “_blank”. If you’re using frames you can set it to “_top”,”_self”, or “_parent”, which will replace either the entire window, the same window/frame, or the parent framesetting document. If you’re not using frames you should’t have to mess with much other than “_blank”, so don’t worry about this too much. There is one neat trick you might use though: if you want to open new windows on certain links, but you don’t want to be too intrusive, you can have all your links open in one separate window. The target attribute can refer to windows by name, very useful in a framed setting. However if no window/frame with that frame exists, it will open a new one. So if you gave all your link targets the same name, say “dalink”, the first time someone clicks a link with that target it will open a new window. If they leave that window open, go back to your page, and click on another link with an identical target, instead of opening a brand new window it will reuse the window you’ve already opened. A good example of this (again) is Zeldman.com. Here’s a tricked out example of what we have so far:
<a href="http://www.photomatt.net" title="Photos and thoughts from Matthew Mullenweg" target="_blank">PhotoMatt</a>
Coming soon: Accessibility, It’s All Relative, and Style Notes! Keep your dials locked.