How to Connect JavaScript to HTML

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 JavaScript code in one of three places: inside a <script> tag in your HTML file, in a separate .js file that your HTML calls, or directly in an HTML element's attribute. Each method works, but they solve different problems.

The most common approach for real websites is to keep JavaScript in its own file and link to it from HTML. This keeps your code organized, lets you reuse the same JavaScript on multiple pages, and makes both files easier to read. But for learning, or for very small scripts, writing JavaScript directly in your HTML is simpler to start with.

Key Takeaways

The <script> tag inside your HTML file is the simplest way to add JavaScript, and it runs as soon as the browser reads that tag.
A separate .js file linked with <script src="filename.js"></script> keeps your code organized and lets you use the same JavaScript on many pages.
Put your <script> tag at the bottom of your HTML body, not in the head, so the page loads before JavaScript runs.
JavaScript in HTML attributes like onclick works but makes your code harder to maintain as it grows.
The browser's developer tools console shows you errors when JavaScript does not run the way you expected.

Writing JavaScript directly inside an HTML file

The simplest way to add JavaScript is to write it between opening and closing <script> tags inside your HTML. Here is what that looks like:

Example: Save this as a .html file and open it in your browser.

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello</h1> <script> console.log("JavaScript is running"); </script> </body> </html>

When the browser reads this file, it will run the JavaScript inside the <script> tag. In this case, it prints "JavaScript is running" to the browser console. You can see that message by opening your browser's developer tools (usually F12 or right-click and choose "Inspect"), then clicking the "Console" tab.

This method works well for learning or for very small scripts. As your code grows, keeping everything in one file becomes messy. That is when you move JavaScript to its own file.

Linking to a separate JavaScript file

Create a new file with a .js extension — for example, script.js — and write your JavaScript code inside it. Then, in your HTML file, use a <script> tag with a src attribute to tell the browser where to find it.

Your script.js file:

console.log("JavaScript is running"); document.getElementById("greeting").textContent = "Hello from JavaScript";

Your HTML file:

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1 id="greeting">Hello</h1> <script src="script.js"></script> </body> </html>

Both files must be in the same folder. When the browser reads the <script src="script.js"></script> tag, it loads and runs the code from script.js. The JavaScript can now find the element with id="greeting" and change its text.

This approach scales much better. You can link the same script.js file from many HTML pages, and if you need to fix a bug, you fix it once in script.js instead of in every HTML file.

Where to place the script tag matters

You can put a <script> tag in the <head> section or in the <body> section. The location changes when your JavaScript runs, and that affects whether it can find HTML elements.

If you put the script in the <head>, it runs before the browser has finished reading the HTML below it. This means if your JavaScript tries to find an element by its id, that element might not exist yet, and your code will fail silently.

The safer choice is to put the <script> tag at the very bottom of your <body>, just before the closing </body> tag. This way, the browser has already created all your HTML elements before JavaScript runs. Your code can find them and change them without errors.

<body> <h1 id="greeting">Hello</h1> <p>Some content</p> <script src="script.js"></script> </body>

Using JavaScript in HTML attributes

You can also write JavaScript directly in an HTML element's attribute, usually onclick. When someone clicks that element, the JavaScript runs.

Example:

<button onclick="alert('Button clicked')">Click me</button>

This works, but it mixes HTML and JavaScript in a way that becomes hard to manage as your code grows. If you have many buttons, each with different behavior, your HTML file fills up with JavaScript code scattered everywhere. It is also harder to reuse that code or test it separately.

For anything beyond a quick test, use a separate .js file and connect your elements to JavaScript functions using addEventListener instead. This keeps your HTML clean and your JavaScript organized.

Checking for errors in the browser console

When JavaScript does not work the way you expect, the browser console shows you error messages. Open your browser's developer tools by pressing F12 (or right-click and choose "Inspect"), then click the "Console" tab.

Common errors include: a script file that does not exist (the browser cannot find script.js), a typo in an element's id (your JavaScript looks for id="greeting" but the HTML says id="greting"), or JavaScript running before the HTML element exists (because the script tag is in the head).

The console also shows you any messages you print with console.log(), which is useful for understanding what your code is doing. If you write console.log("User clicked the button") in your JavaScript, that message appears in the console when the button is clicked.

Frequently Asked Questions

Can I have more than one script tag in my HTML?

Yes. You can have as many <script> tags as you need. They run in the order they appear in your HTML, from top to bottom. If one script depends on code from another, make sure the first one loads before the second one.

What is the difference between script.js and script.jsx?

A .js file contains plain JavaScript. A .jsx file contains JavaScript mixed with JSX, which is a syntax for writing HTML-like code inside JavaScript. JSX is used in frameworks like React, but it requires a build tool to convert it to regular JavaScript before the browser can run it. For learning, stick with .js files.

Does the order of my script tags matter?

Yes. Scripts run in the order they appear. If your second script depends on code from your first script, the first one must load first. If you link to an external library like jQuery, that library must load before any script that uses it.

Why does my JavaScript not find the HTML element?

The most common reason is that your script tag is in the <head> and runs before the HTML element exists. Move your script tag to the bottom of the <body>. Another reason is a typo: check that the id in your HTML matches exactly what you wrote in your JavaScript.

Can I use JavaScript without HTML?

Not in a browser. JavaScript needs HTML to run in. However, JavaScript can run outside the browser using Node.js, which is a separate tool. For web development, you always need HTML to load JavaScript.

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.