How to Connect JavaScript to HTML So Your Code Runs

The three ways to add JavaScript to an HTML page

JavaScript runs inside the browser after your HTML loads. To make it run, you write a script tag in your HTML file that either points to a separate JavaScript file or contains the code directly. The browser reads the script tag, loads or runs the JavaScript, and executes whatever commands you wrote.

You have three choices: put a script tag at the bottom of your HTML body that links to an external file, put a script tag in the head section, or write JavaScript directly inside a script tag. Most developers use the first method because it keeps HTML and JavaScript separate and makes pages load faster.

Key Takeaways

The most common method is to create a separate JavaScript file and link it with a script tag at the bottom of your HTML body using <script src="filename.js"></script>.
Putting the script tag at the bottom of the body lets the HTML load first, so users see content before JavaScript runs.
You can also write JavaScript directly inside a script tag in your HTML, but this makes the file harder to organize as your project grows.
The browser reads script tags in order from top to bottom, so a script that depends on HTML elements must come after those elements in the file.
External JavaScript files must be in the same folder as your HTML file or you must give the correct path, like <script src="js/script.js"></script> for a subfolder.

Linking an external JavaScript file (the standard method)

Create two files in the same folder: one HTML file and one JavaScript file. Name the JavaScript file something clear, like script.js. In your HTML file, add a script tag at the very bottom, just before the closing </body> tag.

Inside the script tag, use the src attribute to point to your JavaScript file. The tag looks like this: <script src="script.js"></script>. When the browser reaches this line, it loads the JavaScript file and runs all the code inside it.

This method is standard because it keeps your files organized. Your HTML stays clean and readable. Your JavaScript lives in its own file where you can edit it without scrolling through HTML. And the page loads faster because the browser displays all your HTML content before it starts running JavaScript.

Writing JavaScript directly in your HTML file

You can also write JavaScript code directly inside a script tag without linking to a separate file. Open a script tag, write your JavaScript between the opening and closing tags, then close it. For example:

<script> document.getElementById("myButton").addEventListener("click", function() { alert("Button was clicked"); }); </script>

This works fine for small projects or quick tests, but it makes your HTML file long and hard to read. If you have more than a few lines of JavaScript, move it to a separate file instead. Keeping them separate is easier to maintain and reuse across multiple HTML pages.

Where to place the script tag in your HTML

The location of your script tag matters because the browser reads HTML from top to bottom. If your JavaScript tries to change an HTML element that hasn't loaded yet, it will fail silently and do nothing.

The safest place is at the bottom of the body, just before </body>. This way, all your HTML elements exist before the JavaScript runs. If you put the script tag in the head section, the JavaScript loads before the page content, which can slow down how fast users see the page. You can make head scripts work by using special attributes like defer or async, but beginners should stick with the bottom-of-body method.

If your script doesn't interact with HTML elements at all — for example, if it only does math or sends data to a server — placement matters less. But for scripts that change buttons, text, or other page content, put the script tag at the bottom.

Organizing multiple JavaScript files

As your project grows, you might create separate JavaScript files for different tasks. You can link multiple files by adding multiple script tags. The browser runs them in order, so if one file depends on another, list them in the right order.

For example, if you have a file called helpers.js that contains useful functions, and another file called main.js that uses those functions, load helpers first:

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

You can also organize files into folders. If you create a folder called js inside your project and put all JavaScript files there, link them with the folder path: <script src="js/script.js"></script>. This keeps your project folder clean and makes it obvious where your code lives.

Testing that your JavaScript is connected

Open your HTML file in a web browser. Right-click anywhere on the page and select "Inspect" or "Inspect Element" to open the browser's developer tools. Click the "Console" tab. If your JavaScript has an error, you will see a red message here that tells you what went wrong and which line it happened on.

A common error is "Cannot read property of null", which usually means your script tried to change an HTML element that doesn't exist. Check that the element's ID or class name matches exactly what you wrote in your JavaScript. Another common error is a file path that doesn't work — if your script tag says src="script.js" but the file is actually in a subfolder, the browser can't find it.

If you see no errors but your code still isn't working, add a straightforward test. Write console.log("JavaScript is running") at the very top of your JavaScript file. If you see that message in the console, your file is connected and the problem is in your code logic. If you don't see it, the file path is wrong or the script tag is missing.

Common mistakes when linking JavaScript

The most frequent mistake is a wrong file path. If your HTML file and JavaScript file are in different folders, you must include the folder name. <script src="script.js"></script> only works if both files are in the same folder. If your JavaScript is in a subfolder called js, use <script src="js/script.js"></script>.

Another mistake is forgetting the closing tag. A script tag must have both an opening <script src="..."> and a closing </script>. If you leave out the closing tag, the browser gets confused and may not run your JavaScript or may break the rest of your page.

A third mistake is putting the script tag in the wrong place. If your JavaScript changes HTML elements and you put the script tag in the head section without using defer, those elements won't exist yet and your code will fail. Move the script tag to the bottom of the body to avoid this.

Frequently Asked Questions

What is the difference between src and inline script tags?

A script tag with src points to a separate file: <script src="file.js"></script>. An inline script tag contains code directly: <script>alert("hello")</script>. External files are better for larger projects because they keep your code organized and let you reuse the same JavaScript on multiple HTML pages.

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

Yes, but your JavaScript will run before the page content loads, which can slow things down. If you do put it in the head, add the defer attribute: <script src="script.js" defer></script>. This tells the browser to load the file but wait until the HTML is ready before running it.

What does it mean if the browser console shows "Uncaught ReferenceError"?

This error means your JavaScript tried to use a variable or function that doesn't exist. Check that you spelled the name correctly and that the variable was created before you tried to use it. If you're trying to change an HTML element, make sure the element's ID matches exactly what you wrote in your JavaScript.

Do I need to use a special attribute like async or defer?

For beginners, no. The straightforward method of putting <script src="file.js"></script> at the bottom of the body works reliably. The async and defer attributes are for advanced cases where you need fine control over when scripts load and run.

Can I link JavaScript from a different website?

Yes. You can use the full web address in the src attribute: <script src="https://example.com/script.js"></script>. This is common for libraries like jQuery or Bootstrap. However, if that website goes down, your JavaScript won't load. For production websites, it's safer to read the file and host it yourself.

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.