Practical HTML: improving link semantics
Note: below is the translation of the article “Boost Your Hyperlink Power” . It highlights the use of the rel and rev attributes, as well as some microformats.
We use some HTML tags and attributes every day in our work. Headings, paragraphs, lists, and images are the basis for each web developer's markup. But the most common element will probably be the link - a simple tag that binds together all the pages, creating the very messy structure that we call the World Wide Web (WWW).
')
The full potential of the links lies in the
The
“So what,” you say. “This is what I already know,” and you will be absolutely right! But the link has something else besides the
Theory of relativity (
Maybe you have already read about the
The
Another common use of
In this case, the link between the current document and the related one — the RSS feed — is indicated as
Both of these examples use the
You can add additional information to this link using the
There is no definite list of values for the
Although you are absolutely free to use the values of the
This construct describes that the current page refers to a document marked as “license”.
The microformat
In this case, the label “Microformats” has been added for this document.
XFN (XHTML Friends Network) is a way of describing relationships between people:
This microformat greatly expands the possible use of the
Thus, I point out 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” (
If
The
The microformat
There is also an appropriate
Naturally, nothing prevents you from using both
There is a lot of potential behind the ease of use of
Many thanks to those who read the entire article completely. I would like to hear your opinion or comments on the use of
Web Optimizator: checking the speed of loading sites
We use some HTML tags and attributes every day in our work. Headings, paragraphs, lists, and images are the basis for each web developer's markup. But the most common element will probably be the link - a simple tag that binds together all the pages, creating the very messy structure that we call the World Wide Web (WWW).
Link as it is
')
The full potential of the links lies in the
href attribute, short for hypertext reference . It creates a one-way link of the current page with another resource, usually another similar page on the Internet:<a href="http://allinthehead.com/">
The
href attribute is in the opening tag a , between the opening and closing tags is the text to describe the link:<a href="http://allinthehead.com/"> Drew McLellan </a>
“So what,” you say. “This is what I already know,” and you will be absolutely right! But the link has something else besides the
href attribute.Theory of relativity ( rel ativity)
Maybe you have already read about the
rel attribute of the link. I bet that in the head section of your pages there will be something like this:<link rel = "stylesheet" type = "text / css" media = "screen" href = "styles.css" />
The
rel attribute describes the relationship between the current document and the one it points to. In this case, the value of the rel attribute is the stylesheet . This means that the linked document is a style sheet for the current one: it is this link between them.Another common use of
rel : <link rel = "alternate" type = "application / rss + xml" title = "My RSS Feed"
href = "index.xml" />
In this case, the link between the current document and the related one — the RSS feed — is indicated as
alternate : an alternative presentation of the current document.Both of these examples use the
link tag, but you can use the rel attribute with regular links as well. For example, we link to your RSS feed from the section:Subscribe to <a href="index.xml"> my RSS feed </a>.
You can add additional information to this link using the
rel attribute: Subscribe to <a href = "index.xml" rel = "alternate"
type = "application / rss + xml"> my RSS feed </a>.
There is no definite list of values for the
rel attribute, so you can use whatever you think semantically reasonable. For example, if you have a complex commercial web application that has a link to a hint, then you can determine the relationship between the current page and this hint using the help value:<a href="help.html" rel="help"> need a hint? </a>
Elementary microformats
Although you are absolutely free to use the values of the
rel attribute, there are already some common values when using microformats . Some of the simplest microformats offer options for rel using rel . For example, if you refer to the license under which this document is published, use the rel-license microformat: Distributed under <a href = "http://creativecommons.org/licenses/by/2.0/"
rel = "license"> Creative Commons </a>
This construct describes that the current page refers to a document marked as “license”.
The microformat
rel-tag goes a little further. It is used to indicate that the last part of the URL of the link is the “label” for the current document: Read about <a href = "http://en.wikipedia.org/wiki/Microformats"
rel = "tag"> semantic layout </a>
In this case, the label “Microformats” has been added for this document.
XFN (XHTML Friends Network) is a way of describing relationships between people:
<a href="http://allinthehead.com/" rel="friend"> Drew McLellan </a>
This microformat greatly expands the possible use of the
rel attribute. Like the class attribute, rel can take several values, separated by a space:<a href="http://allinthehead.com/" rel="friend met colleague"> Drew McLellan </a>
Thus, I point out 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” ( rev olution)
If
rel describes the connection between the current page and the one to which it refers, ( note: current page -> another page ) then rev used for inverse relationship: it determines the type of link of the page to which it is linked to the current one ( note: current page <- another page ). Below is an example that can be used in help.html:<a href="shoppingcart.html" rev="help"> return to the store </a>
The
rev attribute indicates that the current page is a help page, a hint for the one to which it refers.The microformat
vote-links allows you to use the rev attribute to refine your links. For example, by defining the value of a vote-for , you can indicate that your document supports the one referenced by:I agree with <a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>.
There is also an appropriate
vote-against value. It means that even though you refer to this document, you clearly indicate that you do not agree with it.I agree with <a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>
about the <a href="http://www.icr.org/" rev="vote-against"> creationists </a>.
Naturally, nothing prevents you from using both
rel and rev in one link:<a href="http://richarddawkins.net/home" rev="vote-for" rel="muse"> Richard Dawkins </a>
Reasonable majority
There is a lot of potential behind the ease of use of
rel and rev . It makes 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 empowering links.Related links
Many thanks to those who read the entire article completely. I would like to hear your opinion or comments on the use of
rel/rev , in particular, or microformats in general.Web Optimizator: checking the speed of loading sites
Source: https://habr.com/ru/post/31221/
All Articles