By Vishal Basumatary in javascript — Mar 25, 2023

how to reference a javascript file in html

How to Reference a JavaScript File in HTML

If you want to use JavaScript in your HTML document, you need to add a script tag to your HTML code. This script tag will tell the browser where to find the JavaScript file and how to include it in your web page.

Method 1: Using the Script Tag

The most common way to reference a JavaScript file in HTML is by using the script tag. To do this, you need to:

Create a JavaScript file with the .js extension
Save the file in the same folder as your HTML file
Add a script tag to your HTML code (inside the head or body section)
Set the src attribute of the script tag to the name of your JavaScript file

It's important to note that the script tag should not contain any JavaScript code. It is used only to reference the external JavaScript file.

Method 2: Using Inline JavaScript Code

If you don't want to create a separate JavaScript file, you can also include your JavaScript code directly in your HTML document using the script tag. This is called inline JavaScript code. To do this, you need to:

Add a script tag to your HTML code (inside the head or body section)
Write your JavaScript code inside the script tags


    // Your JavaScript code here

While this method is easy to use, it's generally not recommended for larger projects because it can make your HTML code harder to read and maintain.

Method 3: Using External JavaScript Files with Async or Defer Attributes

If you want to load your JavaScript file asynchronously or defer its loading until after the page has loaded, you can use the async and defer attributes in your script tag.

The async attribute tells the browser to load and execute the script asynchronously with the HTML document. This means that the script will execute as soon as it's downloaded, even if the rest of the page hasn't finished loading yet.

The defer attribute tells the browser to defer the loading and execution of the script until after the HTML document has finished parsing. This means that the script will be executed only after the rest of the page has loaded.

It's important to note that when using async or defer attributes, the order in which scripts are executed may not be what you expect. If your scripts rely on each other, it's best to use the standard script tag and load them in the order that you need them.

Conclusion

These are the most common ways to reference a JavaScript file in HTML. Choose the method that best fits your project's needs and make sure to test your code thoroughly to ensure that everything is working as expected.