# How to Link an HTML File to a JavaScript File Connecting your HTML to an external JavaScript file is one of the first foundational skills in web development. Get it right, and your scripts run cleanly. Get it wrong, and nothing works — often with no obvious error message to guide you. Here's exactly how it works, what can go wrong, and what variables shape the outcome. ## The Core Method: The ` ``` That single line tells the browser: *find this file, load it, and execute it*. The `src` value is a **file path** — either relative to your HTML file or an absolute URL. There is no separate "link" element for JavaScript the way there is for CSS. The ` ``` The browser loads and runs the script *before* the page body renders. If your script tries to interact with HTML elements (buttons, forms, divs), those elements don't exist yet — and you'll get errors. ### Option 2: Before `` (Traditional Best Practice) ```html ``` Placing the tag just before the closing `` tag ensures all HTML elements are already in the DOM when the script runs. This was the standard approach for years. ### Option 3: Using `defer` or `async` in `` Modern HTML lets you keep the ` ``` | Attribute | When Script Runs | Blocks HTML Parsing? | |-----------|-----------------|----------------------| | *(none)* | Immediately when encountered | Yes | | `defer` | After HTML is fully parsed | No | | `async` | As soon as downloaded | Partially | **`defer`** is generally the cleaner modern approach for scripts that need to interact with the DOM. **`async`** is better suited for independent scripts like analytics that don't depend on page elements. ## File Paths: Relative vs. Absolute The `src` value you provide must accurately point to where your `.js` file lives. 🗂️ **Relative paths** are the most common for local files: - `src="script.js"` — same folder as the HTML file - `src="js/script.js"` — inside a subfolder called `js` - `src="../script.js"` — one folder level up **Absolute paths** reference a full URL: ```html ``` This is common when loading from a **CDN** (Content Delivery Network) — for example, loading a library like jQuery or Alpine.js from a hosted source rather than a local file. A broken path is one of the most common reasons a linked script silently fails. The browser simply can't find the file and moves on. ## Linking Multiple JavaScript Files You can include as many ` ``` **Order matters.** If `main.js` depends on functions defined in `utilities.js`, `utilities.js` must be listed first. With `defer`, both files will still execute in the order they appear, which preserves dependency chains. ## Common Mistakes That Break the Connection - **Wrong file extension**: The file must actually be `.js`. Naming it `.js.txt` or forgetting the extension breaks the link. - **Case sensitivity**: On Linux-based servers, `Script.js` and `script.js` are different files. Local Windows development may hide this problem until deployment. - **Missing closing tag**: Unlike self-closing HTML elements, ` ` tag even when using `src`. - **Mixing `src` and inline code**: If you use the `src` attribute, any JavaScript written *between* the opening and closing `