Do We Need Type="Text/CSS" for <Link> in HTML5

Do we need type=text/css for link in HTML5

The HTML5 spec says that the type attribute is purely advisory and explains in detail how browsers should act if it's omitted (too much to quote here). It doesn't explicitly say that an omitted type attribute is either valid or invalid, but you can safely omit it knowing that browsers will still react as you expect.

Is type=text/css necessary in a link tag?

It's not required with the HTML5 spec, but for older versions of HTML is it required.

Html 4 W3.org spec

http://www.w3.org/TR/html40/struct/links.html#edef-LINK
http://www.w3.org/TR/html40/present/styles.html

Type stands for The MIME type of the style sheet. The only supported value I have ever seen is Text/CSS, which is probably why HTML5 has dropped it. I imagine they had it for earlier versions to allow future expansion possibilities which never happened.

Using HTML5 and not specifying the type, I have run so far into no problems with compatibility even when testing older versions of IE.

Is type=text/css mandatory on the link element?

I found the answer on the official W3C HTML5 draft:

The type attribute gives the MIME type of the linked resource. It is
purely advisory. The value must be a valid MIME type.

For external resource links, the type attribute is used as a hint to
user agents so that they can avoid fetching resources they do not
support. If the attribute is present, then the user agent must assume
that the resource is of the given type (even if that is not a valid
MIME type, e.g. the empty string). If the attribute is omitted, but
the external resource link type has a default type defined, then the
user agent must assume that the resource is of that type. (...)

User agents must not consider the type attribute authoritative — upon
fetching the resource, user agents must not use the type attribute to
determine its actual type. Only the actual type (...).

The stylesheet link type defines rules for processing the resource's
Content-Type metadata. (...)

If a document contains style sheet links labeled as follows:

 <link rel="stylesheet" href="A" type="text/plain">
 <link rel="stylesheet" href="B" type="text/css">
 <link rel="stylesheet" href="C">

...then a compliant UA that supported only CSS style sheets would
fetch the B and C files, and skip the A file (since text/plain is not
the MIME type for CSS style sheets).

For files B and C, it would then check the actual types returned by
the server. For those that are sent as text/css, it would apply the
styles, but for those labeled as text/plain, or any other type, it
would not.

If one of the two files was returned without a Content-Type metadata,
or with a syntactically incorrect type like Content-Type: "null", then
the default type for stylesheet links would kick in. Since that
default type is text/css, the style sheet would nonetheless be
applied.

For the <style> attribute, the same document states:

The type attribute gives the styling language. If the attribute is
present, its value must be a valid MIME type that designates a styling
language. The charset parameter must not be specified. The default
value for the type attribute, which is used if the attribute is
absent, is "text/css". [RFC2318]

Do I still need to include type=value in HTML5?

It's not needed in HTML5 but in HTML<=4 or XHTML it's required.

Why do we use script for scripts, but not style for external CSS?

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.

Is the 'type' attribute necessary for script tags?

For HTML 4.x, the type attribute is required. Source

This attribute specifies the scripting language of the element's contents and overrides the default scripting language. The scripting language is specified as a content type (e.g., "text/javascript"). Authors must supply a value for this attribute. There is no default value for this attribute.

---

For HTML 5, it is optional. If it is not specified, it defaults to text/javascript. Source

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

Recommendation: See HTML 5.2

---

For HTML 5.2, it should be omitted if using a valid JavaScript MIME type (e.g. text/javascript). Source

Omitting the attribute, or setting it to a JavaScript MIME type, means that the script is a classic script, to be interpreted according to the JavaScript Script top-level production. Classic scripts are affected by the charset, async, and defer attributes. Authors should omit the attribute, instead of redundantly giving a JavaScript MIME type.

Is ordering of link rel=stylesheet ... and script ... tags significant?

for performance, CSS first then JS...(but JS yields best performance at the end of the markup as noted in some of the other answers)

stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.

quote from Optimize the order of styles and scripts (from Google's "Make the Web Faster" Best Practices docs)

Link CSS from another folder?

If your current folder is /current/folder/location/index.html, and your .css file is in /current/second/folder/style.css, then use this as an example:

<link rel="stylesheet" type="text/css" href="../../second/folder/style.css">

or alternatively:

<link rel="stylesheet" type="text/css" href="/current/second/folder/style.css">

However, if the second file is in `/current/folder/second/style.css, then use:

<link rel="stylesheet" type="text/css" href="../second/style.css">

---

Related Topics