HTML script Tag

The HTML script tag <script> is used to embed data or executable client side scripting language in an HTML page. Mostly, JavaScript or JavaScript based API code inside a <script></script> tag.

The following is an example of an HTML page that contains the JavaScript code in a <script> tag.

Example: JavaScript in a <script> Tag

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1> JavaScript Tutorials</h1>
  
    <script>
        //write JavaScript code here..
        alert('Hello, how are you?')
    </script>
</body>
</html>

Try it

In the above example, a <script></script> tag contains the JavaScript alert('Hello, how are you?') that display a message box.

HTML v4 requires the type attribute to identify the language of script code embedded within script tag. This is specified as MIME type e.g. 'text/javascript', 'text/ecmascript', 'text/vbscript', etc.

HTML v5 page does not require the type attribute because the default script language is 'text/javascript' in a <script> tag.

An HTML page can contain multiple <script> tags in the <head> or <body> tag. The browser executes all the script tags, starting from the first script tag from the beginning.

Scripts without async, defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. Consider the following page with multiple script tags.

Example: Multiple <script> Tags

<!DOCTYPE html>
<html>
<head>
    <script>
        alert('Executing JavaScript 1')
    </script>
</head>
<body>
    <h1> JavaScript Tutorials</h1>
  
    <script>
        alert('Executing JavaScript 2')
    </script>
    
    <p>This page contains multiple script tags.</p>
    
    <script>
        alert('Executing JavaScript 3')
    </script>
</body>
</html>

Try it

Above, the first <script> tag containing alert('Executing JavaScript 1') will be executed first, then alert('Executing JavaScript 2') will be executed, and then alert('Executing JavaScript 3') will be executed.

The browser loads all the scripts included in the <head> tag before loading and rendering the <body> tag elements. So, always include JavaScript files/code in the <head> that are going to be used while rendering the UI. All other scripts should be placed before the ending </body> tag. This way, you can increase the page loading speed.

Reference the External Script File

A <script> tag can also be used to include an external script file to an HTML web page by using the src attribute.

If you don't want to write inline JavaScript code in the <script></script> tag, then you can also write JavaScript code in a separate file with .js extension and include it in a web page using <script> tag and reference the file via src attribute.

Example: JavaScript in a <script> Tag

<!DOCTYPE html>
<html>
<head>
    <script src="/MyJavaScriptFile.js" ></script>
</head>
<body>
    <h1> JavaScript Tutorials</h1>
  
</body>
</html>

Above, the <script src="/MyJavaScriptFile.js"> points to the external JavaScript file using the src="/MyJavaScriptFile.js" attribute where the value of the src attribute is the path or url from which a file needs to be loaded in the browser. Note that you can load the files from your domain as well as other domains.

Global Attributes

The <script> can contain the following global attributes:

Attribute	Usage
async	`<script async>` executes the script asynchronously along with the rest of the page.
crossorign	`<script crossorigin="anonymous\|use-credentials">` allows error logging for sites which use a separate domain for static media. Value `anonymous` do not send credentials, whereas `use-credentials` sends the credentials.
defer	`<script defer>` executes the script after the document is parsed and before firing DOMContentLoaded event.
src	`<script src="uri\path to resource">` specifies the URI/path of an external script file;
type	`<script type="text\javascript">` specifies the type of the containing script e.g. text\javascript, text\html, text\plain, application\json, application\pdf, etc.
referrerpolicy	`<script referrerpolicy="no-referrer">` specifies which referrer information to send when fetching a script. Values can be no-referrer, no-referrer-when-downgrade, origin, same-origin, strict-origin, etc.
integrity	`<script integrity="sha384-oqVuAfXRKap7fdgc">` specifies that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation.
nomodule	`<script nomodule>` specifies that the script should not be executed in browsers supporting ES2015 modules.