Why do we use <script> for scripts, but not <style> for external CSS?
JavascriptCssHtmlW3cJavascript Problem Overview
A relative of mine who started to learn Web Development asked me this question.
Why <script src="min.js"></script> and <link rel="stylesheet" href="min.css">? Why not <style href="min.css"></style>. Why do we use link tag to add external CSS in the page but when we link CSS to page but we use <style>...</style> when we write CSS inside <head>?
I told him that it's because of spec. Is there any more info to give to him?
Javascript Solutions
Solution 1 - Javascript
It's historical... coincidence? You can recommend him reading part about Past of diveintohtml5.info, where there are some interesting stories, actually mail correspondences, between web developers. Web developers means they were, in fact, developing the Web we see nowadays ;)
I.e. <img> tag we are used to:
<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">
could be:
<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">
or
<A HREF="..." INCLUDE>See photo</A>
or
<INCLUDE HREF="...">
but finally devs decided to stick with <img>, which was already implemented:
> We’re not prepared to support INCLUDE/EMBED at this point. … So we’re
> probably going to go with (not ICON, since not all
> inlined images can be meaningfully called icons). For the time being,
> inlined images won’t be explicitly content-type’d; down the road, we
> plan to support that (along with the general adaptation of MIME).
> Actually, the image reading routines we’re currently using figure out
> the image format on the fly, so the filename extension won’t even be
> significant.
I don't know direct answer to your question, but I'm pretty curious about <link> tag, too. Finding answer would probably include some web archives digging.
Solution 2 - Javascript
There is a difference, at least from the W3C's point of view.
A <style> element introduces a block of CSS rules that apply to the current document. However, external style sheets are actually considered as whole documents related to the current page, and user agents are free to ignore such documents, depending on the type and media attributes of the link. For instance:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
In this situation, user agents would typically only follow one of the links, either the screen one (for normal rendering) or the print one (for, well, printing). The idea was to preserve bandwidth by only downloading the appropriate resource, instead of fetching everything and filtering on the media type later.
This is mentioned in the specification:
> When the LINK element links an external style sheet to a document, the
> type attribute specifies the style sheet language and the media
> attribute specifies the intended rendering medium or media. User
> agents may save time by retrieving from the network only those style
> sheets that apply to the current device.
Solution 3 - Javascript
They both have a basically identical meaning, and you have spotted a sort of inconsistency in HTML. The cause of this is that the standards were based on the implementations of different browsers. Different browsers came up with the attributes in the different tags, and the W3C just decided to keep some of the inconsistencies in order to maintain backwards compatability.
Elements that use src: script img iframe input video frame
Elements that use href: a link base
Solution 4 - Javascript
The <link> tag is used to "link" other documents to the current one, and describe it's relationship, or rel, with it.
You can also use <link> to link other things to the document. For example, favicons:
<link rel="shortcut icon" href="favicon.ico" />
Solution 5 - Javascript
This might explain things, I guess: http://www.w3.org/TR/html4/struct/links.html
Solution 6 - Javascript
Possible reason for link ref vs style:
link can only go on the head, where "Metadata content" is allowed, typically head,
style could not go in the body before HTML5 (now you can with scoped, but still not to external styles). Therefore, the choice between link ref and style src is arbitrary.
script, however, could already include an external script in the body before HTML5, so there had to be script src. But since it had to exist, why not allow it in the head as well (where script was already allowed), and disallow link rel=script to avoid duplication?