The Script Tag

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I got a great question from reader Josh Kreis:

I’ve noticed that on a <script> tag, there are all kinds of variations that all seem to work cross-browser. What is necessary and what isn’t?

<script>
  //some javascript here
</script>

<script type="text/javascript">
  //some javascript here
</script>

<script type="text/javascript" language="javascript">
  //some javascript here
</script>

<script language="javascript">
  //some javascript here
</script>

<script type="text/javascript">
  //<![CDATA[
    // some javascript here
  //]]>
</script>

This is the scoop as far as I understand it. If anyone cares to elaborate or correct me if I’m wrong, please do in the comments.

/* WAY OLD - DO NOT USE */

<script language="javascript">
  //some javascript here
</script>

There never really was a language attribute (or if there was, it’s long deprecated). There is a lang attribute, but that’s for an entirely different purpose: identifying human language not computer language. This syntax with the language attribute was for telling (old) browsers to identify and run the script as JavaScript. It used to work, but it was never standard.

We now have a standard way to do that:

<script type="text/javascript">
  //some javascript here
</script>

The type attribute is the standard and correct way to identify and tell the browser what kind of script the tag contains. Sometimes you’ll see code that uses both the language and type attribute. As far as I know that’s never necessary.

Really specific explanation from the spec, language is an “obsolete but conforming” feature:

Authors should not specify a language attribute on a script element. If the attribute is present, its value must be an ASCII case-insensitive match for the string “JavaScript” and either the type attribute must be omitted or its value must be an ASCII case-insensitive match for the string “text/javascript”. The attribute should be entirely omitted instead (with the value “JavaScript”, it has no effect), or replaced with use of the type attribute.

More recently, you’ve probably seen a lot of this:

<script>
  //some javascript here
</script>

No attributes at all. This is the HTML5 way of handling script tags that contain JavaScript. It’s just assumed that the type is text/javascript. If it’s not (I’ve never even seen a different type of script) you’ll need to change it with the type attribute. I recommend this if you are using HTML5.

One more weird one:

<script type="text/javascript">
  //<![CDATA[
    $("<div />").appendTo("body"); // Some JS with HTML in it.
  //]]>
</script>

IF you are using XHTML still and IF your JavaScript has HTML in it (or even just the < character, as might be needed in greater-than logic), you’ll need these CDATA comments around the script IF you care about the script passing validation (you’ll get an error like: document type does not allow element “div” here). AND IF, you are putting script literally between the opening and closing script tags, not linking to a script src.

That’s a lot of IF’s.

Takeaways

  • If you are using HTML5, just use <script>.
  • If you are using anything older, use <script type="text/javascript">.
  • If you are writing scripts for people to use on their own sites (e.g. copy-pasteable code, WordPress plugins, etc, use <script type="text/javascript"> and CDATA.