Can you tag hyperlinks with arbitrary tags using the relative attribute?

Question

The following syntax seems to be valid in HTML:

 <a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>

Now, suppose I wanted to have an arbitrary word inserted in the place of "nofollow", would that be valid? For example, suppose there were three kinds of hyperlinks: red, green, and blue. Could I then use these as tags as follows:

<a rel="green" href="http://www.functravel.com/">Cheap Flights</a> 

If the above is allowed, could I go one step further and define a hyperlink with two or more relative attributes, like the following:

 <a rel="nofollow red" href="http://www.functravel.com/">Cheap Flights</a> 

I'm just interested in the theoretical possibilities.

Answer 1

No

The HTML specification defines the allowed values for the rel attribute.

Since there is a set of allowed values, deviating from that list is (implicitly) not allowed (and validation will throw an error if you try).

The class attribute allows you to add arbitrary tags to any element. data-* attributes also allow you to add custom information to an element. Use one of them instead.

Answer 2

The rel attribute specifies the relationship between the current document and the linked document. It is to be only used if the href attribute is present.

Some of the accepted values for the rel attribute are alternate, author, bookmark, external etc. Visit the link to know more rel values

Also if you use a custom value like blue, green and anything else, you can be able to access the value by jquery, but if you validate the page on w3 Validator it will give you an error.

For example:

<a id='_toBlue' rel='blue' href='blue.php'>blue</a>
<a id='_toGreen' rel='green' href='green.php'>green</a>

And with JQuery you can get the rel values for some purpose

var relBlue = "#!"+$("#_toBlue").attr('rel'); //gives desired result=>"blue"
var relGreen = "#!"+$("#_toGreen").attr('rel'); //gives desired result=>"green"

Now when you validate this HTML in W3 Validator you get the following error

Bad value #blue for attribute rel on element a: Keyword #blue is not registered.

Bad value #green for attribute rel on element a: Keyword #green is not registered.

So if you're Okay with it, you are good to use it, but HIGHLY NOT RECOMMENDED