How to add JS in HTML is one of the first questions people run into when they start learning web development. The way you include JavaScript affects when the code loads, whether it can interact with page elements, and how easy the project will be to maintain.
Main ways to include JavaScript
In HTML, there are three common ways to work with JavaScript: inline code on the page itself, an external file, and a script tag with extra attributes that control when the code loads and runs.
1. External file with the script tag
For most projects, the best option is to place the code in a separate file and connect it with the script tag:
<script src=”app.js”></script>
This approach is easier to maintain, especially when a page has a lot of logic or when the same JavaScript is used across multiple pages.
2. Inline JavaScript in HTML
Sometimes code is written directly inside the HTML document:
<script>alert(‘Hello’);</script>
This method is fine for simple tests or short demos, but it is usually better to avoid it in real projects. When logic is kept separate, the code is easier to read, edit, and reuse.
3. Using defer or async
If the script is placed in the document head, or you need more control over when it starts, pay attention to the defer and async attributes.
- defer loads the script in parallel but runs it only after the HTML has been fully parsed.
- async loads and runs the script as soon as the file is ready, without guaranteeing execution order.
For most standard pages, defer is the safer choice, especially when the script needs to work with DOM elements.
Where to place the script tag
Most often, the script tag is placed right before the closing </body> tag. This lets the browser load the HTML first and then execute the JavaScript.
Example:
<body>
<h1>Page</h1>
<script src=”app.js”></script>
</body>
If you include the script in the <head>, it is usually better to add defer. Otherwise, the code may run before the browser has created the elements it needs.
Common mistakes when adding JS
- An incorrect file path in src.
- A typo in the file name or extension.
- The script runs before the HTML elements appear in the DOM.
- Several files are included, but they run in the wrong order.
- async is used where execution order matters.
If the code does not work, start by checking the browser console. Errors such as 404 or Uncaught ReferenceError often point to the problem immediately.
Which method should you choose
For learning, any of these options can work. For real websites, the best practice is simple: keep HTML for structure and move JavaScript into a separate file. That makes teamwork, debugging, and future scaling much easier.
If you want the shortest practical answer to how to add JS in HTML, it is this: create a separate file, add the script src tag, and for stable page behavior use defer or place the script at the end of the body.
