How to Include JavaScript in HTML

Discover the essential methods for adding JavaScript to your webpage, from simple internal tags to high-performance external files with `async` and `defer`.

Lesson ProgressStep 1 of 8

Hello, World!

This is text.

⭐ 0 EXP

Welcome! An HTML page is static. Let's see how to add JavaScript to make it interactive.


<h1>Hello, World!</h1>

Internal Scripts: The <script> Tag

The most direct way to add JavaScript is by placing it inside <script>...</script> tags directly within your HTML file.

This method is fine for very small, simple scripts or for quick testing. However, it's generally not recommended for larger projects because it mixes your logic (JavaScript) with your structure (HTML), making the code harder to maintain and impossible for the browser to cache separately.

<body>
  <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = "Hello!";
  </script>
</body>

System Check

What is the main *disadvantage* of using internal scripts?

Advanced Holo-Simulations

⭐ 0 EXP

Log in to unlock these advanced training modules and test your skills.

Achievements

🔗
Link Master

Correctly link an external JavaScript file.

🚀
Placement Pro

Order scripts for optimal page load performance.

✍️
Syntax Expert

Prove your mastery of <script> tag attributes.

Mission: DOM Manipulation

Add an **internal script** to the HTML below. Your script should find the paragraph with `id="demo"` and change its text to `Hello JavaScript!`.

A.D.A. Feedback:

> System integrity looks stable. Code is valid.

Challenge: Optimize Load Order

Drag the elements into the correct order inside the `<body>` tag for the fastest user-perceived load time.

<script src="app.js"></script>
<h1>My Page Title</h1>
<p>My page content.</p>

Challenge: Complete the Syntax

Fill in the missing parts to link an external script and defer its execution.

<="app.js"></tag>

Consult A.D.A.

Community Holo-Net

Peer Project Review

Submit your "DOM Manipulation" project for feedback from other Net-Runners.

Support Us

Mastering Script Integration: Performance & Maintainability

Knowing *how* to include JavaScript with a <script> tag is just the first step. To build professional, high-performance websites, you must understand *where* and *why* you place your scripts. The goal is twofold: **maximum maintainability** and **minimum impact on page load speed**.

The Three Methods: Pros and Cons

JavaScript can be included in three ways, each with serious implications for your project.

  • Internal Script: <script>...</script>
    Placing code directly in your HTML.
    Pros: Quick for testing, no extra HTTP request.
    Cons: Cannot be cached by the browser, mixes logic with structure, not reusable across pages.
  • External Script: <script src="app.js"></script>
    Linking to a separate .js file.
    Pros: **This is the best practice.** It promotes separation of concerns, the file is cached for faster loads on subsequent visits, and the code is reusable and easier to maintain.
    Cons: Requires an additional HTTP request (though this is a minor issue with modern protocols like HTTP/2).
  • Inline Script: <button onclick="...">
    Placing JS code inside an HTML attribute.
    Pros: Almost none, other than being a "quick hack."
    Cons: A maintenance nightmare. It's hard to read, impossible to debug effectively, mixes behavior and structure, and is often blocked by Content Security Policies (CSP) on secure websites. **Avoid this method.**

The Great Debate: <head> vs. <body>

Where you place your <script> tag is one of the most critical performance decisions you can make.

❌ Bad: In the <head> (without attributes)

<head>
  <script src="app.js"></script>
</head>

This is **render-blocking**. The browser must stop parsing the HTML, download the script, and execute it before it can show *anything* else on the page. The user sees a blank white screen.

✔️ Good: End of <body>

<body>
  
  <script src="app.js"></script>
</body>

This is the classic solution. The browser parses and displays all the HTML content first. The user sees your page quickly. The script then downloads and runs, adding interactivity.

The Modern Solution: async and defer

The classic "end of body" method is good, but modern attributes give us even better control. These attributes are only for external scripts and are placed in the <head>.

  • <script src="app.js" async></script>
    The script is downloaded *asynchronously* (in parallel) while the HTML is being parsed. As soon as it's downloaded, the HTML parsing is *paused* and the script is executed.
    Use Case: Independent scripts, like analytics or ads, where execution order doesn't matter.
  • <script src="app.js" defer></script>
    The script is downloaded *asynchronously* (in parallel) while the HTML is being parsed. The script is *only* executed **after** the entire HTML document has been parsed, but before the `DOMContentLoaded` event.
    Use Case: **This is the modern best practice.** It's non-blocking *and* guarantees scripts will execute in the order they appear in the HTML.
Key Takeaway: For optimal performance and maintainability, link your JavaScript using **external files** and place the <script> tags in the <head> with the defer attribute. Avoid inline scripts at all costs.

JavaScript Integration Glossary

<script> Tag
The HTML element used to embed or reference an executable script. This is the foundation for all JavaScript integration.
src Attribute
The "source" attribute for a <script> tag. It specifies the URL of an external script file.
Render-Blocking
Describes a resource (like a script or stylesheet) that pauses the browser's parsing and rendering of the HTML document until the resource is downloaded and executed. This is bad for performance.
defer Attribute
A boolean attribute for <script> tags that postpones script execution until after the document has been parsed. It downloads in parallel and does not block rendering. Crucially, it maintains the execution order of scripts.
async Attribute
A boolean attribute for <script> tags that allows the script to be downloaded in parallel and executed as soon as it's available, without blocking rendering. It does *not* guarantee execution order.
DOM (Document Object Model)
The browser's tree-like representation of the HTML document. JavaScript is used to interact with and manipulate the DOM (e.g., change text, add elements). Scripts must run *after* the DOM elements they reference have been parsed.
Separation of Concerns (SoC)
A design principle for separating a computer program into distinct sections. In web development, this means keeping HTML (structure), CSS (presentation), and JavaScript (behavior) in separate files.
Unobtrusive JavaScript
The practice of separating JavaScript behavior from the HTML structure. This means avoiding inline event handlers (like `onclick`) and instead using `addEventListener` in an external script.
Content Security Policy (CSP)
An HTTP security header that helps prevent attacks like Cross-Site Scripting (XSS). A strict CSP will block all inline scripts, forcing developers to use external files.

About the Author

Author's Avatar

TodoTutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of web development experts, who have years of experience teaching JavaScript and building robust, high-performance web applications.

Verification and Updates

Last reviewed: November 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest ECMAScript specifications and browser performance best practices.

External Resources

Found an error or have a suggestion? Contact us!