Home » Learn Code » JavaScript » How to add JavaScript to HTML? 3 Simple Ways (Explained)

How to add JavaScript to HTML? 3 Simple Ways (Explained)

how to add JavaScript in HTML

In this tutorial, you’ll learn how to add JavaScript to HTML file. Adding JavaScript to HTML is not complicated. There are 3 ways to do this. And I will also tell you which way is best.

JavaScript is one of the three languages that web developers must learn. Because with JavaScript you can make your web pages much better. For example, you can add pop up sign up forms, slideshows, mega dropdown menus, drag and drop features and much more with JavaScript. So, the first question that arises in every beginner’s mind is that how to include JavaScript in an HTML file.

So, without wasting time let’s see how to do this:

Add JavaScript to HTML:

There are 3 ways to add JavaScript to HTML:

  • Between <head> tags of HTML file
  • Between <body> tags
  • External JavaScript file

Let’s see how to do this:

1. JavaScript between <head> tags

The first step to add JavaScript is very simple. Just add <script> </script> tags between <head> section of your HTML. And all your JavaScript code or statements will go between these <script> tags. See the highlighted code lines in the example below:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title> my webpage </title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- This is JavaScript Below --!>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById('demo').innerHTML = z;
</script>
</head>
<body>
	<p id="demo"> This is my first webpage </p>
</body>
</html>

Don’t worry if you don’t know about the code you will learn complete JavaScript in our later tutorials.

2. JavaScript between <body> tags

If you want to add JavaScript code between the <body> tags. Then, you will add this at the end of the <body> tags right before closing the <body> tag. See in this code below:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title> my webpage </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<p id="demo"> This is my first webpage </p>

<!-- This is JavaScript below --!>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById('demo').innerHTML = z;
</script>
</body>
</html>

3. External JavaScript File

In this method, we’ll use an external JavaScript file and connect it to HTML. This is the best and recommended method to use JavaScript for HTML pages. Because by using this method you can avoid slow loading of web pages. Also, this will make your HTML and JavaScript code clear and more readable due to separate files. Let’s see how to do this:

  • First step: You will have to create a JavaScript file in your text editor with filename and .js extension.
  • Second step: To use this external JavaScript file you will need to link this to HTML. To do this: In between your HTML <head> tags just include this <script src=”filename.js”> </script>.

See the highlighted code line no. 6 in the code example below:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title> my webpage </title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="filename.js"> </script>
</head>
<body>

<p id="demo"> This is my first webpage </p>

</body>
</html>

Below is the external JavaScript Code file:

<!-- JavaScript Code --!>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById('demo').innerHTML = z;

Remember: To run JavaScript, it is necessary to link .js file to HTML first. And <script> tags will remain empty.

Hope you understood well. If you have any questions related to this then feel free to ask in the comment section below.

Related Topic: What is JavaScript? Why is it important to learn?

Leave a Reply

Your email address will not be published. Required fields are marked *