AT A GLANCE
Use an external JavaScript file with defer for most websites, and reserve inline code for small, page-specific tasks. The right script placement determines when your code runs and whether the required HTML elements already exist.
- The
<script>element connects JavaScript to an HTML document. - External files keep code reusable, easier to test, and simpler to cache.
deferpreserves document parsing and runs a classic external script after HTML parsing.asyncsuits independent scripts, such as analytics, because execution order is not guaranteed.
Your choice changes when the browser downloads and executes the script, so match the method to the interaction you are building.
How JavaScript Works with HTML
JavaScript adds behavior to HTML, the markup that defines a page’s structure. The browser parses HTML into a Document Object Model (DOM), which is a live tree of elements that JavaScript can read, modify, and respond to.
HTML alone can create a button, form, or navigation link, but JavaScript can react when a visitor uses it. For example, a script can listen for a click, change text, validate input, or request data from a server.
JavaScript does not run merely because a .js file exists beside your HTML file. The document must load that file through a <script> element, either by placing code between the element’s tags or by using its src attribute.
The <script> Tag: The Standard Way to Add JavaScript
The <script> tag tells the browser to interpret its contents as JavaScript or fetch JavaScript from another URL. A minimal inline script looks like this:
<script>
console.log('JavaScript is running');
</script>For a separate file, add src with a relative or absolute URL:
<script src='js/app.js'></script>According to MDN’s guide to adding JavaScript to a web page, classic scripts without async or defer execute as soon as the parser reaches them. That behavior can pause HTML parsing and prevent the script from finding elements that appear later.
Three Ways to Add JavaScript to HTML
HTML supports inline code, an internal script block, and an external JavaScript file. The table shows when each method fits and what trade-off it creates.
| Method | Example location | Best use | Main weakness |
|---|---|---|---|
| Inline attribute | onclick |
Small tests or legacy markup | Mixes behavior with HTML |
| Internal script | <script> in the page |
Short page-specific behavior | Harder to reuse |
| External file | src='js/app.js' |
Most production sites | Requires correct file paths |
Inline JavaScript
Inline JavaScript places code directly in an HTML event attribute or another attribute that accepts a script. This example displays a browser dialog when the button is clicked:
<button onclick='alert("Hello")'>Say hello</button>It works without a separate file, but the markup now contains both structure and behavior. That makes code review, reuse, testing, and security policies more difficult as the page grows.
Internal JavaScript in a <script> Element
Internal JavaScript keeps code in the same HTML document while separating it from individual element attributes. Put the block near the end of <body> for a small page-specific interaction:
<button id='theme-button'>Change theme</button>
<script>
const button = document.querySelector('#theme-button');
button.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
</script>This is convenient for a single static page, but repeated code across several pages becomes difficult to maintain. Move shared behavior into an external file once more than one document needs it.
External JavaScript in a Separate File
An external file stores JavaScript outside the HTML document and is loaded with src. Create js/app.js with the following code:
const message = document.querySelector('#message');
message.textContent = 'The external file loaded.';Then connect it from the HTML:
<p id='message'>Waiting...</p>
<script src='js/app.js' defer></script>This approach gives you one source of truth for shared behavior and lets browsers cache the file. It is usually the cleanest way to link a JavaScript file to HTML.
How to Add Inline JavaScript to an HTML Element
To add inline JavaScript to an HTML element, place a JavaScript expression in an event attribute such as onclick, onchange, or onsubmit. For example:
<input onchange='console.log(this.value)' placeholder='Type here'>The browser evaluates the handler when the event occurs. This can be useful while learning or testing a tiny example, but it tightly couples your HTML to a specific implementation.
Why Inline Event Handlers Are Usually Best Avoided
Inline handlers are usually best avoided because they scatter behavior through the markup and make one function harder to reuse. A separate listener also gives you clearer control over event handling and supports stricter Content Security Policy (CSP) configurations.
Use an element identifier or class in HTML, then attach behavior in JavaScript:
<button id='save-button'>Save</button>
<script>
document.querySelector('#save-button').addEventListener('click', saveData);
function saveData() {
console.log('Saved');
}
</script>How to Add JavaScript in the <head> or <body>
You can place a script in either the document <head> or <body>. A script in the head without a loading attribute can block HTML parsing, while a script at the end of body runs after the elements above it have been parsed.
For production pages, an external script in the head with defer is often easier to organize than placing every script before </body>. The choice still depends on whether the code must run before parsing finishes.
Using defer for Scripts in the <head>
defer downloads an external classic script while the browser continues parsing HTML, then executes it after parsing is complete. Deferred scripts keep their document order, so you can load a dependency before the file that uses it.
<head>
<script src='js/app.js' defer></script>
</head>Use defer when the script needs DOM elements and does not need to run before the page is parsed. It does not apply in the same way to inline scripts, because the attribute is designed for external classic scripts.
Using async for Independent Scripts
async downloads an external script in parallel with HTML parsing and executes it as soon as it is ready. Its execution can interrupt parsing, and multiple async scripts may run in a different order from the order in the document.
<script src='js/analytics.js' async></script>Choose async for an independent script that does not rely on your DOM setup or another script. The MDN JavaScript and HTML documentation supports this distinction: use deferred loading when document order matters and asynchronous loading when the script can operate independently.
How to Link an External JavaScript File
To link an external JavaScript file to HTML, add a <script> element whose src points to the file. The URL is resolved relative to the HTML document’s location, not necessarily relative to the JavaScript file.
Basic External Script Example
With this project structure, the HTML file can load the script using js/app.js:
project/
├── index.html
└── js/
└── app.js<script src='js/app.js' defer></script>If index.html is inside a folder named pages, the path becomes ../js/app.js. A leading slash, such as /js/app.js, points to the website root and may behave differently on a local file system.
Organizing JavaScript Files and Paths
Keep shared browser code in a predictable directory such as js/ or assets/js/. Use lowercase filenames and check capitalization because many web servers treat App.js and app.js as different files.
Open your browser’s Developer Tools, select the Network panel, and reload the page if a script does not load. A red 404 response usually means the URL is wrong, while a console syntax error points to invalid JavaScript.
How to Trigger JavaScript from HTML
JavaScript is triggered from HTML when code listens for an event or runs during page initialization. The preferred pattern is to give the element an accessible HTML role and connect it with addEventListener().
Responding to User Events with addEventListener()
addEventListener() registers a function for an event without adding JavaScript directly to the markup. This example responds to a click:
const button = document.querySelector('#start');
button.addEventListener('click', function () {
console.log('Started');
});The listener only works if #start exists when the code runs. Loading the file with defer, placing it after the element, or waiting for DOMContentLoaded solves that timing problem.
Connecting JavaScript to Buttons, Forms, and Other Elements
Use semantic HTML controls, such as <button> and <form>, instead of making a generic <div> behave like a control. Semantic elements provide keyboard behavior and browser features before JavaScript is added.
For forms, listen for the submit event and call event.preventDefault() only when you intentionally replace the browser’s normal submission:
form.addEventListener('submit', function (event) {
event.preventDefault();
// Validate or process the form here.
});For larger projects, a build tool or deployment service can bundle these files, but the browser still receives JavaScript through script resources. You can publish a small static project with the GitHub Pages website setup if you need a simple hosting workflow.
Practical Examples
The following examples use an external-style script pattern and work in a plain HTML file without a framework.
Display a Message When a Button Is Clicked
This example updates a paragraph after the visitor activates a button:
<button id='hello-button' type='button'>Show message</button>
<p id='hello-message' aria-live='polite'></p>
<script>
const helloButton = document.querySelector('#hello-button');
const helloMessage = document.querySelector('#hello-message');
helloButton.addEventListener('click', () => {
helloMessage.textContent = 'JavaScript changed this message.';
});
</script>The aria-live='polite' attribute lets assistive technology announce the updated text without interrupting the current task. The explicit type='button' also prevents accidental form submission if the button later moves inside a form.
Validate a Simple Form
Client-side validation can give immediate feedback, but the server must validate submitted data again. This example checks that a name contains at least 2 characters:
<form id='name-form'>
<label for='name'>Name</label>
<input id='name' name='name' required>
<button type='submit'>Send</button>
<p id='form-message' role='status'></p>
</form>
<script>
const form = document.querySelector('#name-form');
const nameInput = document.querySelector('#name');
const formMessage = document.querySelector('#form-message');
form.addEventListener('submit', (event) => {
event.preventDefault();
const valid = nameInput.value.trim().length >= 2;
formMessage.textContent = valid ? 'Name accepted.' : 'Enter at least 2 characters.';
});
</script>The built-in required attribute handles an empty value, while JavaScript applies the length rule. A production form should also return a useful server response when JavaScript is unavailable or the request is manipulated.
Inline vs. External JavaScript: Which Should You Use?
External JavaScript is the default choice for shared or growing projects, while internal code is reasonable for a small one-page prototype. Inline event attributes are best limited to experiments or maintenance of existing legacy markup.
| Option | Maintainability | Reuse | Recommended use |
|---|---|---|---|
| Inline attribute | Low | Low | Quick experiments |
| Internal block | Medium | Low to medium | One-page prototypes |
| External file | High | High | Production websites |
External files also work well with version control systems such as Git and can be cached by the browser. Re-check browser behavior and documentation when changing script loading strategies because specifications, tooling, and browser implementations change over time.
JavaScript and Accessibility Best Practices
Accessible JavaScript preserves the content and controls that HTML already provides, then enhances them for users who can run scripts. Follow these practices:
- Use semantic elements such as
<button>,<label>, and<form>instead of clickable generic containers. - Make every interaction usable with a keyboard, including visible focus states and logical Tab order.
- Keep meaningful content in structured HTML so it remains available if JavaScript fails or is disabled.
- Announce dynamic updates with suitable attributes such as
aria-live, but do not use ARIA to replace a native control. - Provide a fallback with
<noscript>when visitors need to know that a feature depends on JavaScript.
MDN’s accessibility guidance for JavaScript recommends keyboard support, structured text, user-initiated interactions, and a fallback for users without scripts. JavaScript can improve access, but it cannot repair an interaction designed without semantic HTML.
Common Problems When Adding JavaScript to HTML
Most failures come from a wrong path, an execution timing issue, or a JavaScript error. Check these causes in order:
- The file returns 404: inspect the Network panel and correct the relative path, filename, or capitalization.
querySelector()returnsnull: usedefer, move the script after the target element, or wait forDOMContentLoaded.- Nothing happens after a click: confirm the selector matches the element and inspect the Console for errors.
- Code stops at one error: fix the first red console message before investigating later behavior.
- Changes do not appear: reload without cache in Developer Tools and check whether the browser loaded an older file.
- Inline code is blocked: review the site’s Content Security Policy and move the code into an approved external file.
Test the final page in a current desktop and mobile browser, then re-check script behavior after changing HTML structure. Tool versions and browser behavior can change, so verify implementation details against current official documentation before deployment.
Frequently Asked Questions
Should JavaScript Go in the <head> or <body>?
Put an external script in the <head> with defer when it needs the DOM after parsing. Putting a classic script just before </body> also works because the elements above it have already been parsed.
Can an HTML Page Have Multiple <script> Tags?
Yes, an HTML page can contain multiple script tags. Use separate files when code has different responsibilities, and remember that non-deferred classic scripts run in document order while async scripts do not guarantee order.
What Is the Difference Between async and defer?
async runs an external script as soon as it finishes downloading, so order is not reliable. defer waits until HTML parsing finishes and preserves the order of deferred classic scripts.
Why Is My JavaScript Not Working?
Open Developer Tools and inspect the Console and Network panels first. Check for a 404 path error, a syntax error, a selector that matches no element, or code that runs before the required HTML exists.