<script> and <noscript>
The <script> element contains or loads data or executable code. This is typically used to load JavaScript code. The <noscript> element represents alternative content to show when scripting is not allowed. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <script> element contains or loads data or executable code. This is typically used to load JavaScript code. The <noscript> element represents alternative content to show when scripting is not allowed. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
| HTML attribute | ||||||
async | 1 | 12 | 3.6 | ≤4 | 18 | ≤3.2 |
| The crossorigin attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute. | 19 | 14 | 14 | 6 | 25 | 6 |
defer | 1 | 12 | 3.5 | 3 | 18 | 2 |
integrity | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
src | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The type attribute of the element indicates the type of script represented by the element: a classic script, an import map, a JavaScript module, speculation rules, or a data block. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTML script elements expose the HTMLScriptElement interface, which provides special properties and methods for manipulating the behavior and execution of elements (beyond the inherited HTMLElement interface). | 1 | 12 | 1 | 3 | 18 | 1 |
| The async property of the HTMLScriptElement interface is a boolean value that controls how the script should be executed. For classic scripts, if the async property is set to true, the external script will be fetched in parallel to parsing and evaluated as soon as it is available. For module scripts, if the async property is set to true, the script and all… | 6 | 12 | 3.6 | 5.1 | 18 | 5 |
| The crossOrigin property of the HTMLScriptElement interface reflects the CORS settings for the script element. For classic scripts from other origins, this controls if full error information will be exposed. For module scripts, it controls the script itself and any script it imports. See CORS settings attributes for details. | 19 | 14 | 14 | 6 | 25 | 6 |
| The defer property of the HTMLScriptElement interface is a boolean value that controls how the script should be executed. For classic scripts, if the defer property is set to true, the external script will be executed after the document has been parsed, but before firing Document/DOMContentLoaded_event event. For module scripts, the defer property has no… | 1 | 12 | 3.5 | 3 | 18 | 1 |
| The integrity property of the HTMLScriptElement interface is a string that contains inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
| The src property of the HTMLScriptElement interface is a string representing the URL of an external script; this can be used as an alternative to embedding a script directly within a document. | 1 | 12 | 1 | 3 | 18 | 1 |
| The supports() static method of the HTMLScriptElement interface provides a simple and consistent method to feature-detect what types of scripts are supported by the user agent. | 96 | 96 | 94 | 16 | 96 | 16 |
| The text property of the HTMLScriptElement interface represents the inline text content of the script element. It behaves in the same way as the HTMLScriptElement.textContent and HTMLScriptElement.innerText property. | 1 | 12 | 1 | 3 | 18 | 1 |
| The type property of the HTMLScriptElement interface is a string that reflects the type of the script. | 1 | 12 | 1 | 3 | 18 | 1 |
| Other | ||||||
| The HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON. | 1 | 12 | 1 | 3 | 18 | 2 |
- The `crossorigin` attribute was implemented in WebKit in WebKit bug 81438.
- The `crossorigin` attribute was implemented in WebKit in WebKit bug 81438.
- Chrome does not defer scripts with the `defer` attribute when the page is served as XHTML (`application/xhtml+xml`), see bug 41253514 and bug 41408348
- Since Firefox 3.6, the `defer` attribute is ignored on scripts that don't have the `src` attribute. However, in Firefox 3.5 even inline scripts are deferred if the `defer` attribute is set.
- Chrome Android does not defer scripts with the `defer` attribute when the page is served as XHTML (`application/xhtml+xml`), see bug 41253514 and bug 41408348
- Starting in Firefox 4, inserting <script> elements that have been created by calling `document.createElement("script")` no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set `.async=false` on them.
Syntax
<script src="app.js" defer></script>
<script type="module" src="module.js"></script>
<script>
console.log('インラインスクリプト');
</script>
<noscript>Please enable JavaScript.</noscript>Use cases
Strengthen structure
Use <script> and <noscript> to make the document outline, grouping, or semantics more explicit.
Improve meaning
Apply <script> and <noscript> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <script> and <noscript> in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.
Related links
Powered by web-features