beginner

Using JavaScript in HTML Pages

JavaScript is everywhere on the modern web. If you’ve ever clicked a button and watched something change instantly, filled out a form that checks your…

Published 2026-05-18Updated 2026-05-189 min read

JavaScript is everywhere on the modern web. If you’ve ever clicked a button and watched something change instantly, filled out a form that checks your input, or seen an animation on a webpage, chances are JavaScript was involved. In this tutorial, you’ll learn how to add JavaScript to your own HTML pages, step by step. By the end, you’ll be ready to start making your websites interactive and dynamic.

What Is JavaScript?

JavaScript is a programming language designed for the web. It works alongside HTML (which structures your page) and CSS (which styles your page) to add interactivity and dynamic features.

When you visit a website, your browser loads the HTML, CSS, and JavaScript. While HTML and CSS control what you see, JavaScript controls what happens when you interact with the page—like clicking, typing, or moving your mouse.

JavaScript runs directly in your browser. You don’t need to install anything extra; if you have a web browser, you’re ready to use JavaScript.

Quiz Question 1

Question: What is the main purpose of the <script> tag in HTML?

A) To add JavaScript code to a web page
B) To style the web page
C) To create links between pages
D) To add images to the page

Why Use JavaScript in HTML Pages?

Adding JavaScript to your website unlocks a world of possibilities. Here are a few reasons why it’s so widely used:

Interactivity: JavaScript lets you create features like dropdown menus, image sliders, pop-up messages, and form validation.
Dynamic Content: You can update parts of your page without reloading, making your site feel faster and more responsive.
Modern Web Apps: Most web applications—think online stores, social media, or email clients—rely heavily on JavaScript for their user experience.

In short, if you want your website to do more than just display information, you’ll want to add JavaScript.

How Browsers Run JavaScript

When you load a web page, your browser reads the HTML, CSS, and JavaScript together. Here’s what happens:

This diagram illustrates how a web browser processes HTML, CSS, and JavaScript together to create interactive web pages. It helps beginners understand the distinct roles and the order in which each technology is handled.

HTML lays out the structure of the page.
CSS styles the content.
JavaScript runs code that responds to user actions or updates the page.

JavaScript code is executed by the browser as soon as it encounters it in the HTML, or when certain events happen (like clicking a button). You don’t need any special tools—just a browser like Chrome, Firefox, Edge, or Safari.

Ways to Add JavaScript to HTML

There are two main ways to add JavaScript to your HTML pages:

Inline (Embedded) JavaScript: Write JavaScript code directly inside your HTML file.
External JavaScript: Write JavaScript in a separate file and link it to your HTML.

Both methods use the <script> tag, which tells the browser, “Here comes some JavaScript!”

Quiz Question 2

Question: Which of the following is the correct way to link an external JavaScript file named script.js?

A) <script src="script.js"></script>
B) <script href="script.js"></script>
C) <js src="script.js"></js>
D) <script link="script.js"></script>

Using the Script Tag: The Basics

The <script> tag is your main tool for adding JavaScript to HTML. Here’s what you need to know:

Basic Syntax:

<script>
  // Your JavaScript code goes here
</script>

External File Syntax:
```
<script src="script.js"></script>
```

You can place <script> tags almost anywhere in your HTML, but where you put them affects when your code runs. (More on this soon.)

Writing Inline JavaScript

Inline JavaScript means writing your code directly inside your HTML file, between <script> and </script> tags.

Example: Display a message in the browser console

<!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript</title>
    <script>
      console.log('Hello from JavaScript!');
    </script>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
  </body>
</html>

When you open this page in your browser and open the developer console (usually by pressing F12 or right-clicking and selecting “Inspect”), you’ll see the message.

When to use inline scripts:
Inline scripts are great for small amounts of code or quick tests. For larger projects, it’s better to use external files.

Linking to External JavaScript Files

For most projects, you’ll want to keep your JavaScript code in a separate file. This keeps your HTML tidy and makes your code easier to reuse and maintain.

Step 1: Create a JavaScript file

Create a new file named script.js (the .js extension is important).

Example script.js:

console.log('Hello from external JavaScript!');

Step 2: Link the file in your HTML

Add a <script> tag with the src attribute pointing to your JavaScript file:

<!DOCTYPE html>
<html>
  <head>
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
  </body>
</html>

Benefits of external scripts:

Keeps your HTML cleaner.
Makes it easier to reuse code across multiple pages.
Simplifies maintenance, since you only need to update one file.

Quiz Question 3

Question: Why is it recommended for beginners to place the <script> tag just before the closing </body> tag?

A) So the HTML content loads before the JavaScript runs
B) Because scripts only work at the end of the page
C) To make the page load slower
D) It is required by the browser

Where to Place Script Tags in HTML

You can place <script> tags in different parts of your HTML document. Each location affects when your JavaScript runs:

This diagram compares different locations for the <script> tag in an HTML document and shows how placement affects when JavaScript runs. It also introduces the defer and async attributes for external scripts.

In the <head>:
The script runs before the page content is loaded. This can be a problem if your script tries to access elements that haven’t been created yet.
At the end of <body> (recommended for beginners):
Placing your <script> tag just before </body> ensures that the HTML content loads first. This way, your script can safely interact with all elements on the page.
```
<body>
  <h1>Welcome!</h1>
  <script src="script.js"></script>
</body>
```
Advanced: Using defer and async attributes:
These attributes control when external scripts run.
- defer tells the browser to run the script after the HTML is fully loaded.
- async runs the script as soon as it’s downloaded, which can be unpredictable for beginners.
For now, placing your script at the end of the body is the simplest and safest choice.

Common Mistakes and How to Avoid Them

Starting out, it’s easy to make small mistakes. Here are some tips to help you avoid common problems:

Use the correct file extension:
JavaScript files must end with .js, not .txt or .html.
Check your script tag syntax:
Make sure you open and close your <script> tags properly, and use the src attribute correctly for external files.
Double-check file paths:
If your script isn’t running, make sure the path in your src attribute matches your file’s location.
Look for typos:
Even a small typo can stop your script from working. If you don’t see the expected result, check your code carefully.

Quiz Question 4

Question: What file extension should you use for a JavaScript file?

A) .js
B) .html
C) .css
D) .txt

Quiz Question 5

Question: If your JavaScript code is not working, which of the following should you check first?

A) Check for typos in your code and script tag
B) Make sure your CSS file is linked
C) Change your browser
D) Add more <h1> tags

Try It Yourself: Simple Example

Let’s walk through adding JavaScript to a web page step by step.

Step 1: Create an HTML file

Create a file named index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Test</title>
  </head>
  <body>
    <h1>Hello, JavaScript!</h1>
    <script>
      alert('Welcome to JavaScript in HTML!');
    </script>
  </body>
</html>

Step 2: Open your file in a browser

Double-click index.html or open it in your favorite browser. You should see a pop-up message when the page loads.

Step 3: Try with an external file

Create a file named script.js in the same folder.

Add this code to script.js:

alert('This is an external JavaScript file!');

Update your HTML file to link the external script:
```
<script src="script.js"></script>
```
Refresh your browser to see the result.

Congratulations! You’ve just added JavaScript to your website.

What’s Next?

You’ve taken your first steps with JavaScript in HTML. Here’s how to keep going:

Practice: Try adding scripts to more pages. Experiment with both inline and external scripts.
Explore JavaScript basics: Learn about variables, functions, and how to respond to user actions like clicks and keypresses.
Keep learning: Ready for the next step? Check out our beginner tutorial on JavaScript Variables and Data Types.

Conclusion

Adding JavaScript to your HTML pages is the first step toward building interactive, modern websites. Start small, experiment, and don’t worry if you make mistakes—that’s how you learn. As you get comfortable, you’ll be able to create richer experiences for your users and open the door to even more programming possibilities. Happy coding!

Quiz Answer Key

Question 1

Correct answer: A) To add JavaScript code to a web page

Explanation: The <script> tag is used to embed or link JavaScript code in an HTML page.

Question 2

Correct answer: A) <script src="script.js"></script>

Explanation: The src attribute in the <script> tag is used to link to an external JavaScript file.

Question 3

Correct answer: A) So the HTML content loads before the JavaScript runs

Explanation: Placing the script at the end ensures all HTML elements are loaded before the script runs, preventing errors.

Question 4

Correct answer: A) .js

Explanation: JavaScript files should have the .js extension so browsers recognize and execute them as JavaScript.

Question 5

Correct answer: A) Check for typos in your code and script tag

Explanation: Typos in your code or script tag are a common reason for JavaScript not working.