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

html hyperlink anchor stylesheet-link-tag

32,755

Solution 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

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

Yup Jon is Right,

One more addition to his answer is,

Any thing in <a>insideanchortag</a> is visible to end user

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

32,755

Author by

Tarik

IT Consultant, JSF and EJB Certified Expert

Updated on July 16, 2022

Comments

Tarik almost 2 years
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.
Tarik over 9 years

Thanks for the explanation, that also mean that we can't use <a> to add styling ? as rel dosn't mean the same thing ? is that right ?
jbutler483 over 9 years

@Tarik: that is correct. Literally open this page's source and you'll see the use cases.
Jon Egeland over 9 years

That's correct. As Piotr Perak's answer says, using the a tag would just create a clickable link to the css file, not actually include it in the document.
Spencer about 4 years

Actually <link> is allowed in the body since 2016. See this. So the answer needs to be updated.
hadi.mansouri about 4 years

@Spencer Yes, one of the usages of the <link> in the body is to add microdata to HTML document. For example, see the Example 3 on this page schema.org/Product which defines 'availability' for a product.