How to Link JavaScript File to a Separate HTML File?

Last Updated : 24 May, 2025

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 Tag

We 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
          &lt;script&gt; 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:

output1

2. Using ECMAScript Modules

This 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:

output2

How to Create a Link in JavaScript ?

gpancomputer

Improve

Article Tags :

How to Link JavaScript File to a Separate HTML File?

1. Using src attribute in script Tag

Syntax:

2. Using ECMAScript Modules

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?