JS Where To

JavaScript code does not float freely — it must be placed inside an HTML document within a <script> tag, or loaded from an external .js file. Where you put that code matters, and understanding the options will help you write better, faster, and more organized web pages.

The <script> Tag

The <script> tag is the gateway for JavaScript inside an HTML document. Any JavaScript code written between the opening and closing <script> tags will be read and executed by the browser.

<script>
    // Your JavaScript code goes here
    alert("Hello, World!");
</script>

Note: You can place the <script> tag anywhere inside the <html> document — but the location has a real impact on how and when your code runs.

Three Ways to Place JavaScript

There are three common locations where JavaScript can live in relation to your HTML:

🔵 Inside <head>

Script runs before page content loads. Use for scripts that must be ready immediately.

🟢 Inside <body>

Script runs after HTML is loaded. Recommended for most interactive scripts.

🟠 External File

JavaScript in a separate .js file. Best practice for real projects.

1. JavaScript in the <head>

You can place a <script> tag inside the <head> section of your HTML page. The browser will load and run this script before rendering the page body.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
    <script>
        function greetUser() {
            alert("Welcome to my website!");
        }
    </script>
</head>
<body>
    <button onclick="greetUser()">Say Hello</button>
</body>
</html>

Note: Placing large scripts in the <head> can slow down the page — the browser pauses rendering until the script is fully loaded and executed.

2. JavaScript in the <body>

Placing the <script> tag at the bottom of the <body> is the most common and recommended approach. This way, the HTML content loads first and the user sees the page immediately — then JavaScript kicks in.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>

    <h1>Hello Learner!</h1>
    <p id="demo">This content loads first.</p>

    <!-- JavaScript at the bottom is best practice -->
    <script>
        document.getElementById("demo").innerHTML = "JavaScript also ran!";
    </script>

</body>
</html>

Tip: Always place your <script> tags just before the closing </body> tag. This improves page load speed and ensures HTML elements exist before your script tries to access them.

3. External JavaScript File

For larger projects, writing JavaScript in a separate .js file and linking it to your HTML is the cleanest and most maintainable approach. The same file can be reused across multiple pages.

Create a file called script.js:

// script.js
function showMessage() {
    alert("This came from an external JS file!");
}

Then link it in your HTML using the src attribute on the <script> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>

    <button onclick="showMessage()">Click Me</button>

    <!-- Linking an external JavaScript file -->
    <script src="script.js"></script>

</body>
</html>

Important: When using the src attribute to link an external file, do not add any code between the opening and closing <script> tags — it will be ignored.

Advantages of External JavaScript

Advantage	Why It Matters
Separation of concerns	HTML, CSS, and JS stay in their own files — easier to read and manage
Reusability	One `.js` file can be shared across many HTML pages
Browser caching	The browser caches the `.js` file — pages load faster on repeat visits
Cleaner HTML	Your HTML markup stays short and readable
Easier debugging	All logic in one place makes finding bugs simpler

Key Points to Remember

JavaScript is placed inside the <script> tag or linked via an external .js file
Scripts in the <head> run before the page content is displayed
Scripts at the bottom of <body> run after HTML is loaded — this is the recommended position
External JS files are linked using <script src="file.js"></script>
When using src, do not write code inside the same <script> tag
For real projects, always prefer external JavaScript files

« Previous Lesson Next Lesson »