How to Link a JavaScript File to Your HTML Page

The basic way to connect JavaScript to HTML

You connect a JavaScript file to HTML using a <script> tag that points to your file. The tag goes inside the <head> section or at the bottom of the <body> section of your HTML document. The most common approach is to put it at the end of your body, just before the closing </body> tag.

Here is the actual code you write:

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

Replace "filename.js" with the real name of your JavaScript file. If your JavaScript file is named "script.js" and sits in the same folder as your HTML file, you would write <script src="script.js"></script>. The browser reads this tag, finds the file, and runs the code inside it.

Key Takeaways

Use <script src="filename.js"></script> to link a JavaScript file, replacing "filename.js" with your actual file name.
Place the script tag at the bottom of your HTML body, just before </body>, so the page loads before JavaScript runs.
If your JavaScript file is in a different folder, use a path like <script src="js/script.js"></script> or <script src="../script.js"></script>.
The src attribute tells the browser where to find your JavaScript file, just like the href attribute tells it where to find a linked CSS file.

Where to place the script tag in your HTML

The location of your script tag matters because it affects when your JavaScript runs. If you put the tag in the <head> section, the browser loads and runs the JavaScript before it displays the page content. This can slow down how fast your page appears to the reader.

Putting the script tag at the very end of your <body>, right before </body>, is the standard practice. The browser loads all your HTML content first, then loads and runs the JavaScript. This way, your page appears faster, and your JavaScript can interact with elements that are already on the page.

If your JavaScript needs to run before the page displays — for example, to set a theme or check if someone is logged in — then putting it in the <head> makes sense. But for most cases, the bottom of the body is the right place.

How to use file paths when your JavaScript is in a different folder

If your JavaScript file is not in the same folder as your HTML file, you need to tell the browser where to find it using a file path. A file path is like an address that shows the browser which folder to look in.

If you have a folder called "js" inside your project, and your JavaScript file is named "script.js" inside that folder, you would write:

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

If your JavaScript file is in a parent folder (one level up from your HTML file), you would write:

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

The two dots .. mean "go up one folder level." You can use multiple ../ to go up more than one level. For example, ../../script.js goes up two folder levels.

What happens when the browser reads the script tag

When the browser encounters your <script> tag, it stops what it is doing, downloads the JavaScript file, and runs the code inside it. Only after the JavaScript finishes does the browser continue loading the rest of the page.

This is why placing the script tag at the bottom of your body matters. If the script tag is at the top of the page, the browser waits for the JavaScript to load and run before it shows any content to the reader. If it is at the bottom, the reader sees the page first, and the JavaScript runs after.

If your JavaScript file is very large or takes a long time to read, the reader will notice a delay. This is one reason developers sometimes use the async or defer attributes on the script tag, which tell the browser to load the JavaScript in the background without stopping the page from loading.

Common mistakes when linking JavaScript files

The most common mistake is getting the file name or path wrong. If you write <script src="script.js"></script> but your file is actually named Script.js (with a capital S), the browser will not find it. File names are case-sensitive on most servers, so "script.js" and "Script.js" are different files.

Another mistake is forgetting the .js extension. Your file must be named something like "script.js", not just "script". The .js tells the browser and your text editor that this is a JavaScript file.

A third mistake is putting the script tag in the wrong place. If you put it inside the <head> and your JavaScript tries to interact with elements in the body, those elements do not exist yet, so nothing happens. Moving the script tag to the bottom of the body fixes this.

How to check if your JavaScript file is linked correctly

Open your page in a web browser and right-click anywhere on the page. Select "Inspect" or "Inspect Element" to open the browser's developer tools. Click the "Console" tab. If there are red error messages, your JavaScript file may not have linked correctly, or there may be errors in your code.

If you see a message like "Failed to load resource: the server responded with a status of 404", it means the browser could not find your JavaScript file. Check that the file name and path in your src attribute match the actual file name and location.

If there are no error messages in the console, your JavaScript file is linked correctly and your code is running.

Frequently Asked Questions

Can I put the script tag in the head section instead of at the bottom of the body?

Yes, you can, but it is not recommended for most cases. Putting the script tag in the head makes the browser load and run your JavaScript before displaying the page, which slows down how fast the page appears. Put it at the bottom of the body instead, unless your JavaScript needs to run before the page displays.

What is the difference between src and href in a script tag?

The src attribute in a script tag works like the href attribute in a link tag — both tell the browser where to find a file. Use src for script tags and href for link tags. You cannot use href in a script tag.

Do I need to write anything inside the script tag, or just the src attribute?

When you use the src attribute to link an external file, leave the space between the opening and closing tags empty. Write <script src="script.js"></script>, not <script src="script.js">some code here</script>. If you write code inside the tags, the browser will ignore the src attribute.

What if my JavaScript file is on a different website?

You can link to a JavaScript file on another website by using the full web address in the src attribute, like <script src="https://example.com/script.js"></script>. However, only do this if you trust the website completely, because you are letting that website run code on your page.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.