Jul 9, 2023

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 </h1>
      <script>
        //write JavaScript code here..
        alert('Hello, how are you?')
    </script>
</body>
</html>

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</h1>
  
    <script>
        alert('Executing JavaScript 2')
    </script>
    
    <p>This page contains multiple script tags.</p>
    
    <script>
        alert('Executing JavaScript 3')
    </script>
</body>
</html>

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 </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.