How to Link JavaScript File to HTML File

  2. HowTo
  3. HTML Howtos
  4. How to Link JavaScript File to HTML File
Sushant Poudel Feb 02, 2024
HTML HTML JavaScript
  1. Use the <script> Tag and the src Attribute to Link an External JavaScript to HTML
  2. Use <script> Tag to Link an Internal JavaScript to HTML
How to Link JavaScript File to HTML File

This article will discuss two methods to link a JavaScript file to an HTML file. In the first process, we will create a JavaScript file and link the files externally. In the second process, we will insert JavaScript code into an HTML document.

We use the src attribute in the <script> tag to link the JavaScript file to the HTML file in this method. The src attribute is used to specify the URL or the file location of the external file. If we wish to use the same JavaScript on multiple pages in a website, we must create an external JavaScript file instead of writing the same time and again. We write the <script> inside the <head> tag in HTML. After saving the script file with a .js extension, we refer to it using the src attribute in the <script> tag.

For example, create two files, an HTML and a JavaScript file. Write some JavaScript in the JS file and some HTML in the HTML file. Don’t forget to use .html and .js extensions after naming the two files respectively while saving them. Place these two files inside the same folder. Write the JavaScript file name in the src attribute of the <script> tag in the HTML file. For example, if your file name is hello.js , write <script src="hello.js"> </script>.

The example below illustrates a method to link a JavaScript file to an HTML file. We wrote, This is HTML in the HTML file and This is written from JavaScript in the JavaScript file. As we can see in both texts in the output section below, it proves that JavaScript is linked with the HTML.

Example Code:

<html>
 <head>
 <script src="hello.js"> </script>
 </head>
 
 <body>
 <p> This is HTML</p>
 </body>

</html>

document.write('This is written from JavaScript');

Output:

Unlike the first method, we add the code of JavaScript in the HTML file using the <script> tag. The <script> tag is used to add a client-side script. We can write the JavaScript internally inside the <script> tag in an HTML file. When we run the HTML file, we will see the JavaScript loaded.

For example, write the text This is HTML in the <p> tag in HTML. Then, open the <script> tag and type the message This is written from JavaScript using document.write. Then, close the script tag.

We can see both texts written in HTML and JavaScript are shown in the output below. It proves that the HTML and JavaScript have been linked.

Example:

<html>
    <head>
    </head>
    <body>
        <p> This is HTML </p>
    </body>
    <script>
        document.write("This is written from JavaScript");
    </script>
</html>

Output:

Author: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn