'<link> vs <a>: when to use one over the other?

I have some confusion between <link> and <a>.

I know that in order to add CSS to an HTML document we use the <link> tag, for example:

<link type="text/css" rel="stylesheet" href="/spinner/styles.css?ln=css" />

But, I can't understand why we do not use an anchor <a> tag (as it contains the same necessary attributes), something like:

 <a type="text/css" rel="stylesheet" href="/spinner/styles.css?ln=css" />

Are these two tags interchangeable? Also, if this is possible, then how do we choose one over the other and why?

Update:

I got that confusion, because I saw in The Complete Reference HTML & CSS book regarding the rel attribute of the <a> Tag, that:

rel: For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object.

So I thought that it could do the same function as the <link> tag.

htmlhyperlink


Solution 1:[1]

Attributes are not the same as the tag they are in.

<link /> is an empty element, i.e. it can not have anything inside of it. All it does is specify a relationship with another document. Additionally, the <link> tag is only used in the <head> section.

<a></a> on the other hand, is not an empty element and specifies an object to be created on the page - like a clickable link or image - which takes the user to some other location. This tag is only used in the <body> section.

So, even though the tags can have the same attributes, that does not mean they do the same thing.

Solution 2:[2]

You can't use A tag to add css to HTML document because it is meant for creating clickable hyperlinks between documents.

But if you would like to create link allowing users to download css file you could do this

<a type="text/css" rel="stylesheet" href="/spinner/styles.css?ln=css">Download css</a>

Solution 3:[3]

Anything in <a>insideanchortag</a> is visible to end user

But you cant see the <link /> data in end user view, It is only visible in inspect element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jon Egeland
Solution 2 Piotr Perak
Solution 3 TylerH

Related Questions