| by Arround The Web | No comments

HTML script tag | Explained

An HTML file consists of three main components header, body, and footer. Inside these elements, you can add other elements as nested elements, such as paragraphs, images, headings, labels, and more. Moreover, HTML also permits us to utilize executable code in it using script elements.

In this manual, we will explain what HTML “<script>” tag is and how to use it. So, let’s go!

What is HTML <script> Tag?

The HTML <script> tag is used to embed client-side code to HTML, such as JavaScript. This tag is utilized to access the added HTM elements like images and input fields to perform different operations, such as image manipulation, form validation, etc.

How to Use HTML <script> Tag?

There are two ways to define an HTML <script> tag:

  • To embed script code in HTML
  • To link external JavaScript file

Let’s first check out the syntax of the script element.

Syntax

<script>

  Code . . .
</script></tr>

In the above syntax, “<script>” is the starting tag, and “</script>” is the ending tag of the HTML script element. Between the starting and ending tags, add the code you want to execute.

The next section will describe how to embed JavaScript code in HTML using the script tag.

How to Embed script in HTML?

If you have a few lines of code in your HTML file and need to execute some JavaScript code specific to the added elements, then it is better to use a script tag internally.

Step 1: Create HTML File

In the below-given code block:

  • We have placed a div class named “main” inside the body element.
  • In this div, a heading is placed using the <h1> tag.
  • Then, a function named “show()” is defined that will display an alert box on the screen.

 

HTML

<body>
  <div class="main">
   <h1>Internal JavaScript</h1><br><br>
   <script>
    function show() {
     alert('LinuxHint is a Batch Tutorial Website!!');
    }
   </script>
   <button type="submit" onclick="show()">SUBMIT</button>
   </div>
</body>

Step 2: Style main div

Let’s style the main div:

  • First, “.main” is utilized to access the main class.
  • Aligned the text in the center by specifying its value as “center”.
  • height” is set as “200px”.
  • background-color” is set as “#e5989b”.
  • margin” is set as “auto” to center the element within its container horizontally.

 

CSS

.main {
  text-align: center;
  height: 200px;
  background-color: #e5989b;
  margin: auto;
}

It can be observed that pressing the added button has executed the code added in the script tag:

How to Add Link to the External Script Code?

If the JavaScript code related to your website is extensive, it is ideal to add it to an external JavaScript file to reduce the code complexity.

 

For a practical example, we will create an external JavaScript file named “example.js” and an HTML file. To link the JavaScript file with HTML, specify the path of the JavaScript file within the <script> tag as the value of the “src” attribute:

<body>
  <div class="main">
   <h1>External JavaScript</h1><br><br>
   <script src="example.js"></script>
  </div>
</body>

JavaScript

Inside the JavaScript file, add the code according to your preferences as we only want to print out the following message on the console:

console.log("Welcome to Linuxhint!");

The output of the above-described code can be seen below:

We have compiled the essential information related to the HTML script tag.

Conclusion

In HTML, the “<script>” tag embeds the client-side code, such as in JavaScript. We often need to place some dynamic content, image manipulation, or form validation on our web page. To do these tasks, utilize a script tag to embed that code either internally or externally. In this manual, we have explained what <script> tag is, its syntax, and some practical examples for linking an embedding JavaScript code.

Share Button

Source: linuxhint.com

Leave a Reply