Why do we use <script> for scripts, but not <style> for external CSS?
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?
Solution 1:
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:
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
LINKelement links an external style sheet to a document, thetypeattribute specifies the style sheet language and themediaattribute 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:
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