Adding JavaScript to HTML

Learn how to include JavaScript in your web pages using inline, internal, and external methods.

Loading...
Adding JavaScript to HTML

JavaScript adds behavior and interactivity to your HTML pages by allowing you to manipulate content, respond to user actions, and more.

But how exactly do you include JavaScript in an HTML file?

There are three ways to add JavaScript to HTML:

  1. Inline JavaScript
  2. Internal JavaScript
  3. External JavaScript

Inline JavaScript

Inline JavaScript is written directly inside an HTML tag, typically using attributes like onclick, onmouseover, onchange, etc.

For example:

<button onclick="alert('Hello from Learnify!')">
  Click Me
</button>

Here, the onclick attribute contains a small JavaScript snippet that shows an alert when the button is clicked.

When to Use Inline JavaScript

  • For very small actions, like a quick alert or toggling a CSS class.
  • When you want to test something quickly.
  • Mixing JavaScript with HTML makes the code harder to read and maintain.
  • You can’t reuse or organize the logic efficiently.
  • It violates the separation of concerns (HTML for structure, JS for behavior).

Use inline JavaScript only when you're doing something very small and temporary.

Internal JavaScript

Internal JavaScript is written inside a <script> tag within your HTML file. It usually goes in the <head> or just before the </body> tag.

For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add JavaScript to HTML - Learnify</title>
    <script>
      function greet() {
        alert("Hello from Learnify!");
      }
    </script>
  </head>
  <body>
    <button onclick="greet()">Click Me</button>
  </body>
</html>

The greet() function is defined inside the <script> tag and called when the button is clicked.

When to Use Internal JavaScript

  • When you're building a single-page project or small demo.
  • If your script is short and specific to just that one page.
  • For testing purposes.

Limitations

  • Code gets messy if the script is long.
  • Hard to reuse the script across multiple pages.
  • Can still mix behavior (JS) with structure (HTML), making it less organized.

Internal scripts are okay when you're learning or writing quick one-page apps, but not ideal for real-world, multi-page projects.

External JavaScript

External JavaScript is stored in a separate .js file and included using a <script src="..."> tag.

This is the most common and recommended way to include JavaScript.

For example:

script.js:

function greet() {
  alert("Hello from an external file!");
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>External Script - Learnify</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <button onclick="greet()">Click Me</button>
  </body>
</html>

Here, <script src="script.js" defer></script> connects your HTML file to an external JavaScript file named script.js.

src="script.js" tells the browser where the JS file is located.

Always make sure the path matches your actual file structure.

Here are the common ways to write it:

  • src="script.js": The file is in the same folder as your HTML.
  • src="js/script.js": The file is inside a folder named js.
  • src="../script.js": The file is one folder up from the HTML.
  • src="https://...": Loads from an external URL or CDN.

Why Use defer?

The defer attribute tells the browser to load the JS file in the background and run it after the HTML is fully loaded.

This prevents errors like trying to use elements that haven’t been loaded yet.

When to Use External JavaScript

  • When you’re building any real project.
  • If you want to reuse code across multiple pages.
  • For better organization, especially when your script is long.
  • When working in teams, it keeps code modular and easier to manage.

Benefits

  • Keeps HTML and JavaScript separate, easier to read, debug, and maintain.
  • Scripts can be cached by the browser, which improves performance.
  • Easier to use modern tools and frameworks (like React, Vue, etc.).
Support my work!