How to Add JavaScript to HTML

The three ways to connect JavaScript to your HTML file

You add JavaScript to HTML in three ways: write it directly inside an HTML file using <script> tags, link to a separate JavaScript file, or put the code in an HTML attribute. The method you choose depends on how much code you have and whether you want to reuse it across multiple pages.

For a single page with a small amount of code, inline script tags work fine. For anything larger or anything you use on more than one page, a separate file keeps your HTML cleaner and lets you edit the JavaScript without touching your HTML.

All three methods work in the browser the same way — the browser reads your HTML, finds the JavaScript, and runs it. The difference is just where the code lives and how straightforward it is to maintain.

Key Takeaways

Inline script tags go directly in your HTML file between <script> and </script>, usually near the bottom of the body tag.
External script files are linked with <script src="filename.js"></script> and keep your HTML and JavaScript separate.
Inline event handlers like onclick="code here" run JavaScript when a user clicks an element, but they clutter your HTML and are harder to maintain.
The browser runs script tags in the order it encounters them, so putting scripts at the bottom of your HTML file lets the page load before the JavaScript runs.
A separate JavaScript file can be cached by the browser, making pages load faster on repeat visits.

Writing JavaScript directly in your HTML file with script tags

The simplest way to add JavaScript is to write it between <script> and </script> tags inside your HTML file. Open your HTML file in a text editor, find the closing </body> tag at the bottom, and add your script tag just before it.

Here is what it looks like:

<body> <h1>My Page</h1> <p>Some content here</p> <script> console.log("This JavaScript runs when the page loads"); </script> </body>

The browser reads the HTML from top to bottom. When it reaches the script tag, it stops, runs the JavaScript code, then continues. Putting the script tag at the bottom means your HTML elements load first, so the JavaScript can find them and change them.

This method works well for small scripts or for learning. The downside is that your HTML file gets longer and harder to read, and you cannot reuse the code on another page without copying and pasting it.

Linking to a separate JavaScript file

For larger projects or code you use on multiple pages, create a separate file with a .js extension and link to it from your HTML. This keeps your files organized and lets you edit the JavaScript without opening your HTML file.

First, create a new file called script.js in the same folder as your HTML file. Put your JavaScript code in it:

console.log("This JavaScript runs when the page loads"); document.getElementById("myButton").addEventListener("click", function() { alert("Button was clicked"); });

Then, in your HTML file, add a script tag that points to the file:

<body> <h1>My Page</h1> <button id="myButton">Click me</button> <script src="script.js"></script> </body>

The src attribute tells the browser where to find the file. If your JavaScript file is in a subfolder, use the path: src="js/script.js" or src="../script.js" to go up one folder.

This approach is cleaner and faster on repeat visits — the browser caches the JavaScript file, so it does not have to read it again when you visit another page that uses the same file.

Using inline event handlers in HTML attributes

You can also put JavaScript directly in an HTML element using attributes like onclick, onmouseover, or onload. The code runs when that event happens.

Here is an example:

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

When someone clicks the button, the browser runs the JavaScript code in the onclick attribute. This method works, but it mixes your HTML and JavaScript together, making both harder to read and maintain. Most developers avoid it for anything beyond very straightforward code.

If you need to run a function when something happens, it is better to use a separate script file and attach the function using addEventListener, like the button example in the previous section.

Where to put your script tag in the HTML file

The location of your script tag matters because the browser runs code as it reads the file from top to bottom. If you put a script tag in the <head> section, the browser runs it before the page content loads, which can slow things down.

The best practice is to put script tags at the bottom of the <body> tag, just before the closing </body>. This way, the HTML elements load first, and the JavaScript can find and modify them.

If you must put a script in the <head> section, add the defer attribute to tell the browser to wait until the page loads before running it:

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

The defer attribute only works with external files (files linked with src), not with inline scripts. It is useful when you have many script tags and want to keep them organized in the head section.

Checking that your JavaScript is running

After you add JavaScript to your HTML, open the page in your browser and check that it works. The easiest way is to use the browser's developer tools, which every browser has built in.

In Chrome, Firefox, Safari, or Edge, press F12 or right-click on the page and select Inspect. Click the Console tab. If your JavaScript has any errors, they show up here in red. If your code runs without errors, you will see any output from console.log() statements.

If you see an error like "Cannot read property of null", it usually means the JavaScript ran before the HTML element it was looking for loaded. Move your script tag to the bottom of the body, or use the defer attribute if the script is in the head.

If you see no output at all, check that the file path in your src attribute is correct. A common mistake is typing src="Script.js" when the file is named script.js — on some computers, the case matters.

Frequently Asked Questions

Can I put multiple script tags in one HTML file?

Yes. The browser runs them in order from top to bottom. If one script depends on another, put the dependency first. For example, if script2.js uses a function from script1.js, load script1.js before script2.js.

What is the difference between <script> and <script src="">?

<script> with code inside it runs JavaScript written directly in your HTML. <script src="file.js"> loads and runs a separate JavaScript file. You cannot use both at the same time — if you add src, the browser ignores any code between the tags.

Does it matter if I use single or double quotes in JavaScript?

No, both work the same way. Use whichever you prefer, but stay consistent within your file. If you are writing JavaScript inside an HTML attribute like onclick, use double quotes for the attribute and single quotes for the JavaScript string to avoid confusion.

Why does my JavaScript not work when I open the HTML file directly from my computer?

Some browsers block external files when you open HTML directly from your hard drive for security reasons. Use a local web server instead. In Python 3, run python -m http.server in your folder, then visit http://localhost:8000 in your browser.

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.