How to Link JavaScript File to a Separate HTML File? Last Updated : 24 May, 2025 Comments Improve Suggest changes Like Article Like Report Linking a JavaScript file to an HTML document creates a connection that enables the execution of JavaScript code within the webpage. This is commonly achieved using the <script> tag in the HTML file, where the src attribute specifies the path to the external JavaScript file. Approximately 90% of modern websites use JavaScript to enhance interactivity and functionality, making this linking process a fundamental part of web development.1. Using src attribute in script TagWe use the src attribute within the <script> tag in the HTML file to specify the source file (JavaScript) location. The external JavaScript file is then linked to the HTML document, enabling the execution of its code.Syntax:<script src="js-file-name"></script> Example: The below example uses the src attribute in <script> Tag to link the javascript file to a separate HTML file. index.html <!DOCTYPE html> <html> <head> <title>Link JavaScript file to a separate HTML file </title> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Using src attribute in <script> Tag </h3> <button onclick="h1ChgFn()"> Change Heading </button> <script src="script.js"></script> </body> </html> script.js // script.js function h1ChgFn() { let heading1 = document.querySelector('h1'); heading1.textContent = 'GFG'; } Output:2. Using ECMAScript ModulesThis approach uses ECMAScript Modules to link a JavaScript file to an HTML document. The import statement in the JavaScript file specifies the module's path. This method allows for cleaner and more organized code.Syntax:import { functionName, variableName } from './file.js';Example: The below example uses the ECMAScript Modules to link the javascript file to a separate HTML file. index.html <!DOCTYPE html> <html> <head> <title>Link JavaScript using ECMAScript Modules</title> </head> <body> <script type="module"> import { initialize } from './script.js'; initialize(); </script> </body> </html> script.js // script.js let headingColor = 'green'; export function initialize() { document.addEventListener('DOMContentLoaded', function () { let heading1 = document.createElement('h1'); heading1.textContent = 'GeeksforGeeks'; heading1.style.color = headingColor; document.body.appendChild(heading1); let heading3 = document.createElement('h3'); heading3.textContent = 'Using ECMAScript Modules'; document.body.appendChild(heading3); let button = document.createElement('button'); button.textContent = 'Change Color'; button.addEventListener('click', function () { changeColor(heading1); }); document.body.appendChild(button); }); } function changeColor(element) { headingColor = headingColor === 'green' ? 'red' : 'green'; element.style.color = headingColor; } Output: Comment More infoAdvertise with us Next Article How to Link JavaScript File to a Separate HTML File? G gpancomputer Follow Improve Article Tags : HTML JavaScript-Questions Similar Reads How To Save Text As a File in HTML CSS and JavaScript? In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a 2 min read How to Create a Link in JavaScript ? In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().Here are some common approaches t 4 min read How to share code between files in JavaScript ? JavaScript is a powerful and popular programming language that is widely used for web development. One of the key features of JavaScript is its ability to share code between files. This can be useful for organizing large projects, reusing code, and maintaining code quality. In this article, we'll se 6 min read How to define a client-side script in HTML5 ? To define a client-side script in HTML5, we can do <script> tag or adding external script file by src attribute to the HTML file. <script> tag contains the JavaScript to be added for the client-side scripting. Syntax: <script> // JavaScript goes here console.log('GeeksforGeeks'); 1 min read How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th 4 min read How to add jQuery code to HTML file ? In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and 2 min read How to Get Browser to Navigate URL in JavaScript? As a web developer, you may need to navigate to a specific URL from your JavaScript code. This can be done by accessing the browser's window object and using one of the available methods for changing the current URL.In JavaScript, there are several approaches for navigating to a URL. The most common 4 min read How to Link a Button to Another Page in HTML? Linking a button to another page is a common requirement in web development. It can allow the users to navigate between a website's different sections or pages. This can be done using the various HTML elements.PrerequisitesHTMLCSS1. Using <a> Tag Styled as ButtonThe <a> tag is traditiona 3 min read How to Execute JavaScript After Page Load? When a webpage loads, it takes time. The browser reads the HTML, builds the Document Object Model (DOM), and starts rendering the page. If your JavaScript runs too early, it might try to change elements that aren't ready yet, causing errors. Running JavaScript after the page loads makes sure all the 5 min read How To Link Two Pages In HTML ? The linking of two pages in HTML is a fundamental aspect of web development, used in over 95% of websites for navigation. The most common method is through the <a> (anchor) tag, which creates hyperlinks to other pages or resources. In this article, we will explore various ways to link pages in 3 min read Like