The basic way to connect JavaScript to HTML

To link a JavaScript file to an HTML page, add a <script> tag in your HTML document that points to the file's location. The most common approach is to place this tag at the end of your HTML document, just before the closing </body> tag. This tells the browser to load and run your JavaScript code after the page content has loaded.

The tag looks like this: <script src="filename.js"></script>. Replace "filename.js" with the actual name of your JavaScript file. The browser will fetch that file and execute the code inside it.

Key Takeaways

  • Place a <script src="filename.js"></script> tag in your HTML to load an external JavaScript file.
  • Put the script tag at the end of your HTML document, before the closing </body> tag, so the page loads before JavaScript runs.
  • Use a relative path like src="js/script.js" if your JavaScript file is in a subfolder, or an absolute path if it's on a different domain.
  • You can also write JavaScript directly inside an HTML file using <script>...</script> tags, but external files are cleaner for larger projects.
  • The defer attribute tells the browser to load the script in the background without blocking the page from rendering.

Where to place the script tag in your HTML

The location of your <script> tag matters. Placing it at the end of the document, right before </body>, ensures the HTML loads first. This prevents JavaScript from blocking the page while it downloads and runs.

If you put the script tag in the <head> section, the browser will stop rendering the page to download and run the JavaScript before showing any content. For most projects, this creates a noticeable delay. Putting it at the bottom is the standard practice.

Here's what a basic 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>

Using relative and absolute file paths

The src attribute tells the browser where to find your JavaScript file. A relative path describes the file's location relative to your HTML file. If your JavaScript file is in the same folder as your HTML file, use just the filename: src="script.js".

If your JavaScript file is in a subfolder called "js", use src="js/script.js". If you need to go up one folder level, use src="../script.js". The two dots mean "go up one directory".

An absolute path includes the full web address. If your JavaScript file is hosted on a different server, use the complete URL: src="https://example.com/script.js". This is common when loading libraries from a content delivery network (CDN), like jQuery or Bootstrap.

The defer attribute for faster page loading

If you want to keep your script tag in the <head> section but avoid blocking the page, add the defer attribute: <script src="script.js" defer></script>. This tells the browser to download the JavaScript file in the background while the page renders, then run it after the HTML finishes loading.

The defer attribute is useful when your JavaScript needs to interact with HTML elements on the page. Without it, the script might run before those elements exist. With defer, you get the speed benefit of loading in the background plus the safety of running after the page is ready.

Writing JavaScript directly in HTML

You can also write JavaScript code directly inside your HTML file using <script> tags without the src attribute. Place your code between the opening and closing tags:

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

This approach works for small snippets, but external files are better for larger projects. External files are easier to organize, reuse across multiple HTML pages, and keep your HTML cleaner. Most developers use inline scripts only for quick tests or single-use code.

Common mistakes when linking JavaScript files

The most frequent error is using the wrong file path. If your script tag points to a file that doesn't exist, the browser's console will show a 404 error. Check that the filename and folder path are spelled correctly and match your actual file structure.

Another mistake is trying to use JavaScript before the HTML elements it targets have loaded. If your script runs before the page finishes rendering, it won't find the elements it's looking for. Placing the script tag at the bottom of the document or using the defer attribute solves this problem.

Some developers also forget to include the .js file extension in the src attribute, or they use backslashes instead of forward slashes in the path. Always use forward slashes and include the full filename with its extension.

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 will load and run them in the order they appear in your HTML. This is common in larger projects where you might have separate files for different features or libraries.

What's the difference between src and href?

The <script> tag uses src to point to a JavaScript file. The <link> tag uses href to point to CSS files. They serve different purposes: src loads and runs code, while href loads styles. Using the wrong attribute won't work.

Why isn't my JavaScript running?

Check three things: the file path is correct and the file exists, the script tag is in the right place in your HTML, and your JavaScript code doesn't have syntax errors. Open your browser's developer console (usually F12 or right-click → Inspect) to see error messages that explain what went wrong.

Should I use async instead of defer?

The async attribute downloads the script in the background and runs it as soon as it's ready, without waiting for the page to finish loading. Use async for scripts that don't depend on your HTML elements, like analytics or ads. Use defer when your script needs to interact with the page content.