Where to Put JavaScript in Your HTML File

JavaScript goes in three places: inside a <script> tag in your HTML file, in a separate .js file that you link to, or directly in an HTML element's event handler.

The most common approach for beginners is to put a <script> tag at the bottom of your HTML file, just before the closing </body> tag. This lets the browser load and display your page content first, then run the JavaScript. If you put the script at the top of the page, the browser has to finish reading and running all the JavaScript before it shows anything to the user, which makes pages feel slow.

For larger projects, you will create a separate file with a .js extension — like script.js — and link to it from your HTML using a <script src="script.js"></script> tag. This keeps your HTML file clean and lets you reuse the same JavaScript file across multiple pages.

Key Takeaways

Place <script> tags at the bottom of your HTML file, just before </body>, so the page displays before JavaScript runs.
Link to external JavaScript files using <script src="filename.js"></script> to keep your HTML organized and reuse code across pages.
Putting scripts in the <head> section works but slows down how fast your page appears to visitors.
You can also write JavaScript directly inside HTML elements using event handlers like onclick, but this approach becomes messy as your code grows.

Inline JavaScript in Your HTML File

The simplest way to start is to write JavaScript directly inside your HTML file using a <script> tag. Open your HTML file in a text editor, and add the tag anywhere between <html> and </html>. Inside the tag, type your JavaScript code exactly as you would in any other context.

For example, if you want a button that shows an alert when clicked, you could write:

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

This works, but it mixes your HTML and JavaScript together. As your code grows, this becomes hard to read and maintain. The <script> tag approach is cleaner because it keeps JavaScript separate from your HTML structure.

Using Script Tags at the Bottom of the Page

The best place for a <script> tag is at the very end of your HTML file, right before the closing </body> tag. When the browser reads your HTML from top to bottom, it loads all your content first, then runs the JavaScript. This means visitors see your page when ready instead of waiting for scripts to finish.

Here is what the structure looks like:

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Welcome</h1> <button id="myButton">Click me</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('Button clicked'); }); </script> </body> </html>

The button is defined in the HTML, and the JavaScript that makes it work is at the bottom. By the time the browser reaches the <script> tag, the button already exists on the page, so the JavaScript can find it and attach the click handler.

Linking to External JavaScript Files

Once your JavaScript grows beyond a few lines, move it to its own file. Create a new file in the same folder as your HTML and name it something like script.js. Put all your JavaScript code in that file — no <script> tags needed, just the code itself.

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

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

Place this tag at the bottom of your HTML file, just like you would with inline JavaScript. The src attribute tells the browser where to find the file. If your JavaScript file is in a subfolder called js, use src="js/script.js".

This approach has real advantages. You can use the same script.js file on multiple HTML pages without copying the code. Your HTML file stays focused on structure, and your JavaScript file stays focused on behavior. When you come back to your code months later, it is much easier to find what you are looking for.

Why the Bottom of the Page Is Better Than the Top

Some older tutorials put <script> tags in the <head> section at the top of the page. This works, but it has a performance cost. When the browser encounters a script tag in the head, it stops building the page and runs the JavaScript first. If your script takes even a second to load or run, visitors stare at a blank screen.

Putting scripts at the bottom solves this problem. The browser loads all your HTML and displays it to the user, then runs the JavaScript in the background. The page feels faster because something appears on screen when ready.

There is one exception: if your JavaScript needs to run before the page displays anything — for example, to set a theme or check if the user is logged in — you might put a small script in the head. But for most of your code, the bottom is the right choice.

Using Event Handlers Directly in HTML Elements

You can also put JavaScript directly into HTML elements using event handler attributes like onclick, onmouseover, or onload. This approach works for very straightforward interactions:

<button onclick="alert('Hello')">Say hello</button>

The JavaScript runs when the event happens — in this case, when someone clicks the button. However, this method mixes your HTML and JavaScript together, making both harder to read. If you have multiple buttons or complex interactions, your HTML file becomes cluttered and your code becomes difficult to maintain.

Use event handlers only for the simplest cases. For anything more complex, use a <script> tag or an external file instead.

Frequently Asked Questions

Can I put multiple script tags in one HTML file?

Yes. You can have as many <script> tags as you need. The browser runs them in order from top to bottom. If one script depends on another — for example, if script B uses a function defined in script A — make sure script A comes first.

Does it matter if I use src or write code inside the script tag?

Both work, but they serve different purposes. Use src to link to an external file when you have a lot of code or want to reuse it across pages. Use inline code (without src) for small scripts that are specific to one page. Most projects use external files because they are easier to organize and maintain.

What if my JavaScript code runs before the HTML elements it needs exist?

This is why placement matters. If your script tries to find a button that does not exist yet, it will fail silently or throw an error. Putting your script at the bottom of the page ensures all your HTML elements are loaded before the JavaScript runs. Alternatively, you can wrap your code in a function that waits for the page to load completely using document.addEventListener('DOMContentLoaded', function() { ... }).

Should I put scripts in the head or body?

Put them in the body, at the bottom, unless you have a specific reason not to. This gives visitors the fastest experience because the page displays before JavaScript runs. The only exception is small scripts that need to run before anything displays, like theme detection.

Can I link to JavaScript files on other websites?

Yes. You can use <script src="https://example.com/script.js"></script> to load JavaScript from another domain. This is common for libraries like jQuery or Bootstrap. However, your page will not work if that website goes down or blocks your request, so use external scripts only when you trust the source.

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.