Home · Web Design · Dissection of the anchor element

Dissection of the anchor element

In everyday life, people probably click millions of anchors all around the internet. It's what connects web sites and web pages together. We often take this little HTML element for granted, but it's really in a way, the foundation of the entire world wide web.

And if your like me, you've been using the anchor; "<a>" element for as long as you can remember. And you've probably typed that little tag many countless times. And I'll bet, that you feel you've got a pretty good grasp of just how the <a> tag works.

But did you know that the <a> tag supports a type attribute? In addition to a rel, rev, hreflang, and charset attributes? What this means for us, is that there is more additional functionality here than first meets the eye.

Let us dissect the anchor tag, shall we? Here is the basic makeup of a anchor tag, in everyday use.

<a href="file.htm" target="_blank">new page</a>

In plain English, the above anchor tag, is given 1.) an href attribute with a value that will take us to the "file.htm" page and will 2.) open inside of a new window thanks to the target attribute value of "_blank".

In total, according to the W3C specification, it has seven native attributes, and eight additionally supported attributes. Not to mention, intrinsic events such as JavaScript method listeners like onclick, onfocus, onmouseover, etc. But for this article, I wish to focus on some of the other, mostly still unknown aspects of this element.

Relationship, and Reverse Link

For example, the rev and rel attributes play complementary roles–the rel attribute specifies a "forward" link and the rev attribute specifies a "reverse" (or backwards) link. Look at these two scenarios:

The code below indicates that foo.html is a glossary for the current document
<a href="foo.html" rel="glossary">#</a>
This indicates that the current document is a subsection of bar.html
<a href="bar.html" rev="subsection">#</a>

The values of the rel and rev are called link types, and you can insert multiple link types separated by white space.

Internationalization

Whoa, big word attack! Straight from the W3C. Not to worry, its not too complicated. The hreflang and charset attributes are also complimentary of each other.

Some web sites are built in multiple languages, you can click a button and the entire site will swap to another language and remain in that language via cookies. But back in the day, (and in some cases still) you'd have to click a link and visit a single foreign language page, and thats all you got.

So, in short, the hreflang attribute tells the browser "hey! we got a different language here". And then the browser also can switch the charset before it even loads the new page, via the charset attribute value it also finds.

<a href="index.html" charset="gb2312" hreflang="zh">Chinese version</a>

If you don't have the proper (fonts) support for the foreign language, your browser can also alert you beforehand, because it was given fair warning via these two attributes. Additionally, these attributes can also be used in the <link> element, and help to improve SEO for other languages groups. Happy coding!

Related URLs

Aug 10, 2007

Comments

Jermayn Aug 13, 2007

One of the best articles I have read from you, very informative indeed.

One thing I am a little unsure about is what does the do when you click on the link??

Write a comment

* = required field

:

:

:


8 + 1 =