The HTML <script> tag declares client-side script (JavaScript) in an HTML document. When defining a client-side script the script tag is used for image manipulation, form validation, and dynamic changes of content. The tag can include either the script itself or a link to an external file containing scripts.The path to the external file is specified with src attribute.
The HTML <script> tag can be placed in the <head> element, as well as within the <body> element. The script execution doesn’t depend on its location in an HTML document, but the scripts, that must be executed first, must be placed in the heading of the document. The <script> tag can be used in an HTML document many times.
![script tag example](/uploads/media/default/0001/01/7dceaef33f6894309aa26780b89994f289e6eaa2.png)
Syntax
The <script> tag comes in pairs. The content is written between the opening (<script>) and closing (</script>) tags.
Important notes
There are a few ways an external script can be executed:
- The async="async" attribute indicates, that the scripts are executed asynchronously, simultaneously with the loading of the page.
- When there is no async and defer="defer", the script is executed after the loading of the page.
- If there is no async and defer, the script is executed before the loading of the page.
For selecting an HTML element, JavaScript uses the document.getElementById() method.
Example of HTML <script> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="example"></p>
<script>
document.getElementById("example").innerHTML = "My first JavaScript code";
</script>
</body>
</html>
Differences Between HTML 4.01 and HTML5
HTML 4 requires the type attribute, whereas it is optional in HTML5. In HTML5, the async attribute is a new one. HTML5 does not support the HTML 4.01 xml:space attribute.
Differences Between HTML and XHTML
In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA). In such cases, the entities will be parsed.
In XHTML, all special characters must be encoded, or all the content must be wrapped inside a CDATA section.
<script type="text/javascript">
//<![CDATA[var i = 10;if (i < 5) { // some code}//]]>
</script>
Attributes
Attribute | Value | Description |
---|---|---|
async | async | Defines that the script is executed asynchronously. (For external scripts only).
Not supported in IE9 and older versions. |
charset | charset | Defines character encoding, used in an external file with the JavaScript code. |
defer | defer | Defines, that the script must be executed after the loading of the page. (For external scripts only). |
src | URL | Defines the URL of an external file with the JavaScript code. (Can be defined either relative, or an absolute URL). |
type | media_type | Defines the MIME-type of the script. |
The <script> tag supports the Global Attributes and the Event Attributes.
Browser support
|
|
|
|
|
---|---|---|---|---|
✓ | ✓ | ✓ | ✓ | ✓ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.