How to add JavaScript to HTML? All the ways to link JS with HTML

If you are a beginner on a web development journey or learning JavaScript for the first time and wondering how to add JavaScript to HTML then you have landed at the right place. In this article, we’ll be discussing all the ways to link JS with HTML.

What is JavaScript?

JavaScript is a client-side scripting language that adds interactivity to our websites/web apps. JavaScript allows us to create and update the contents of our web apps dynamically. It is one of the most used programming languages with HTML and CSS. Today HTML, CSS, and JavaScript are considered the three base pillars of all modern websites.

JavaScript was initially created by Brendan Eich to add life to web pages. Yes, you read it right! You can do almost anything and everything crazy with JavaScript. You can make servers, web apps, mobile apps, etc using JavaScript. But what makes JavaScript different from other programming languages is that it can be used both on the client-side as well as server-side and is supported by all major browsers.

Now that you know how powerful JavaScript is you might be wondering how to add JavaScript to HTML. Don’t worry! We have got you covered. This article explains all the ways to link JavaScript with HTML in detail.

Now let’s go ahead and understand each of them one by one practically.

Linking JavaScript with HTML

There are following three main ways to add JavaScript to your web pages:

Embedding code: Adding the JavaScript code between a pair of <script>...</script> tag
Inline code: Placing JavaScript code directly inside HTML tags using some special attributes.
External file: Making a separate JavaScript file having .js as an extension.

Now, let us see all these examples in detail one by one.

Embedding code

You can directly embed your JavaScript code in your HTML pages by directly wrapping it inside a pair of <script> and </script> tag. The <script> tag is used to enclose client-side scripting languages A single HTML document can have multiple pairs of <script>....</script> tags with each pair having an infinite number of JavaScript statements. All these script tags are executed in the sequential order in which they are written.

Like other HTML tags, <script> tag also has various attributes. Some of the most commonly used attributes of the <script> tag are as follows:

src

This attribute is used to specify the location of the external script file used. The value of the attribute should always be wrapped inside double (“..”) or single (‘..’) quotes

<script src = "./app.js">
  Your JavaScript code....... 
</script> 
Code language: JavaScript (javascript)

defer

This attribute is used to improve the performance and loading time of the websites by delaying the execution of code inside the <script>...</script> tag till the time the content is displayed on the browser. In simple words, it allows downloading the script file in parallel to the parsing of the page but starts the execution only once the parsing of the page is completely finished.
Note: defer attribute should only be used when the src attribute is present (i.e. only with external JavaScript files).

<script src="./app.js" defer></script>
Code language: JavaScript (javascript)

async

This attribute allows downloading the script file in parallel to the parsing of the page and starts its execution of the script as soon as the download is completed. Once the download of the script file is completed it interrupts the parsing of the rest of the page till the execution of the script file is completed.
Note: async attribute should only be used when the src attribute is present (i.e. only with external JavaScript files).

<script src="./app.js" async></script>
Code language: JavaScript (javascript)

Important Note: If async or defer attributes are not present then the parsing of the page is blocked and the script is downloaded and executed immediately as soon as the compiler encounters a <script> tag.

type

This attribute is used to specify the type of script and to identify the content of the tag. Some commonly used values by this attribute are:

text/javascript (default value)
text/ecmascript
application/ecmascript
application/javascript

If this attribute is not mentioned then by default the script is treated as JavaScript.

<script type="text/javascript">
  Your JavaScript code....
</script> 
Code language: JavaScript (javascript)

Now that we have seen how to write JavaScript code in our HTML file so now let us see where can we write this <script>....</script> tag.

There are generally two places where this script tag can be placed in our HTML file. The first is within the <head>...</head> section and the other is within the <body>...</body> section (usually just before closing the body tag). Let us see a code example to understand better.

The script in the head section:

<!DOCTYPE html>
<html>
<head>
  <title>Codedamn</title>
  <script>
    alert(“Hey there! Greetings from Codedamn“);
  </script>
</head>
<body>
  <p>Demonstrating the use of SCRIPT tag within the HEAD section.</p>
</body>
</html>
Code language: HTML, XML (xml)

The script in the body section:

<!DOCTYPE html>
<html>
<head>
  <title>Codedamn</title>
</head>
<body>
  <p>Demonstrating the use of SCRIPT tag within the BODY tag.</p>
  <script>
    alert(“Hey there! Greetings from Codedamn“);
  </script>
</body>
</html>
Code language: HTML, XML (xml)

Although both the above-mentioned method works it is still preferred to use the <script> tag just before the closing of the body tag. The reason behind this will be explored in the later section of this article.

Inline code

Inline code as the word suggests means writing the code in the line itself. In simple language, placing JavaScript code directly inside the HTML tags by using some special attributes like onload, onclick, etc is called inline JavaScript code.

Inline JavaScript code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Codedamn</title>        
</head>
<body>    
    <p>Demonstrating the use of INLINE JavaScript code</p>
    <button onclick="alert('Hey there! Greetings from Codedamn')">Welcome Message</button>
</body>
</html>
Code language: HTML, XML (xml)

The code above simply shows an alert with a message at the click of a button.

External file

As a beginner are you feeling quite overwhelmed seeing the above two methods? Don’t worry, now here comes the easiest and the most used method by all web developers i.e. creating a separate JavaScript file and calling it in your HTML file by using the src attribute of the script tag. The JavaScript file must be saved by the .js extension.

This method allows us to use the same script file in multiple HTML documents by simply linking it using a single line thus making our code cleaner and easily maintainable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Codedamn</title>        
</head>
<body>    
    <p>Demonstrating the use of EXTERNAL JavaScript file</p>
    <script src="./app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

This script tag can also be included within the <head>....</head> section.

// app.js file
alert(“Hey there! Greetings from Codedamn“);
Code language: HTML, XML (xml)

Where to write

The script tag either be placed within the head tag or the body tag. But it is recommended to place the script tag just before the closing of the body tag so that first the HTML is loaded and all the content is displayed on the web browser then the JavaScript code starts executing thus reducing the loading time by not waiting for all the JavaScript files to be loaded first and for also avoiding some unexpected behavior of the website.
This happens because the script tag blocks the page parsing until the code inside the script tag is completed downloaded and executed. So thus, placing the script tag within the head tag can unnecessarily increase the loading time of the web page and thus reduce the performance of the website.

Conclusion

Now that we have seen all three methods to link JavaScript in your HTML file, it’s totally up to you which method you prefer to use. The most recommended method is by creating an external JavaScript file thus keeping our HTML code cleaner and making our HTML code more reusable.