Summary
The HTML <script> element is used to embed or reference an executable script within an HTML or XHTML document.
Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.
- Content categories Metadata content, Flow content, Phrasing content.
- Permitted content Dynamic script such as
text/javascript. - Tag omission None, both the starting and ending tag are mandatory.
- Permitted parent elements Any element that accepts metadata content, or any element that accepts phrasing content.
- DOM interface
HTMLScriptElement
Attributes
This element includes the global attributes.
asyncHTML5- Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don't have the src attribute).
- See Browser compatibility for notes on browser support. See also Async scripts for asm.js.
src- This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.
scriptelements with ansrcattribute specified should not have a script embedded within its tags. type- This attribute identifies the scripting language of code embedded within a
scriptelement or referenced via the element’ssrcattribute. This is specified as a MIME type; examples of supported MIME types includetext/javascript,text/ecmascript,application/javascript, andapplication/ecmascript. If this attribute is absent, the script is treated as JavaScript.
Note that in Firefox you can use advanced features such as let statements and other features in later JS versions, by using type=application/javascript;version=1.8 - For how to include exotic programming languages, please read this article.
language- Like the
typeattribute, this attribute identifies the scripting language in use. Unlike thetypeattribute, however, this attribute’s possible values were never standardized. Thetypeattribute should be used instead. defer- This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. The
deferattribute shouldn't be used on scripts that don't have thesrcattribute. Since Gecko 1.9.2, thedeferattribute is ignored on scripts that don't have thesrcattribute. However, in Gecko 1.9.1 even inline scripts are deferred if thedeferattribute is set. crossorigin- Normal
scripttags will pass minimal information to thewindow.onerrorfor scripts which do not pass the standard CORS checks. To allow error logging for sites which use a separate domain for static media, several browsers have enabled thecrossoriginattribute for scripts using the same definition as the standard imgcrossoriginattribute. Efforts to standardize this attribute are underway on the WHATWG mailing list.
Examples
<!-- HTML4 and (x)HTML --> <script type="text/javascript" src="javascript.js"> <!-- HTML5 --> <script src="javascript.js"></script>
Specifications
| Specification | Status | Comments |
|---|---|---|
| HTML5 The definition of '<script>' in that specification. |
Recommendation | |
| HTML 4.01 Specification The definition of '<script>' in that specification. |
Recommendation |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
| async attribute | (Yes) | 3.6 (1.9.2) | 10 | Not supported | (Yes) |
| defer attribute | (Yes) | 3.5 (1.9.1) |
4 (follows a spec of its own) 10 (by the spec) |
Not supported | (Yes) |
| crossorigin attribute | 30.0 Chromium Bug 159566 | 13 (13) bug 696301 | Not supported | 12.50 | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
| async attribute | (Yes) | 1.0 (1.0) | Not supported | ? | (Yes) |
| defer attribute | (Yes) | 1.0 (1.0) | Not supported | ? | (Yes) |
Async support
In older browsers that don't support the async attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the async DOM property defaults to true for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the document.createElement("script").async evaluates to true (such as Firefox 4.0), set .async=false on the scripts you want to maintain order. Never call document.write() from an async script. In Gecko 1.9.2, calling document.write() has an unpredictable effect. In Gecko 2.0, calling document.write() from an async script has no effect (other than printing a warning to the error console).
Gecko-specific notes
Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), inserting script elements that have been created by calling document.createElement("script") into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set .async=false on them.
Also, <script> elements inside <iframe>, <noembed> and <noframes> elements are now executed, for the same reasons.