Practical HTML: Improving Link Semantics

Note: the translation of the article “Boost Your Hyperlink Power” is below . It highlights the use of the rel and rev attributes, as well as some microformats.

We use part of HTML tags and attributes every day in our work. Headings, paragraphs, lists and pictures are the basis of the markup of each web developer. But the most common element will probably be a link - a simple tag that links together all the pages, creating the very messy structure that we call the World Wide Web.

Link as it is

The full potential of links lies in attribute href, short for hypertext reference. It creates a one-way link from the current page to another resource, usually another same page on the Internet:

The attribute hrefis in the opening tag a, between the opening and closing tags is the text to describe the link:

Drew mclellan

“So what,” you say. - “That's all I already know,” and you will be absolutely right! But the link has something else besides the attribute href.

Theory of Relativity ( relativity)

Maybe you already read about the attribute relat the link. I bet headthere's something like this in the section of your pages:

The attribute reldescribes the relationship between the current document and the one it points to. In this case, the attribute value relis stylesheet. This means that the linked document is a style sheet for the current one: just such a relationship between them.

Another common use rel:

In this case, the relationship between the current document and the associated one, an RSS feed, is indicated as alternate: an alternative representation of the current document.

Both of these examples use a tag link, but you can use the attribute relwith regular links as well. For example, we link to your RSS feed from the section:

   Subscribe to my RSS feed .

You can add additional information to this link using the attribute rel:

   Subscribe to my RSS feed .

There is no specific list of values ​​for an attribute rel, so you can use anything that you consider semantically reasonable. For example, if you have a complex commercial web application that has a link to a tooltip, you can determine the relationship between the current page and this tooltip using the value help:

need a hint?

Elementary microformats

Although you are completely free to use attribute values rel, there are already some generally accepted values ​​when using microformats . Some of the simplest microformats offer smart use cases rel. For example, if you refer to the license under which this document is published, use microformat rel-license:

   Distributed under Creative Commons license.

This design describes that the current page refers to a document marked as “license”.

Microformat rel-taggoes a little further. It is used to indicate that the last part of the link’s URL is the “label” for the current document:

   Read about semantic layout

In this case, the label “Microformats” has been added for this document.

XFN (XHTML Friends Network) is a way of describing relationships between people:

Drew mclellan

This microformat greatly expands the possible use of the attribute rel. Just like an attribute class, it relcan take several values, separated by a space:

Drew mclellan

Thus, I indicate that Drew is my friend, I met him and he is my colleague (after all, we are both fans of the Internet ( Web monkies )).

“We - want change” ( revolution)

If it reldescribes the relationship between the current page and the one to which it refers ( note: the current page -> another page ) then it is revused for the inverse relationship: it determines the type of link between the page that is linked and the current ( note: the current page < - another page ). The following is an example that can be used in help.html:

return to the store

The attribute revindicates that the current page is a help page, a hint for the one to which it refers.

Microformat vote-linksallows you to use the attribute revto refine your links. For example, by defining a value vote-for, you can indicate that your document supports the one it refers to:

   I agree with Richard Dawkins .

There is a corresponding meaning vote-against. It means that although you refer to this document, you explicitly indicate that you do not agree with it.

   I agree with Richard Dawkins

   about creationists .

Naturally, nothing prevents using both rel, and rev:

Richard Dawkins

The rationality of the majority

The ease of use reland revhiding rich potential. They make it relatively easy to add more semantic meaning to your links, which creates links that can then be processed by search robots, aggregators or browsers. Let your next step be a close acquaintance with these attributes and expanding the capabilities of links.

Related Links

• Great review article on microformats
• Answers to some questions on rel / rev at miroformats.org

Many thanks to those who read the entire article. I would like to hear your opinion or comments about the use rel/rev, in particular, or microformats in general.

Web Optimizator: checking the speed of loading sites