HTML - <script> Tag

Client-side script (JavaScript) is declared in an HTML document using the <script> tag. The script tag is employed for defining a client-side script for image manipulation, form validation, and dynamic content updates. The tag may either contain a link to an external file containing scripts or the script itself. The src attribute allows you to specify the location of an external file.

The HTML <script> tag can be placed in both the <head> and <body> elements. Although the location of a script within an HTML document does not affect how it is performed, the scripts that must run first must be placed in the document's heading. An HTML document can contain numerous instances of the <script> tag.

Syntax

Following is the syntax of <script> tag −

<script> .... </script>

Specific Attributes

The HTML <picture> tag also supports the following additional attributes −

S.No. Attribute & Description
1

async

Specifies that the script is executed asynchronously.
2

charset

Defines the character encoding that the script uses.
3

defer

Declares that the script will not generate any content. Therefore, the browser/user agent can continue parsing and rendering the rest of the page.
4

src

Specifies a URI/URL of an external script.
5

type

Specifies the scripting language as a content-type (MIME type).

Example

Let’s look into the basic example on the usage of the <script> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML script Tag</title>
</head>
   <body style="background-color:#EAFAF1 ">
   <script type = "text/JavaScript">
      document.write("You're visiting tutorialspoint!")
   </script>
</body>
</html>

When we execute the above code, it will generate an output consisting of script text displayed on the webpage.

Example

Consider another scenario where we are going to mention the <script> tag outside the <body> tag.

<!DOCTYPE html>
<html>
<head>
   <script>
      document.write("The Best E-Way Learning.!");
   </script>
</head>
   <body style="background-color:#D2B4DE ">
   <h1>TUTORIALSPOINT</h1>
</body>
</html>

On running the above code, an output window will pop up consisting of the text along with the script tag text displayed on the webpage.

Example

Following is the example, where we are going to use multiple <script> tag.

<!DOCTYPE html>
<html>
<head>
   <script>
      alert('WELCOME TO')
   </script>
</head>
<body>
   <h2>The Best E-Way Learning.!</h2>
   <script>
      alert('TUTORIALSPOINT')
   </script>
</body>
</html>

When we execute the above code, it will generate an output, making the script tag trigger, display an alert twice, and display text on the webpage.

Example

Following is an example where we are going to make modifications to the text using the <script> tag.

<!DOCTYPE html>
<html>
<body>
   <h1>BUGATTI CHIRON</h1>
   <p id="tutorial">The CHIRON is the fastest, most powerful, and exclusive production super sports car in BUGATTI’s history.</p>
   <script>
      function mytutorial() {
         document.getElementById("tutorial").style.fontSize = "25px";
         document.getElementById("tutorial").style.color = "#DE3163";
         document.getElementById("tutorial").style.backgroundColor = "#D5F5E3";
      }
   </script>
   <button type="button" onclick="mytutorial()">Click Me!</button>
</body>
</html>

On running the above code, the output window will pop up, displaying the text along with a click button on the webpage. When the user clicks on the button, the event gets triggered and applies CSS to the text.

html_tags_reference.htm
Advertisements