Three Ways to Add JavaScript to Your HTML Page

JavaScript runs in the browser after your HTML loads

You add JavaScript to an HTML page in three ways: write it directly inside a <script> tag, link to a separate .js file, or put event handlers straight on HTML elements. The first two methods are standard practice. The third works but clutters your code and makes it harder to maintain.

Where you place the script tag matters. Putting it at the bottom of your HTML, just before the closing </body> tag, lets the page load and display before JavaScript runs. Putting it in the <head> section means the browser downloads and runs the script before showing any content — which can slow down how fast your page appears.

Key Takeaways

The <script> tag is the standard way to add JavaScript, and it can hold code directly or point to an external file with the src attribute.
Placing <script> tags at the bottom of your HTML file, before </body>, makes pages load faster because the browser renders content first.
External .js files are easier to reuse across multiple pages and keep your HTML cleaner than writing all code inline.
Event handlers like onclick work but mix code into your HTML; separating them into a script tag keeps your markup and logic apart.

Writing JavaScript directly inside a script tag

The simplest way to add JavaScript is to write it between opening and closing <script> tags. The browser reads the HTML, finds the script tag, and runs whatever code is inside.

Here is a basic example:

<script> console.log("This runs when the page loads"); </script>

You can put multiple script tags on the same page. The browser runs them in order, from top to bottom. This method works fine for small amounts of code, but if you have a lot of JavaScript or want to use the same code on different pages, an external file is cleaner.

Linking to an external JavaScript file

When you have more than a few lines of code, or when you want to reuse the same JavaScript on multiple pages, create a separate .js file and link to it. This keeps your HTML readable and lets you edit your code in one place.

Create a file called script.js and put your JavaScript code in it:

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

Then link to it in your HTML using the src attribute:

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

The browser downloads the file and runs it. You can put this tag in the <head> or at the bottom of the <body> — the same rules about page load speed apply. Most developers put it at the bottom so the page displays first.

Using event handlers on HTML elements

You can also add JavaScript directly to an HTML element using attributes like onclick, onmouseover, or onload. When the event happens, the code runs.

Here is an example:

<button onclick="console.log('Button clicked')">Click me</button>

This works, but it mixes your code into your HTML, which makes both harder to read and maintain. If you need to change the code later, you have to hunt through your HTML file. For anything beyond a single line, use a script tag instead.

A better approach is to use a script tag to attach the event listener:

<button id="myButton">Click me</button> <script> document.getElementById("myButton").addEventListener("click", function() { console.log("Button clicked"); }); </script>

This keeps your HTML clean and your code organized.

Where to place script tags for faster page loads

The position of your <script> tag affects how quickly your page appears to the user. When the browser encounters a script tag, it stops building the page, downloads and runs the script, then continues. This is called blocking.

If you put script tags in the <head>, the browser runs them before displaying any content. Users see a blank page while the scripts load and run. For external files, this can add noticeable delay.

Putting script tags at the bottom of the <body>, just before the closing tag, lets the browser display your HTML first. The scripts run after the page is visible. This is why most developers use this approach for external files.

There is an exception: if your JavaScript needs to run before the page displays anything, or if it sets up critical styles or content, put it in the <head>. Otherwise, put it at the bottom.

Inline code versus external files: which to use

Inline code (written directly in a script tag) is useful for small snippets or code that only one page needs. It keeps everything in one file, so there is nothing to link to or manage separately.

External files are better when your code is more than a few lines, or when multiple pages share the same code. The browser caches external files, meaning if a user visits another page on your site that uses the same script, the browser does not download it again — the page loads faster.

External files also make your HTML cleaner and easier to read. Your markup focuses on structure, and your code focuses on behavior. This separation makes debugging easier because you know exactly where to look.

A common pattern is to use inline script tags for tiny setup code and external files for everything else.

Common mistakes and how to avoid them

One frequent mistake is forgetting the closing </script> tag. The browser will keep reading your HTML as if it were JavaScript, which breaks the page. Always close the tag.

Another mistake is linking to a file that does not exist. If you write <script src="script.js"></script> but the file is in a different folder, the browser cannot find it and the script does not run. Check your file paths carefully. If your HTML is in a folder called pages and your script is in a folder called js, the path might be ../js/script.js or ./js/script.js depending on where the HTML file is.

A third mistake is putting code in a script tag that tries to use HTML elements before they load. If your script runs in the <head> and tries to find a button that is in the <body>, it will not find it because the button has not been created yet. This is why putting scripts at the bottom of the body is safer — all the HTML exists by the time the script runs.

Frequently Asked Questions

Can I put multiple script tags on the same page?

Yes. The browser runs them in order from top to bottom. You can mix inline code and external files. Just make sure each tag is properly closed.

What is the difference between putting a script tag in the head versus the body?

Scripts in the head run before the page displays, which can slow down how fast content appears. Scripts at the bottom of the body run after the page is visible, so users see content sooner. Use the head only if the script must run before anything displays.

Do I need to specify a type attribute on the script tag?

No. Modern browsers assume <script> means JavaScript. Older code sometimes includes type="text/javascript", but it is not necessary anymore.

What happens if the external JavaScript file fails to load?

The browser skips the script and continues loading the page. If your page depends on that code to work, parts of it may not function. Always test your links and consider what happens if a script fails to load.

Can I use both inline script tags and external files on the same page?

Yes, and it is common. You might use an external file for shared code and inline tags for page-specific setup. Just remember that inline code runs when the browser encounters it, so order matters.

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.