JavaScript can be added to an HTML document via the <script> element (inline or external file), or via inline event-handler attributes like onclick — though the latter is now considered poor practice.

Syntax

<script src="/app.js" defer></script>
<!-- Old-style inline event handler (avoid): -->
<button onclick="alert('Hi')">Click</button>

Deep Dive Course

There are two main ways JavaScript connects to HTML: the **`<script>`** element (covered in depth on its own page) for inline or external code, and **inline event-handler attributes** — `onclick`, `onchange`, `onsubmit`, and dozens more — written directly on an HTML element. While inline handlers still work, modern best practice strongly favors **unobtrusive JavaScript**: keeping all behavior in external `.js` files and attaching listeners with `addEventListener`, which cleanly separates structure (HTML) from behavior (JS) and avoids issues like Content Security Policy (CSP) restrictions that commonly block inline scripts/handlers for security.

1Understanding JavaScript in HTML

There are two main ways JavaScript connects to HTML: the `<script>` element (covered in depth on its own page) for inline or external code, and inline event-handler attributes — onclick, onchange, onsubmit, and dozens more — written directly on an HTML element. While inline handlers still work, modern best practice strongly favors unobtrusive JavaScript: keeping all behavior in external .js files and attaching listeners with addEventListener, which cleanly separates structure (HTML) from behavior (JS) and avoids issues like Content Security Policy (CSP) restrictions that commonly block inline scripts/handlers for security.

💡

Many sites enforce a Content Security Policy (CSP) that blocks inline event handlers and inline <script> blocks entirely as an anti-XSS measure — code relying on onclick="..." attributes will silently fail to run on such sites.

editor.html

<!-- Old style: inline handler -->
<button onclick="console.log('clicked')">Click me</button>

localhost:3000

2Practical Example

Here is a real-world application of JavaScript in HTML showing how it is used in production HTML.

editor.html

<!-- Modern style: unobtrusive JavaScript -->
<button id="myBtn">Click me</button>
<script>
  document.getElementById('myBtn').addEventListener('click', () => {
    console.log('clicked');
  });
</script>

localhost:3000

3Best Practices

Follow these guidelines when working with JavaScript in HTML:

1. Prefer addEventListener in an external script over inline onclick/onchange attributes

2. Keep HTML (structure) and JavaScript (behavior) in separate files for maintainability

3. Be aware that a strict CSP can block inline scripts/handlers entirely — unobtrusive JS avoids that problem altogether

⚠️

Tip: Many sites enforce a Content Security Policy (CSP) that blocks inline event handlers and inline <script> blocks entirely as an anti-XSS measure — code relying on onclick="..." attributes will silently fail to run on such sites.

editor.html

<!-- Old style: inline handler -->
<button onclick="console.log('clicked')">Click me</button>

localhost:3000

Examples

Example 01Basic Usage

<!-- Old style: inline handler -->
<button onclick="console.log('clicked')">Click me</button>

Example 02Advanced Example

<!-- Modern style: unobtrusive JavaScript -->
<button id="myBtn">Click me</button>
<script>
  document.getElementById('myBtn').addEventListener('click', () => {
    console.log('clicked');
  });
</script>

Best Practices

Prefer addEventListener in an external script over inline onclick/onchange attributes
Keep HTML (structure) and JavaScript (behavior) in separate files for maintainability
Be aware that a strict CSP can block inline scripts/handlers entirely — unobtrusive JS avoids that problem altogether

Interview Question

Why do many modern sites avoid inline event-handler attributes like onclick in favor of addEventListener in an external script?▼

Hint: Think about separation of concerns, and about Content Security Policy restrictions.

Inline handlers mix behavior directly into markup, making code harder to maintain, reuse, and reason about compared to keeping JavaScript in dedicated files. More concretely, many sites enforce a Content Security Policy (CSP) — a security header restricting what scripts can run — that explicitly blocks inline scripts and inline event-handler attributes by default, as a defense against cross-site scripting (XSS) attacks that inject malicious inline code. Code relying on onclick="..." simply won't execute at all under such a policy, while addEventListener attached from an allowed external script continues to work.

Exercises

EasyPractice using JavaScript in HTML in a real scenario.

View Solution

<!-- Old style: inline handler -->
<button onclick="console.log('clicked')">Click me</button>

Frequently Asked Questions

Why do many modern sites avoid inline event-handler attributes like onclick in favor of addEventListener in an external script?▼

Related Functions

script-tagbutton-tag