Example
Write “Hello JavaScript!” with JavaScript:
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>
Definition and Usage
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Tip: If you want to learn JavaScript, visit our JavaScript Tutorial.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <script> | Yes | Yes | Yes | Yes | Yes |
Tips and Notes
Note: If the “src” attribute is present, the <script> element must be empty.
Tip: Also look at the <noscript> element for users that have disabled scripts in their browser, or have a browser that doesn’t support client-side scripting.
Note: There are several ways an external script can be executed:
- If async=”async”: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
- If async is not present and defer=”defer”: The script is executed when the page has finished parsing
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
The “type” attribute is required in HTML 4, but optional in HTML5.
The “async” attribute is new in HTML5.
The HTML 4.01 attribute: “xml:space”, is not supported in HTML5.
Differences Between HTML and XHTML
In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
<script type=”text/javascript”>
//<![CDATA[
var i = 10;
if (i < 5) {
// some code
}
//]]>
</script>
Attributes
= New in HTML5.
| Attribute | Value | Description |
|---|---|---|
| async | async | Specifies that the script is executed asynchronously (only for external scripts) |
| charset | charset | Specifies the character encoding used in an external script file |
| defer | defer | Specifies that the script is executed when the page has finished parsing (only for external scripts) |
| src | URL | Specifies the URL of an external script file |
| type | media_type | Specifies the media type of the script |
| xml:space | preserve | Not supported in HTML5. Specifies whether whitespace in code should be preserved |
Global Attributes
The <main> tag also supports the Global Attributes in HTML.
Related Pages
HTML tutorial: HTML Scripts
HTML DOM reference: Script Object
JavaScript Tutorial: Learn JavaScript
Default CSS Settings
Most browsers will display the <script> element with the following default values:
script {
display: none;
}
HTML <script> async Attribute
A script that will be run asynchronously as soon as it is available:
<script src=”demo_async.js” async></script>
Definition and Usage
The async attribute is a boolean attribute.
When present, it specifies that the script will be executed asynchronously as soon as it is available.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
- If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
- If async is not present and defer is present: The script is executed when the page has finished parsing
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
HTML <script> charset Attribute
An external JavaScript with an UTF-8 character set:
<script src=”myscripts.js” charset=”UTF-8″></script>
Definition and Usage
The charset attribute specifies the character encoding used in an external script file.
The charset attribute is used when the character encoding in an external script file differs from the encoding in the HTML document.
HTML <script> defer Attribute
A script that will not run until after the page has loaded:
<script src=”demo_defer.js” defer></script>
Definition and Usage
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:
- If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
- If async is not present and defer is present: The script is executed when the page has finished parsing
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page.
HTML <script> src Attribute
Definition and Usage
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.
Note: The external script file cannot contain the <script> tag.
Note: Point to the external script file exactly where you would have written the script.
HTML <script> type Attribute
A script with the type attribute specified:
<script type=”application/javascript”>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>
Definition and Usage
The type attribute specifies the Internet media type (formerly known as MIME type) of a script.
The type attribute identifies the content between the <script> and </script> tags.
The media type consists of two parts: one media type and one subtype. For JavaScript, the media type is “application/javascript”.
