You understand what JavaScript is — now it’s time to actually connect it to a web page. This guide walks through both ways to add JavaScript to HTML, and where to place it for the best results.
If you’ve read our introduction to what JavaScript is, you know it’s the language that makes web pages interactive. This guide picks up from there: the actual mechanics of getting JavaScript code connected to an HTML page, so it can start doing something.
The good news is that connecting JavaScript to HTML only requires one HTML element: <script>. Everything else — where you put it, whether you write code directly inside it or link to a separate file — is really just a handful of small decisions once you understand the basic mechanism. If you haven’t yet, our overview of web development covers how HTML, CSS, and JavaScript fit together, which gives useful context for what follows here.
This guide covers both ways to add JavaScript to a page, where to place your script tag for the best results, and the most common mistake beginners make that leads to “my JavaScript isn’t working” confusion.
The Two Ways to Add JavaScript to HTML
According to MDN’s guide to adding JavaScript to a web page, there are two ways to run JavaScript code from inside HTML, depending on whether you’re linking to an external script file or embedding the script directly in the page.
Method 1 — Inline (embedded directly in the HTML):
<script>
document.getElementById("demo").textContent = "Hello, world!";
</script>Method 2 — External (linking to a separate .js file):
<script src="script.js"></script>The external method points to a separate file (in this example, one named script.js) using the src attribute, the same way an <img> tag points to an image file rather than embedding image data directly in the HTML.
Which Method Should You Use?
For a tiny, one-off script, inline JavaScript is fine and gets the job done quickly. But as soon as your code grows beyond a few lines, or you want to reuse the same script across multiple pages, an external file is the better habit to build early.
Keeping JavaScript in its own file also keeps your HTML easier to read — your markup describes the page’s structure, while your logic lives separately in a file dedicated to it. This separation becomes genuinely important once projects grow beyond a single simple page.
Where to Place the Script Tag
Where you put your <script> tag actually matters, and it’s one of the most common sources of confusion for beginners. As W3Schools explains, you can place scripts in the <head> section, in the <body>, or in both — HTML documents allow any number of script tags in either location.
That flexibility comes with a catch, though: the browser reads and runs your HTML from top to bottom, in order. If your JavaScript tries to interact with an HTML element that hasn’t been read yet — because your script tag appears above it in the file — your code will fail silently or throw an error, since that element doesn’t exist yet as far as the browser is concerned at that point.
For this reason, the most common and beginner-friendly recommendation is to place your <script> tag right before the closing </body> tag. By that point in the file, every HTML element on the page has already been read by the browser, so your JavaScript can safely find and interact with any of them.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1 id="demo">Hello</h1>
<script src="script.js"></script>
</body>
</html>Linking an External JavaScript File, Step by Step
According to a freeCodeCamp explanation of the src attribute, the src attribute on a script tag is simply the file path to the external file you want to link — the browser follows that path, loads the file’s contents, and runs it as JavaScript.
- Create a new file named
script.jsin the same folder as your HTML file. - Write your JavaScript code inside that file — no
<script>tags needed inside the .js file itself, since it only contains JavaScript. - In your HTML file, add
<script src="script.js"></script>just before the closing</body>tag. - Save both files and open the HTML file in your browser to see the result.
If your JavaScript file lives in a subfolder rather than alongside the HTML file, you’ll need to include that folder name in the path — for example, <script src="scripts/main.js"></script> if your file sits inside a folder named “scripts”.
A Quick Look at defer and async (For Later)
As you look at more JavaScript examples online, you’ll likely notice two attributes sometimes added to external script tags: defer and async. You don’t need to use these as a beginner, but it helps to know what they’re for so they don’t feel mysterious when you see them.
Both attributes let you place a script tag in the <head> section without the downside of blocking the page from loading while the script downloads. defer tells the browser to download the script in the background and run it only after the entire HTML document has been parsed — effectively giving you the safety of bottom-of-body placement while keeping your script tag in the head. async is similar but runs the script as soon as it’s downloaded, without waiting for the rest of the page, which is better suited to scripts that don’t depend on interacting with specific HTML elements.
For now, placing your script just before the closing </body> tag remains the simplest, most beginner-friendly choice — you can revisit defer and async once you’re comfortable with the basics and start caring more about page-load performance.
Common Mistake: “My JavaScript Isn’t Doing Anything”
By far the most common reason JavaScript appears to “not work” for beginners is trying to select and modify an HTML element before that element has actually loaded — usually because the script tag was placed in the <head> without any adjustment. The fix is almost always one of two things: move the script tag to just before the closing </body> tag, or use the JavaScript file path correctly if it’s an external file that simply isn’t being found.
It’s also worth checking your browser’s developer console (usually opened with F12 or right-click → Inspect) for error messages. A message like “Uncaught TypeError: Cannot set properties of null” almost always means your JavaScript tried to interact with an HTML element that didn’t exist yet at that point in the page — pointing directly back to the placement issue above.
Common Questions Beginners Ask
Do I need a “type” attribute on my script tag? No. Modern browsers treat JavaScript as the default scripting language, so <script> alone works fine — you may still see older tutorials using type="text/javascript", but it’s unnecessary today.
Can I have more than one script tag on a page? Yes, and it’s completely normal — you might link to a library, then have a separate script tag for your own code, for example.
What if I want my script to run immediately, before the page finishes loading? This is a more advanced use case, usually handled with attributes like defer or async on external scripts. As a beginner, placing your script before the closing </body> tag is a simple, reliable default that avoids needing to think about this yet.
Does it matter if I name my file “script.js” or something else? No, the filename itself is arbitrary — what matters is that the src attribute in your script tag matches the actual file name and location exactly, including capitalization on systems where that matters (like Linux).
Quick-Reference Guide: Adding JavaScript to HTML
- Inline scripts — JavaScript written directly between
<script>tags. - External scripts — JavaScript in a separate .js file, linked using
src. - Best default placement — just before the closing
</body>tag. - Why placement matters — the browser reads HTML top to bottom, so elements must exist before JavaScript can interact with them.
- External files scale better — easier to reuse and maintain than inline code once projects grow.
- Check the console — browser developer tools reveal exactly why a script isn’t working.
Conclusion
Connecting JavaScript to an HTML page comes down to one element, <script>, and one habit worth building early: placing it just before the closing </body> tag so your code can safely find the HTML elements it needs to work with. Once that clicks, the “my JavaScript isn’t working” confusion that trips up nearly every beginner becomes much easier to diagnose and avoid.
With JavaScript properly connected to a page, you’re ready to start writing actual logic — variables, conditions, and functions that do something with the elements on your page. Every project you build from here, no matter how advanced it eventually gets, still relies on this same basic connection between your HTML and your JavaScript file.
In the next guide in this series, we’ll cover JavaScript variables — how to store and work with values like text and numbers, the building blocks behind everything more complex you’ll eventually write.
Explore More JavaScript Basics Guides →
Alex Carter is a senior software developer with years of hands-on experience building real-world applications. After watching countless beginners give up on programming simply because most tutorials assumed too much prior knowledge, Alex started Vandutz Academy to do things differently — breaking every concept down into clear, judgment-free, step-by-step lessons. When not writing, Alex is probably debugging someone else’s code (or their own).