Definition and Usage

JavaScript in HTML means connecting behavior to your markup with the <script> element. HTML builds structure, CSS styles it, and JavaScript responds to clicks, updates text, and validates forms—without reloading the page.

What does the HTML script element do?

It tells the browser to run JavaScript as part of the document. Code can live inside the tag (inline) or in a separate .js file linked with src.

When should you add scripts to HTML?

Whenever the page needs interactivity: buttons, live text updates, form checks, or talking to APIs. Start with a small inline <script> at the end of <body>, then move logic into external files as the project grows.

HTML vs CSS vs JavaScript

Keep roles clear in your HTML project: markup for content, CSS for presentation, and scripts for behavior. Mixing large scripts into every page makes HTML hard to maintain.

HTML Syntax

Both start and end tags are required. With src, leave the element empty—do not put code between the tags. See the full <script> tag reference for async, type="module", and more.

Core HTML Concepts

Terms you will use when wiring JavaScript into an HTML document:

Ways to add JavaScript to HTML

How to Add JavaScript to an HTML Page

Connect a script to your HTML, place it so the DOM is ready, then update elements or handle events.

1. Create your HTML structure (h1, p, button, etc.) with clear ids when scripts need them.
2. Add a <script> at the end of <body>, or link <script src="app.js" defer> from <head>.
3. Select elements with document.getElementById(...) (or query selectors) and change textContent, classes, or styles.
4. Hook up clicks with a button onclick for demos, or addEventListener in the script for cleaner HTML.
5. Move repeated logic into an external .js file and keep HTML focused on content.

Live Preview

Pick a message and apply it to a sample HTML paragraph—the same idea as an inline script calling textContent.

HTML Examples

Six patterns from your first embedded script to a full interactive HTML page. Use Try It Yourself for a live editor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML with JavaScript</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p id="status">Waiting...</p>

  <script>
    document.getElementById('status').textContent =
      'Hello, JavaScript is working!';
  </script>
</body>
</html>

<body>
  <h1>Page Content Loads First</h1>
  <p id="note">This paragraph exists before the script runs.</p>

  <script>
    document.getElementById('note').textContent =
      'Script ran after the HTML was parsed.';
  </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External JavaScript Demo</title>
  <script src="app.js" defer></script>
</head>
<body>
  <h1>External JavaScript File Example</h1>
  <p id="log">Loading script...</p>
</body>
</html>

console.log('This message is from an external JavaScript file.');

var log = document.getElementById('log');
if (log) {
  log.textContent = 'This message is from an external JavaScript file.';
}

<button type="button" onclick="alert('Button clicked!')">Click Me</button>

<h1 id="myTitle">Original Title</h1>
<button type="button" onclick="updateTitle()">Update Title</button>
<script>
  function updateTitle() {
    document.getElementById('myTitle').textContent = 'New Title';
  }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="complete.js" defer></script>
</head>
<body>
  <h1>Welcome to JavaScript with HTML</h1>
  <p id="demo">JavaScript can change this text.</p>
  <button type="button" onclick="changeText()">Click me</button>
</body>
</html>

function changeText() {
  var demo = document.getElementById('demo');
  if (demo) {
    demo.textContent = 'Text changed by JavaScript!';
  }
}

Key Takeaways