How to Connect JavaScript to Your HTML File

The two ways to add JavaScript to HTML

You connect JavaScript to HTML in two ways: by writing code directly inside an HTML file using <script> tags, or by linking to a separate JavaScript file. Most projects use the second method because it keeps your code organized and lets you reuse the same JavaScript file across multiple HTML pages.

The method you choose depends on how much JavaScript you need. A few lines of code can live in your HTML file. Hundreds of lines belong in their own file. Either way, the browser reads your HTML first, then runs the JavaScript when it encounters the script tag.

Key Takeaways

Link a separate JavaScript file by placing <script src="filename.js"></script> in your HTML, usually just before the closing </body> tag.
The src attribute must point to the correct file path — use a relative path like "js/script.js" if the file is in a folder, or just "script.js" if it is in the same folder as your HTML.
Writing JavaScript directly in HTML uses <script> your code here </script> tags, but this method does not scale well for larger projects.
Placing script tags at the bottom of your HTML file (before </body>) lets the page load faster because the browser displays content before running JavaScript.

Linking a separate JavaScript file

Create a new file with a .js extension — for example, script.js. Write your JavaScript code in that file and save it. Then, in your HTML file, add a <script> tag that points to it.

The tag looks like this:

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

Place this tag in your HTML file, usually just before the closing </body> tag. This position matters because it tells the browser to load and display your HTML content first, then run the JavaScript. If you put the script tag in the <head> section, the browser will pause and run the JavaScript before showing the page, which can make your site feel slow.

Here is what a complete HTML file looks like with a linked JavaScript file:

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

Getting the file path right

The src attribute tells the browser where to find your JavaScript file. If the file is in the same folder as your HTML file, use just the filename: src="script.js". If the file is in a subfolder, include the folder name: src="js/script.js".

A common folder structure looks like this: your HTML file (index.html) sits in the main project folder, and your JavaScript file (script.js) sits in a subfolder called js. In that case, the script tag reads <script src="js/script.js"></script>.

If you get the path wrong, the browser console will show an error and your JavaScript will not run. Open your browser's developer tools (press F12 or right-click and select Inspect), go to the Console tab, and look for a message that says the file could not be found. That tells you to check your folder structure and file names.

Writing JavaScript directly in HTML

For small amounts of code, you can write JavaScript directly inside your HTML file using opening and closing <script> tags. Put your code between them:

<script> console.log("Hello from JavaScript"); </script>

This approach works fine for a single line or a few lines of code. However, if you have more than about 10 lines, a separate file becomes easier to manage. Inline code also cannot be reused across multiple HTML pages, so you would have to copy and paste the same code into every file that needs it.

Like linked scripts, place inline script tags near the bottom of your HTML file, just before </body>. This keeps your page responsive and lets the content load before the JavaScript runs.

Checking that your JavaScript is running

Open your HTML file in a browser and press F12 to open the developer tools. Click the Console tab. If your JavaScript is connected correctly, you should see any messages you told it to print. If you see an error or nothing appears, the file path is probably wrong or there is a mistake in your code.

A simple test is to add this line to your JavaScript file:

console.log("JavaScript is connected");

Save the file, refresh your browser, and look at the Console. If you see that message, your script is linked correctly. If you do not see it, check the file path in your src attribute and make sure the file names match exactly (including capitalization).

Common mistakes to avoid

The most frequent error is a wrong file path. Double-check that the folder and file names in your src attribute match exactly what you see in your file explorer. File names are case-sensitive on some computers, so "Script.js" and "script.js" are different files.

Another mistake is forgetting the closing </script> tag when writing code inline. The browser needs both the opening and closing tags to know where your JavaScript ends. If you leave out the closing tag, the browser will treat everything after the opening tag as JavaScript, which breaks your HTML.

Do not put quotes around the file path in the src attribute unless you are using a variable or a template string. Write src="script.js", not src=script.js (missing quotes) or src='script.js' (single quotes work, but double quotes are standard).

When to use each method

Use a linked JavaScript file for any real project. It keeps your HTML clean, makes your code reusable, and is easier to debug. Most professional websites use this approach.

Use inline JavaScript only for very short code snippets — a single event listener or a quick calculation. Even then, consider moving it to a separate file once your project grows. Starting with good habits now saves you time later.

Frequently Asked Questions

Can I link multiple JavaScript files to one HTML page?

Yes. Add multiple <script> tags, each pointing to a different file. The browser runs them in the order they appear in your HTML, so if one script depends on another, put the dependency first. For example, if script-b.js uses code from script-a.js, link script-a.js before script-b.js.

Does it matter if I put the script tag in the head instead of before the closing body tag?

It matters for performance. Putting the script tag in the head makes the browser download and run the JavaScript before displaying the page, which slows down how fast your content appears. Putting it before </body> lets the page load first, then runs the JavaScript. For most projects, before </body> is the better choice.

What if my JavaScript file is in a different folder than my HTML file?

Use a relative path that describes how to get from your HTML file to your JavaScript file. If your JavaScript is in a parent folder, use src="../script.js". If it is in a subfolder, use src="subfolder/script.js". The two dots (..) mean "go up one level."

Why does my JavaScript not run even though the file path looks correct?

Check the browser console for error messages. Press F12, click Console, and look for red text. The error message usually points to the problem — a missing file, a typo in your code, or a syntax error. If the file path is correct but your code has a mistake, the console will show that instead.

Can I use a URL instead of a file path in the src attribute?

Yes. You can link to JavaScript hosted on another website by using the full URL: <script src="https://example.com/script.js"></script>. This is how you add libraries like jQuery or Bootstrap. However, for your own code, use a local file path so your page works offline and loads faster.

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.