How to Connect JavaScript to Your HTML File

The three ways to link JavaScript to HTML

JavaScript runs inside your HTML file in three ways: with a <script> tag that points to a separate file, with a <script> tag that holds code directly in your HTML, or by writing JavaScript inside an HTML element's attributes. The first method — linking to a separate file — is what most websites use, because it keeps your code organized and lets you reuse the same JavaScript file across multiple pages.

When you link a separate JavaScript file, the browser reads your HTML from top to bottom. When it hits the <script> tag with the file name, it stops, downloads and runs that JavaScript file, then continues reading the rest of your HTML. This matters because if your JavaScript tries to change something on the page before that part of the page has loaded, it will not find it.

The simplest approach for beginners is to put the <script> tag at the very end of your HTML file, just before the closing </body> tag. This way, all your HTML has already loaded before the JavaScript runs, and your code can find and change anything on the page.

Key Takeaways

Link a separate JavaScript file by writing <script src="filename.js"></script> in your HTML, usually at the bottom before </body>.
The browser reads HTML top to bottom and pauses when it hits a <script> tag, so code at the bottom runs after the page has loaded.
You can also write JavaScript directly inside a <script> tag in your HTML, but separate files are easier to manage as your project grows.
Make sure your JavaScript file name matches exactly what you write in the src attribute, including the .js extension and the correct folder path.

Linking a JavaScript file with the script tag

Create a new file with a .js extension — for example, script.js or main.js. Save it in the same folder as your HTML file, or in a subfolder you create (like a folder named js). Write your JavaScript code inside this file and save it.

In your HTML file, add this line just before the closing </body> tag:

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

Replace script.js with whatever you named your file. If you put your JavaScript file in a subfolder, write the path: <script src="js/script.js"></script>. The browser will now load and run that file when it reaches this tag.

The src attribute must match your file name exactly, including uppercase and lowercase letters. If your file is named Script.js but you write src="script.js", the browser will not find it and your JavaScript will not run.

Writing JavaScript directly in your HTML

You can also write JavaScript code directly inside your HTML file without a separate file. Put the code between opening and closing <script> tags:

<script> console.log("Hello from JavaScript"); </script>

This method works fine for small projects or testing, but it makes your HTML file longer and harder to read. If you use the same JavaScript code on multiple pages, you would have to copy and paste it into each HTML file. A separate file is better because you write the code once and link to it from as many HTML files as you need.

Understanding where to place the script tag

The position of your <script> tag matters. If you put it in the <head> section of your HTML, the browser will read and run the JavaScript before it reads the rest of the page. If your JavaScript tries to change something that has not loaded yet, it will fail silently.

Placing the <script> tag at the bottom of your HTML, just before </body>, ensures the entire page has loaded first. This is the safest place for beginners. As you learn more, you will discover attributes like defer and async that let you put the tag in the <head> and still have the page load properly, but you do not need those yet.

Checking that your JavaScript is running

Open your HTML file in a web browser. Right-click anywhere on the page and select Inspect or Inspect Element. This opens the browser's developer tools. Click the Console tab. If your JavaScript file is linked correctly, any console.log() messages you wrote will appear here.

If you see an error message that says something like "Failed to load resource: the server responded with a status of 404", the browser could not find your JavaScript file. Check that the file name in your src attribute matches the actual file name exactly, and that the file is in the folder you specified.

If you see no messages at all, your file is linked correctly but your JavaScript code may not be running anything that produces output. Add a straightforward test line like console.log("JavaScript is working"); at the very top of your JavaScript file to confirm it is running.

Common mistakes when linking JavaScript

The most common mistake is a mismatch between the file name and the src attribute. If your file is script.js but you write src="scripts.js" (with an extra s), the browser will not find it. Check both the file name and the path carefully.

Another mistake is forgetting the .js extension. Write src="script.js", not src="script". The extension tells the browser that this is a JavaScript file.

If your JavaScript file is in a subfolder, make sure you include the folder name in the path. If your file is in a folder called js, write src="js/script.js". Use forward slashes, not backslashes, even on Windows.

Finally, do not put quotes inside quotes. Write <script src="script.js"></script>, not <script src='script.js'></script> (though single quotes do work, it is clearer to stick with double quotes).

Frequently Asked Questions

Can I link multiple JavaScript files to one HTML page?

Yes. Write multiple <script> tags, one for each file. The browser runs them in the order they appear, so if one file depends on code from another file, put the dependency first. For example, if utilities.js contains helper functions that main.js uses, link utilities.js before main.js.

What if my JavaScript file is in a different folder than my HTML file?

Use the folder path in the src attribute. If your HTML is in the root folder and your JavaScript is in a subfolder called js, write src="js/script.js". If your JavaScript is in a parent folder, write src="../script.js" (the two dots mean go up one level).

Do I need to close the script tag?

Yes, always write </script> at the end, even when you are linking to a file. The opening tag tells the browser to expect JavaScript, and the closing tag tells it when the JavaScript section ends.

Can I use JavaScript from a website instead of my own file?

Yes. Instead of src="script.js", you can write src="https://example.com/script.js" with the full web address. This is called a CDN link and is common for libraries like jQuery or Bootstrap. However, your page will only work if that website is online and the file stays in the same place.

Why does my JavaScript not work even though the file is linked?

Check the browser console for error messages. Right-click, select Inspect, and click the Console tab. If you see red error messages, they will tell you what went wrong. Common issues are typos in variable names, trying to change HTML elements before they load, or forgetting semicolons at the end of lines (though modern JavaScript does not always require them).

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.