Tag <script> In HTML

In this article, we look at some examples of Tag script with the belief that it will assist us gain knowledge.

The <script> tag is an HTML tag used to define a client-side script that is executed by the web browser. The script can be written in JavaScript, VBScript, or any other scripting language that is supported by the browser. The <script> tag is usually placed in the <head> section of an HTML document or at the end of the <body> section.

“Hello World!” can be written in JavaScript:


<!DOCTYPE html> <html> <head> <script> function sayHello() { document.write("Hello, world!"); } </script> </head> <body onload="sayHello()"> </body> </html>

Tag <Script> Usage

Tag <script> tag is employed to incorporate a client-side script known as JavaScript.

Whenever we discuss regarding Tag <script>, the src property refers to an independent script file or includes scripting commands.

JavaScript is frequently used for Client-side validation, Dynamic web content, and Interactive user interfaces.

Here is an example of the alert box in JavaScript:


<!DOCTYPE html> <html> <head> <script> function showAlert() { alert("Welcome To Mr Examples!"); } </script> </head> <body> <input type="button" value="Show Alert" onclick="showAlert()"> </body> </html>

When a button is clicked, this example shows how to change the text inside an element:


<!DOCTYPE html> <html> <head> <script> function changeText() { document.getElementById("text").innerHTML = "Welcome to Mr Examples!"; } </script> </head> <body> <p id="text">Click me</p> <input type="button" value="Change Text" onclick="changeText()"> </body> </html>
Advice: Check out our upcoming JavaScript tutorial if you’re interested in learning more.

This example illustrates how to make a button click modify the background color of an item:


<!DOCTYPE html> <html> <head> <script> function changeColor() { document.getElementById("elementId").style.backgroundColor = "maroon"; } </script> </head> <body> <div id="elementId"> Welcome To Mr Examples </div> <input type="button" value="Change color" onclick="changeColor()"> </body> </html>

IMPORTANT: There’s many numerous ways to run an external script:

  • When async=”async” is set, the script runs in parallel with the main page (the script runs simultaneously while the page is processing data).
  • Script will be executed after page processing in case async is not specified and defer=”defer”.
  • By default, a script is retrieved and executed prior to the browser beginning to process the page whenever async or defer is enabled.

Uses of Script Tag

The <script> tag in HTML has many uses, and is one of the most powerful and versatile tools available to web developers. Here are some common uses of the <script> tag:

  • The <script> tag is commonly used to add interactivity to web pages. JavaScript code can be used to respond to user actions such as button clicks, form submissions, and mouse events.
  • The <script> tag can be used to perform client-side form validation. This can help to ensure that user-entered data is valid before it is submitted to the server.
  • The <script> tag can be used to manipulate HTML and CSS elements on the page. This can be used to create dynamic effects such as animations and transitions.
  • The <script> tag can be used to load external JavaScript files into a web page. This is useful for including third-party libraries and plugins.
  • The <script> tag can be used to track user behavior on a web page. This can be used to gather analytics data and improve the user experience.
  • The <script> tag can be used to create cookies, which can be used to store user preferences and other data.
Advice: You might also want to look at the <noscript> element if users are using a browser that is not compatible with client-side scripting, or if they have turned off scripting in their browser.



The Tag script <script> are compatible with Global Attributes in HTML.

Attributes List

asyncasyncIndicates that this script is processed asynchronously (used only for external scripts).
Specifies the HTTP CORS mode for the request.
deferdeferIndicates that the script is invoked after the page has completed processing (in the case of external scripts).
integrityfilehashProvides a way for a browser to guarantee that manipulated code is not rendered if the script is loaded.
Prevents the script from being executed in browsers compatible with ES2015.
In order to fetch a script, determine which referrer information should be sent.
srcURLAn external script file URL is provided.
typescripttypeAn indication of the script’s media type.

A comparison of HTML and XHTML

In XHTML, scripts are specified as #PCDATA (rather than CDATA), indicating that entities are processed.

As a result, XHTML should encode all special characters, or wrap all content in CDATA:

<script type="text/javascript">
function changeColor() {
document.getElementById("elementId").style.backgroundColor = "blue";

Browser Compatibility


Predefined CSS

Whenever it comes to Tag script, many browsers will present the <script> tag with these default values:

script {
display: none;

HTML Script Tag Benefits

Here are some of the key benefits:

  • The <script> tag allows developers to add interactivity to web pages, making them more engaging and dynamic. This can improve the user experience and increase user engagement.
  • The <script> tag allows developers to load scripts asynchronously, which can improve page load times. This can be particularly beneficial for large or complex web applications.
  • The <script> tag is supported by all modern web browsers, making it a reliable and widely-used tool for web development.
  • The <script> tag is relatively easy to use, and does not require extensive knowledge of web development to get started.
  • The <script> tag allows developers to add complex functionality to web pages, such as form validation, data processing, and dynamic content creation.
  • The <script> tag can be used to track user behavior on a web page, which can be used to gather analytics data and improve the user experience.

Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *