How to Add JavaScript to HTML (3 Easy Methods)

Do you want to run JavaScript code but don’t know how to add JavaScript to HTML? Don’t worry, this tutorial will teach you everything about that in detail. It’s very easy and we have 3 ways to do this. We’re going to explain that in this guide with code examples and tips. So, let’s begin.

JavaScript is the language that requires the support of HTML to run its scripts. We also call it a scripting language. We use js to convert static HTML websites to modern ones. JavaScript does a lot of wonders for web developers and provides a lot of flexibility.

It is the first step to your JavaScript journey. Now, let’s go to the main topic.

How to Add JavaScript to HTML

There are three ways to add JavaScript to HTML documents. And these are the only ways that we can use to link js to HTML. But all these methods have their own pros and cons. You’re probably thinking why three methods? Don’t worry, we’ll tell you that in each step.

The methods to insert js to HTML are the following:

Now, let’s see how to use these methods in detail.

Method #1: How to Add JavaScript to HTML Header

To add JavaScript in HTML header we use <script> tags. Just add <script> tags between <head> tags of HTML. But at the bottom right before the closing </head> tag. And all the JavaScript code will come inside these script tags. Just see the line no. 8 to 11 in the code example below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Tutorials</title>
    <script>
        var greetings = "Hi, What's up!";
        window.alert(greetings)
    </script>
</head>
<body>
       <h2> Add JavaScript to HTML Example</h2>
  
</body>
</html>

In the above code, I used a pair of script tags and wrote two lines of code. If you copy-paste the code in your HTML document. And after saving the file open it in your browser. You will see the pop-up alert as shown below. It means our JavaScript code is working.

As you saw this was the first method for adding JavaScript to HTML and this was easy. But why use this, instead of other methods.

Why Use this Method?

The pros and cons for using this method are the following:

  • The first reason that makes it useful is that you don’t have to create a lot of js files. You can simply write your whole js code in HTML.
  • It’s good if you’re learning JavaScript.
  • The downside of using this method is that it slows your HTML webpage. It also increases the size of your HTML document. That’s why, I do not recommend it.
  • In some cases, it is useful and in some cases it is not.

Now, let’s see the second method.

Method #2: How to Add JavaScript to HTML Body

To add JavaScript in the HTML body, we use the same <script> tags. But not inside the HTML header, we use it inside the <body> tags right before the closing </body>.

As you can see in the code example below, we placed JavaScript code in the body of HTML. Just look at lines no. 13 to 16 in the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Tutorials</title>
</head>
<body>
    <h2> Add JavaScript to HTML Example</h2>


    <script>
        var greetings = "Hi, What's up!";
        window.alert(greetings)
    </script>
</body>
</html>

In the code example above, I used the same <script> tags with the same two lines of code as above. I placed it right before closing </body> tags. The code output is the same and JavaScript is working as you can see below.

how to add JavaScript to HTML body

Why Use this Method?

Benefits for using JavaScript in the body of HTML are the following:

  • It speeds up HTML page a little bit.
  • It loads after the DOM.

Tip: You can use scripts in the header and body of HTML both at the same time.

Now, let’s see the third method.

Method #3: How to Add External JavaScript to HTML

To include external JavaScript in HTML, we first create a js file and then link it to HTML. This is the best and recommended method to use JavaScript for HTML webpages. Because by using this method you can avoid slow loading of web pages.

Let’s see how to do this.

First, create a JavaScript file in your text editor. This will look like this as below in your text editor with filename and (.js) extension. All JavaScript files have (.js) extension.

JavaScript filename with Extension

After creating a JavaScript file, go to HTML and add <script> tags at the bottom of <head> tags with the src attribute. And inside the src (source) attribute use your JavaScript file name with its extension. As shown in the code below. Just see line no. 8 in the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Tutorials</title>
  	<script src="test.js"> </script>
</head>
<body>
    <h2> Add JavaScript to HTML Example</h2>


</body>
</html>

Note: When we link external JavaScript files to HTML, then <script> tags always remain empty because we write code in the separate JavaScript files. But it is crucial to specify the src attribute and provide the source otherwise JavaScript will not work.

Remember, we don’t use <script> tags in external JavaScript file.

Below is the external JavaScript file (test.js). I used the same code again. You can copy-paste the code and then see is it working or not.

var greetings = "Hi, What's up!";
window.alert(greetings)

The result will be the same. And the code is working.

JavaScript External file to HTML

The best thing about this is that you can use several scripts in one HTML document. To do this, just add scripts inside the head section of HTML one by one as shown below.

<script src="test.js"> </script>
<script src="scripts.js"> </script>
<script src="functions.js"> </script>

Sometimes, third-party tools like font-awesome, bootstrap, google analytics, etc. want their scripts to add to your HTML document. Those are also external javascript files hosted somewhere else. Then, this method also helps in that way. You can just copy-paste the script for that.

Why Use this Method?

The benefits of using external JavaScript files are the following:

  • You can use several JavaScript files in one webpage.
  • By using external js file, HTML and JavaScript code remains separate. Due to this, it reduces the HTML file size and speed up your site.
  • The code will be easier to read and manage.
  • You can cache js files to further speed up your HTML site.

That’s it. This is the end of this tutorial. Hope you understood well. If you have any questions related to this topic then feel free to ask in the comment section below.

In our next JavaScript tutorial, you will learn to create JavaScript Hello World Program.

Lastly, if you’re new to JavaScript then you should start from what is JavaScript.