Where to place JavaScript Code?

Placing JavaScript in HTML: In this tutorial, we will learn about the placement of the JavaScript code, where can we place the JavaScript code in an HTML file? By IncludeHelp Last updated : July 29, 2023

In an HTML code, JavaScript can be placed at three places...

Between the <head>...</head> tag
Between the <body>...</body> tag
In the external file with an extension ".js"

Between the <head>...</head> and <body>...</body> tags

If we want to place a JavaScript code in an HTML file, we can place either in <head>...</head> tag or <body>...</body> tag.

Syntax

<script type="text/javascript">
    //js code
</script>

Example

<html>
  <head>
    <title>JavaScipt Example</title>
    <script type="text/javascript">
      //function to add two numbers
      function sum(a, b){
      	return (a+b);
      }
    </script>
  </head>
  
  <body>
    <script type="text/javascript">
      //function to subtract two numbers
      function sub(a, b){
      	return (a-b);
      }
    </script>
	
    <p>Here, we are printing sum & sum...</p>
    <p id="result1"></p>
    <p id="result2"></p>
    
	<script type="text/javascript">
      //calling functions & printing the values
      document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
      document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
    </script>
	
  </body>
</html>

The output of the above example is::

Here, we are printing sum & sum...

sum = 30

sub = -10

In the external file with an extension ".js"

We can also write JavaScript code in an external file, and import the file in an HTML file.

Syntax

Syntax to import JavaScript file in an HTML file:

<script src="file_name.js"></script>

Example

JavaScript File (functions.js)

//function to add two numbers
function sum(a, b) {
  return (a + b);
}

//function to subtract two numbers
function sub(a, b) {
  return (a - b);
}

HTML file

<html>
  <head>
    <title>JavaScipt Example</title>
    <script src="functions.js"></script>
  </head>
  
  <body>
    <p>Here, we are printing sum & sum...</p>
    <p id="result1"></p>
    <p id="result2"></p>
	
    <script type="text/javascript">
      //calling functions & printing the values
      document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
      document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
    </script>
	
  </body>
</html>

The output of the above example is:

Here, we are printing sum & sum...

sum = 30

sub = -10

JavaScript Tutorial »

JavaScript - Basic Web Application Development

JavaScript - Hoisting