How To Add JavaScript to HTML?

Functional websites are not only built with HTML and CSS but also a scripting language called JavaScript. JavaScript makes it possible to build interactive websites because it is a client-side language that runs on the browser. You can build excellent user-friendly websites with HTML and styled with CSS. It's essential for a developer to know how to add JS in HTML.

In this article, we will learn how to add JS in HTML and it's different methods.

Add JavaScript Code inside the Head Section

The Head section typically consists of the title tag, meta tags, and other external links like linking external CSS or JavaScript files. It can also contain JavaScript codes.

The JavaScript code is written in a script tag in the head section so that it can read as JavaScript code when DOM is being rendered.

Example:

The text we added to the script tag using document.write in the head section will be rendered in the browser once the browser loads.

Output:

The result of the HTML code above can be found below.

Add JavaScript Code inside Body Section

We will use the same example as we used when embedding JavaScript in the head section.

Example:

The same principle applies to this, but the script tag with the JavaScript code will be written in the body section.

Output

External JavaScript

• In this example, you will basically learn how to add JS to HTML.
• We need to create a new JavaScript file with the .js extension and add the JavaScript code to it.
• In this case, the script tag will not have any code.
• It will be used to link the external JavaScript file created to the HTML file, and this script tag can be placed in either the head or body section of the HTML file.

Example

We will use the same example we have been using in this article, but in this case, we are using two files because this method shows how we can add JavaScript to HTML from a JavaScript file.

Let's create a .html file and add the HTML code below. The HTML code contains a linked JavaScript file with the script tag.

After linking the JavaScript file, we will add the JavaScript code into a new JavaScript file.

The code below should be pasted into the new JavaScript file index.js which we have created and linked to the HTML file.

Output

Advantages of External JavaScript

1. The browser can cache External JavaScript files, reducing page load times for subsequent visits.
2. Separating JavaScript code into external files can reduce the size of HTML files, leading to faster download times for users.
3. Keeping JavaScript code in separate files improves code organization and readability, especially for large projects.

External JavaScript References

• By using a full URL

  src="https://example.com/js/script.js"
  

• By using a file path

  src="/js/script.js"
  

• Without using any path

  src="script.js"