javascript

Internal Script Tags

Learn how to write JavaScript in separate .js files and link them to HTML. External files keep your code clean, reusable, and easy to maintain — the way real projects are built.

6 min read 9 sections Tutorial

In real projects, JavaScript code lives in separate `.js` files — not mixed inside HTML. This page shows you how to create external JS files, link them correctly, and follow the same approach used in every professional codebase.

External JavaScript Files

JavaScript can be written directly in HTML using <script> tags, but for real projects it is better to place JavaScript in a separate .js file.

External JavaScript files keep your code organized, reusable across multiple pages, and easier to maintain.

What is an External JavaScript File?

An external JavaScript file is a plain text file with a .js extension — for example script.js or app.js. You write your JavaScript code there, then link it to your HTML using a <script src="..."> tag. The browser downloads the file and runs it.

Clean HTML

Your HTML stays focused on structure. No JavaScript mixed in.

Reusable

Link the same .js file to multiple HTML pages. Write once, use everywhere.

Browser Caching

Browser caches the .js file. Faster page loads on repeat visits.

Easier to Maintain

Find and fix bugs faster when JavaScript is in its own dedicated file.

How to Link an External JS File

You need two things:

A .js file with your JavaScript code
A <script src="..."> tag in your HTML pointing to that file

Here is the simplest possible example:

htmlindex.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>My Page</title>
6</head>
7<body>
8  <h1>Hello World</h1>
9
10  <!-- Link to external JS file -->
11  <script src="script.js"></script>
12</body>
13</html>

javascriptscript.js

1// This is your external JavaScript file
2console.log('External JS loaded!');
3
4let name = 'ChilluCoder';
5console.log('Welcome to', name);

Where to put the <script> tag?

Always place your <script src="..."> tag just before </body>, not in <head>.

Why? When the browser sees a <script> tag, it stops rendering the page and downloads the JS file first. Placing it at the bottom means your HTML content loads and displays first — the page feels faster to the user.

File Paths

File Paths — Where is your .js file?

The src attribute tells the browser where to find your JavaScript file. The path you write depends on where your .js file lives relative to your HTML file.

This is one of the most common sources of confusion for beginners — getting the path wrong means your JavaScript simply will not load.

htmlDifferent file path examples

1<!-- Same folder as HTML -->
2<script src="script.js"></script>
3
4<!-- Inside a 'js' subfolder -->
5<script src="js/script.js"></script>
6
7<!-- One folder up, then into js folder -->
8<script src="../js/script.js"></script>
9
10<!-- Absolute path from root of website -->
11<script src="/assets/js/script.js"></script>
12
13<!-- External URL (CDN) -->
14<script src="https://cdn.example.com/library.js"></script>

Project Structure	src value
index.html and script.js in same folder	src="script.js"
script.js inside /js/ folder	src="js/script.js"
script.js one level up	src="../script.js"
script.js at website root	src="/script.js"

Common Mistake — Wrong file path

If your JavaScript is not running, check the file path first. Open browser DevTools (F12) → Console tab. You will see a red error like:

Failed to load resource: script.js (404 Not Found)

This means the path is wrong. Double-check the folder structure and spelling.

Using Multiple JS Files

You can link as many .js files as you need — just add multiple <script> tags. Order matters. Files are loaded and executed from top to bottom. If app.js uses a function defined in utils.js, then utils.js must come first.

htmlindex.html — load order matters

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>My App</title>
6</head>
7<body>
8  <h1>My App</h1>
9
10  <!-- Load utils.js first, then app.js -->
11  <script src="js/utils.js"></script>
12  <script src="js/app.js"></script>
13</body>
14</html>

✗ Badutils.js — defines helpers

// utils.js
function greet(name) {
  return 'Hello, ' + name + '!';
}

function add(a, b) {
  return a + b;
}

✓ Goodapp.js — uses them

// app.js (loaded after utils.js)
console.log(greet('Sombir'));  // Hello, Sombir!
console.log(add(5, 10));       // 15

Wrong order = error

If you load app.js before utils.js, the browser throws:

ReferenceError: greet is not defined

Because when app.js runs, utils.js has not loaded yet. Always load dependencies first.

defer and async Attributes

defer and async — Load JS Without Blocking

By default, when the browser hits a <script> tag it stops building the page, downloads the JS file, runs it, then continues. This can make your page feel slow.

Two attributes fix this: defer and async.

htmldefer vs async vs default

1<!-- Default: blocks page rendering -->
2<script src="script.js"></script>
3
4<!-- defer: downloads in background, runs AFTER HTML is fully parsed -->
5<script defer src="script.js"></script>
6
7<!-- async: downloads in background, runs AS SOON AS downloaded -->
8<script async src="script.js"></script>

Attribute	Download	Execution	Best For
none (default)	Blocks page	Immediately, in order	Scripts that must run early
defer	Background	After HTML parsed, in order	Most scripts — recommended
async	Background	As soon as ready, any order	Analytics, ads, independent scripts

Which should you use?

Use defer for almost everything. It is the safest and most predictable option — your script runs after the full HTML is loaded, in the order you defined.

Use async only for completely independent scripts that do not depend on anything else — like Google Analytics.

Best Practices

Best Practices for External JS Files

Pro Tips

1Use descriptive file names: cart.js, navbar.js, form-validation.js — not script1.js
2Put JS files in a dedicated folder: /js/ or /assets/js/
3Always use defer when placing scripts in <head>
4Load third-party libraries before your own code
5One responsibility per file — do not put unrelated code in the same file
6Never put passwords or API keys in .js files — they are visible to everyone

Security Warning

Everything in your .js file is publicly visible. Anyone can open DevTools and read your JavaScript. Never store passwords, secret API keys, or private data in external JS files.

Inline vs Internal vs External

Inline vs Internal vs External — Which to Use?

Method	Where	Best For	Avoid When
Inline	Inside HTML attribute: onclick="..."	Very small one-off interactions	Anything more than 1-2 lines
Internal	Inside <script> in HTML file	Single-page demos, quick testing	Projects with multiple pages
External	Separate .js file	Everything else — real projects	Almost never a reason to avoid it

Real-world rule

In real projects, external files are always the right choice. Every professional JavaScript codebase — React apps, Node.js servers, browser extensions — uses external files. Start building this habit now.

Try It Yourself

Practice writing a JavaScript function in an external file. Run it below and check the output:

javascriptapp.js — complete the function

1// Write a function called greetUser
2// It should take a name and log: "Welcome, [name]! Happy coding."
3
4function greetUser(name) {
5  console.log('Welcome, ' + name + '! Happy coding.');
6}
7
8// Call it with different names
9greetUser('Sombir');
10greetUser('Alice');
11greetUser('Bob');

Expected output

Welcome, Sombir! Happy coding.
Welcome, Alice! Happy coding.
Welcome, Bob! Happy coding.

Summary

Pro Tips

1External JS files use the .js extension and are linked with <script src="...">
2Always place <script> at the bottom of <body>, or use defer in <head>
3File paths in src are relative to the HTML file location
4Load files in the correct order — dependencies always first
5Use defer for most scripts, async only for fully independent ones
6External files are the standard for all real-world JavaScript projects

What's Next?

Now that you know how to load JavaScript properly, the next step is Browser Developer Tools Console — where you can run JavaScript directly in your browser, inspect errors, and debug your code in real time.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next