What's the difference between using link and script tag to reference JavaScript source?

Question

I've tried using both the following source-reference-lines~~. They both compile~~. But what is the difference?

1st method:

<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

2nd method:

<link href="~/Scripts/jquery-1.4.1.js" type="text/javascript" />

Note: There's also the similar Difference between script and link as="script" tags which asks about <link href="js/script.js" as="script">, which is different.

link tag is used to relate stylesheets instead of javascripts. — Ahsan Khurshid
– Ahsan Khurshid, Commented Aug 29, 2012 at 12:54
@epascarello it compiles if inserted into the header in an ASP.NET Web Forms page, in Visual Studio, with ReSharper, even after rebuilding. That's all I've tried. — Aske B.
– Aske B., Commented Aug 29, 2012 at 13:16
I ran into this today too since JetBrains IntelliJ / WebSphere seems to think script is a possible value for link rel=. — Samuel Neff
– Samuel Neff, Commented Apr 27, 2014 at 16:22
I vaguely recall that it only compiled at first, of unknown (possibly buggy) reasons and then it didn't after I posted that comment (I forgot to return here and post that I guess). The IntelliSense has also often suggested things that were invalid values and this scenario may have been included in that. I haven't tried it in IntelliJ though. — Aske B.
– Aske B., Commented Apr 27, 2014 at 22:20
Not sure why someone thought about two separate methods to import css and JS. It could simply have been <import docname="x.ss" type="css"> — Dhananjay
– Dhananjay, Commented May 14, 2018 at 20:57

Ahsan Khurshid · Accepted Answer · 2013-09-03 05:55:57Z

36

link tag is used to relate stylesheets or any other linked documents instead of including javascript files.

The HTML Link Element <link> specifies relationships between the current document and other documents. Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.

rel Attribute:

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.

Possible Values:

alternate - An alternate version of the document (i.e. print page, translated or mirror)
stylesheet - An external style sheet for the document
start - The first document in a selection
next - The next document in a selection
prev - The previous document in a selection
contents - A table of contents for the document
index - An index for the document
glossary - A glossary (explanation) of words used in the document
copyright - A document containing copyright information
chapter - A chapter of the document
section - A section of the document
subsection - A subsection of the document
appendix An appendix for the document
help A help document
bookmark A related document
shortcut icon A related (favorite icon) image of the document

While The HTML Script Element <script> is used to embed or reference an executable script within an HTML or XHTML document.

edited Sep 3, 2013 at 5:55

answered Aug 29, 2012 at 12:56

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aske B. Over a year ago

So can the link-tag only reference to CSS files or is it just everything else than .js-files?

Ahsan Khurshid Over a year ago

Not only css, You can relate favorite icons, glossaries, contents etc... but not javasctipt

Andrew Koper Over a year ago

He asked about the link tage versus script tag (as I am looking for information about). A.K. wrote about the link tag his answer but wrote nothing about script tag.

Samuel Neff Over a year ago

Also confirmed with W3C draft w3.org/TR/2014/CR-html5-20140204/links.html#linkTypes

Franklin Yu Over a year ago

link tag with prefetch/preload relationship can download JavaScript files (without executing/including them, of course).

Daniel A. White · Accepted Answer · 2012-08-29 12:53:09Z

5

The second (using link) shouldn't work or run and is non-standard.

http://jsfiddle.net/qMKUv/

answered Aug 29, 2012 at 12:53

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

6 Comments

Aske B. Over a year ago

I'm not familiar with fiddle, but I'm guessing that the fact that the script does nothing when I run it, proves that it doesn't work, or am I misunderstanding your implication?

Franklin Yu Over a year ago

I got <link as="script" href="http://example.com/script.js" rel="preload" /> from a page in GitHub but it works on my Chrome. Weird.

Charlie Over a year ago

@FranklinYu I indeed saw it too. But they use preload here to start downloading the script, and use script src="" at the end of the body element to load it.

Franklin Yu Over a year ago

@Charlie, "preload" feature seems to be pretty new and not widely supported, is it? I haven't heard about this interesting feature before.

Charlie Over a year ago

@FranklinYu I don't know how Github handles it on the backend, and if they check if my browser will accept it first, but it's a handy technique to download the script before using it. I use Firefox 46.0.1

|

Manngo · Accepted Answer · 2023-04-30 22:24:48Z

HTML is full of historical quirks, and link vs script is one of them.

Originally, link was used to show the relationship between the current page and another, such as the next page. There was no sense of including more data into the current page.

When JavaScript was developed, it included the creation of two new tags: script to contain the JavaScript, and noscript. In non-supporting browsers (or those with JavaScript turned off) the content of the script tag would then be ignored, and the alternative content in the noscript tag would be used.

For reasons best known to the developers, the script tag doubled up as an include via a src attribute, but embedded JavaScript, if any, would be ignored.

CSS didn’t come into the picture until much later, and the developers also included an embedded version in the style tag. However, they took a different approach for an included file, and repurposed the link for that.

If JavaScript were developed more recently, it’s possible that they might also have used the link for included files, but that wasn’t to be.

code-8 · Accepted Answer · 2019-07-09 18:28:48Z

0

<link> for CSS
<script> for JS

answered Jul 9, 2019 at 18:28

code-8

59.5k122 gold badges397 silver badges678 bronze badges

Comments

Agus Suhartono · Accepted Answer · 2024-07-15 09:02:38Z

link for JavaScript to inform browser that JavaScript load dinamically.

But the script loading dinamicaly use DOM.

let scriptElement = document.createElement('script');
scriptElement.src = 'filename.js';

// If needed, you can also add other attributes to the <script> element
// scriptElement.async = true; // for asynchronous loading
// scriptElement.defer = true; // for deferred loading

document.head.appendChild(scriptElement); // Add to the DOM

To inform browsers of the existence of these dynamically requested files, you can explicitly declare them in the document head:

<link rel="subresource" href="filename.js">

reference : https://valex.github.io/script_tag.html#dynamic_script_loading

SHresTho12 · Accepted Answer · 2024-07-15 10:01:05Z

0

Purpose: <script> is for JavaScript code, either inline or external, while <link> is primarily for linking external resources like stylesheets.
Execution: <script> tags can execute JavaScript code, while <link> tags do not execute any code; they only fetch resources.

answered Jul 15, 2024 at 10:01

SHresTho12

1478 bronze badges

Collectives™ on Stack Overflow

What's the difference between using link and script tag to reference JavaScript source?

6 Answers 6

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related