The two ways to connect JavaScript to an HTML file
JavaScript only runs when an HTML file tells it to. You connect them in two ways: by writing JavaScript directly inside your HTML file using a <script> tag, or by linking to a separate JavaScript file that lives in its own document. 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 choice between inline and linked JavaScript depends on how much code you have and whether you plan to use it more than once. A few lines of code that only one page needs can live inside the HTML. Anything larger or shared across pages belongs in its own file.
Key Takeaways
- Link a separate JavaScript file by writing <script src="filename.js"></script> in your HTML, usually just before the closing </body> tag.
- The src attribute tells HTML where to find the JavaScript file — use a relative path like js/script.js if the file is in a folder, or just the filename if it is in the same folder as your HTML.
- Write JavaScript code directly inside <script></script> tags if you only need a few lines and will not reuse the code elsewhere.
- Place your <script> tag at the bottom of the HTML body so the page loads before JavaScript runs, making the page feel faster to users.
Linking a separate JavaScript file
Create a new file with a .js extension — for example, script.js or main.js. Write all your JavaScript code inside this file. Then, in your HTML file, add a <script> tag with a src attribute that points to your JavaScript file.
The tag looks like this:
<script src="script.js"></script>
Put this tag at the bottom of your HTML file, just before the closing </body> tag. This placement matters because it lets the HTML load and display first, then runs the JavaScript. If you put the script tag in the <head> section, the browser will pause while loading JavaScript, and the page will feel slow to the user.
If your JavaScript file is inside a folder, use a path that shows where it is. For example, if you have a folder called js and your script is inside it, write src="js/script.js". If your JavaScript file is in a parent folder, use src="../script.js".
Writing JavaScript directly in HTML
You can also write JavaScript code between opening and closing <script> tags inside your HTML. This works when you have only a few lines of code that belong to one page only.
An example:
<script> console.log("Hello from JavaScript"); </script>
Again, place this tag near the bottom of your HTML body. The code between the tags runs exactly as if it were in a separate file. The downside is that you cannot reuse this code on other pages, and your HTML file becomes harder to read if the JavaScript grows.
Organizing your files so the path works
The src attribute uses a relative path — it describes where the JavaScript file is relative to the HTML file that is loading it. If both files are in the same folder, just write the filename. If the JavaScript file is in a subfolder, include the folder name.
A common structure looks like this:
| File or Folder | What to write in src |
|---|---|
| script.js in the same folder as index.html | src="script.js" |
| script.js inside a js folder | src="js/script.js" |
| script.js inside a js folder inside a subfolder | src="js/script.js" (the path is the same from the HTML file's perspective) |
| script.js in the parent folder | src="../script.js" |
If the path is wrong, the browser console will show an error and your JavaScript will not run. Open the browser's developer tools (usually F12 or right-click and select "Inspect"), go to the Console tab, and look for a message about a file not found. That tells you the path is incorrect.
Why the order and placement of your script tag matters
The browser reads HTML from top to bottom. When it hits a <script> tag, it stops, loads and runs the JavaScript, then continues. If your script tag is in the <head>, the user sees a blank page while the JavaScript loads. If it is at the bottom of the <body>, the HTML has already loaded and the page appears when ready.
There is an exception: if your JavaScript code needs to interact with HTML elements on the page, those elements must exist before the script runs. Putting the script tag at the bottom ensures the HTML is already there. If you must put a script in the <head>, you can use the defer attribute to tell the browser to load the script but wait until the HTML is ready before running it.
<script src="script.js" defer></script>
For beginners, the simplest rule is: put your script tag at the bottom of the body, and you will not have to think about this.
Checking that your JavaScript is actually running
Open your HTML file in a browser, then open the developer tools (F12 or right-click and select "Inspect"). Go to the Console tab. If your JavaScript has any console.log() statements, you will see their output here. If you see an error message, the path to your JavaScript file is probably wrong, or there is a syntax error in your code.
A common mistake is forgetting the .js extension in the filename, or typing the folder name wrong. Double-check the exact spelling and capitalization of your file and folder names — they must match exactly.
Frequently Asked Questions
Can I link multiple JavaScript files to one HTML page?
Yes. Write multiple <script> tags, each with its own src attribute. They will run in the order you write them. This is useful when you use a library like jQuery or Bootstrap, and then load your own code after it.
What is the difference between src and inline script tags?
A <script> tag with a src attribute loads an external file. A <script> tag without src contains code written directly in the HTML. Use external files for code you reuse or that is longer than a few lines. Use inline scripts only for small, page-specific code.
Why does my JavaScript not run even though the path looks right?
Check the browser console for error messages. The most common causes are a typo in the filename or folder name, a missing .js extension, or JavaScript code that tries to interact with HTML elements before they load. If the console shows no errors but your code still does not work, add a console.log() statement at the very top of your JavaScript file to confirm it is loading at all.
Should I put the script tag in the head or the body?
Put it at the bottom of the body, just before the closing </body> tag. This makes the page load faster because the HTML displays before the JavaScript runs. If you must put it in the head, add the defer attribute so the browser waits until the HTML is ready.