Link relations is a way to explain why a resource is be linked to as well as build an understanding of the relationship between data. Common uses of link relations in web design are linking to a stylesheet, image or a javascript file. HTML5 expands the concept of link relations even further by adding more categories to the vocabulary. By categorizing a link ( rel="" ), a web designer is able to tell the program interpreting the code how to process it.
There are two types of link relations:
- Hyperlinks
- External resources
Example of the most common uses of HTML link relationships:
- Stylesheets: Declaring that the resource is a stylesheet: rel="stylesheet"
- Icons: rel="icon"
- Nofollow: rel="nofollow" - Tells Google not to assign PageRank to the referenced website--a very important tool for SEO and web designers.
- Canonical: rel="canonical" - This indicates that there is another alternate link to access the referenced information and that search engines should favor the other link.
<link href="main.css" type="text/css" rel="stylesheet" />
There are quite a number of classifications for links. From specifying a usage to creating an understanding of directional navigation, the REL component of a link can provide helpful meta data for a browser or an application.
Navigational relationships:
- End: rel="end"
- Next rel="next"
- Previous rel="prev" or rel="previous"
- Begin rel="begin"
Other examples:
- Alternate media: rel="alternate"
- Citation: rel="citation"
- Footnote: rel="footnote"
- Copyright: rel="copyright"
- Returning navigation back to homepage: rel="start"
You can also use such meta data (or microformats) to provide an understanding of a relationship between people as well:
- Me rel="me" - Used commonly in social media to indicate that the linked person (or website) is one's self.
- Colleague, co-worker, neighbor, aquantance, friend or more...
