Revision 1091983 of <script>

<h2 id="Summary">Summary</h2>

<p>The <em>HTML Script Element</em> (<strong><code>&lt;script&gt;</code></strong>) is used to embed or reference an executable script within an <abbr title="Hypertext Markup Language">HTML</abbr> or <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> document.</p>

<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Dynamic script such as <code>text/javascript</code>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">metadata content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLScriptElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
 <dd>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 <strong>src</strong> attribute).</dd>
 <dd>See {{anch("Browser compatibility")}} for notes on browser support. See also <a href="/en-US/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>.</dd>
 <dt>{{htmlattrdef("integrity")}}</dt>
 <dd>Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document. If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>This attribute identifies the scripting language of code embedded within a <code>script</code> element or referenced via the element’s <code>src</code> attribute. This is specified as a <abbr title="Multi-purpose Internet Mail Extensions">MIME</abbr> type; examples of supported <abbr title="Multi-purpose Internet Mail Extensions">MIME</abbr> types include <code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, and <code>application/ecmascript</code>. If this attribute is absent, the script is treated as JavaScript.</dd>
 <dd>If the <abbr title="Multi-purpose Internet Mail Extensions">MIME</abbr> type specified is not a JavaScript type the content embedded within its tags is treated as a data block which won't be processed by the browser.</dd>
 <dd>If the type specified is <code>module</code> the code is treated as a JavaScript module. See <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a><br />
 <br />
 Note that in Firefox you can use advanced features such as let statements and other features in later JS versions, by using <code>type=application/javascript;version=1.8</code>. Beware, however, that&nbsp;as this is a non-standard feature, this will most likely break support for&nbsp;other browsers, in particular Chromium-based browsers.</dd>
 <dd>For how to include <em>exotic programming languages</em>, read about <a href="/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</dd>
 <dt>{{htmlattrdef("text")}}</dt>
 <dd>Like the&nbsp;<code>textContent&nbsp;</code>attribute, this attribute sets the text content of the element. &nbsp;Unlike the&nbsp;<code>textContent&nbsp;</code>attribute, however, this attribute is evaluated as executable&nbsp;code after the node is inserted into the DOM.</dd>
 <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
 <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd>
 <dt>{{htmlattrdef("defer")}}</dt>
 <dd>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 <code>defer</code> attribute shouldn't be used on scripts that don't have the <code>src</code> attribute. Since Gecko 1.9.2, the <code>defer</code> attribute is ignored on scripts that don't have the <code>src</code> attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the <code>defer</code> attribute is set.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Normal <code>script</code> elements pass minimal information to the {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} for scripts which do not pass the standard <a href="/en-US/docs/HTTP_access_control">CORS</a> checks. To allow error logging for sites which use a separate domain for static media, use this attribute.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: html">
&lt;!-- HTML4 and (x)HTML --&gt;
&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;

&lt;!-- HTML5 --&gt;
&lt;script src="javascript.js"&gt;&lt;/script&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Adds the module type</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '&lt;script&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '&lt;script&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '&lt;script&gt;')}}</td>
   <td>{{Spec2('Subresource Integrity')}}</td>
   <td>Adds the integrity attribute.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(1.0)}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>async attribute</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
   <td>10<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>defer attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>
    <p>4[3]<br />
     10</p>
   </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>crossorigin attribute</td>
   <td>{{CompatChrome(30.0)}}</td>
   <td>{{CompatGeckoDesktop("13")}}</td>
   <td>{{CompatNo}}</td>
   <td>12.50</td>
   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
  </tr>
  <tr>
   <td>integrity attribute</td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>{{CompatGeckoDesktop("43")}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>{{CompatNo}}<sup>[5]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>async attribute</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>defer attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>integrity attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>{{CompatGeckoDesktop("43")}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>{{CompatChrome(45.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] In older browsers that don't support the <code>async</code> 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 <code>async</code> DOM&nbsp;property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE&nbsp;and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p>

<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> 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 <code>.async=false</code> on them.</p>

<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p>

<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code>&lt;script&gt;</code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p>

<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p>

<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("document.currentScript")}}</li>
 <li><a href="https://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>

<p>{{HTMLRef}}</p>