One of the most important elements in HTML is the anchor element. It provides the means for embedding links in your documents.
The anchor element puts the 'hyper' in hypertext.
The basic syntax of the anchor element is simple. It's delimited by the <A> and </A> tags, like so:
<A> ...text here... </A>
However, all by itself, that's not very useful. It doesn't do anything. You must specify one or more attributes for this element in order to get results.
We'll examine the two most common anchor attributes here:
The hyper-reference attribute makes the anchor element into a link. Here's a sample paragraph with an embedded link:
While surfing the Internet, I found an interesting essay about the goth subculture.
If you click on the link, you'll go to another website. Note that most (but not all!) browsers display links as colored, underlined text by default. Here's the code for the above paragraph:
<P> While surfing the Internet, I found an interesting <A HREF="http://www.gothics.org/subculture/">essay</A> about the goth subculture. </P>
Observe that the basic syntax of the anchor element remains the same, but the opening <A> tag has been expanded to include HREF, the hyper-reference attribute. A value must be specified for the attribute. In this case, it's a Web address: http://www.gothics.org/subculture/
The syntax for attribute is: HREF="URI", where URI can be any Uniform Resource Indicator.
A Uniform Resource Indicator is just a standard way of specifying Web addresses, e-mail addresses, and other resources. We've seen an example a URI for a Web address above. Here's the syntax for an e-mail address: HREF="mailto:fakeaddress@xula.edu". This might be incorporated into a paragraph of text like so:
This page authored and maintained by Bart Everson.
Here's the code:
<P> This page authored and maintained by <A HREF="mailto:fakeaddress@xula.edu">Bart Everson</A>. </P>
The name attribute makes the anchor element into, well, an anchor.
Have you ever noticed that some links take you not just to specific pages on the Web but to specific locations within that page? This page is an example. If you follow this link you'll go to the top of the page.
How is it done? There are two components. There must be an anchor with a hyper-reference attribute, like the link in the preceding paragraph. There must also be an anchor with a name attribute, which specifies a location in the document with a unique name. The first anchor points to the second anchor. The first sort of anchor is plainly visible, but the second sort is hidden. You don't see it when looking at the page, but it's there, hidden in the code.
For example, let's take the case of the top of this page. There's an anchor there which you can't see, but to which you can link. The code looks like this:
<H1><A NAME="top">Anchors (Links)</A></H1>
Nested inside the level-one heading is an anchor element, expanded to include the name attribute. The value for the name has been specified as "top". This creates a named anchor at the top of this document. I named it "top" so I could remember it easily. I could have named it "bottom," but life is confusing enough as it is.
Once a named anchor is in place, you can link to it with other anchor elements using the hyper-reference attribute. Use a hash mark (#) to append the name of the anchor to the URI, like this: HREF="index.html#top"
Anchors are inline elements.