As a beginner, it is a bit confusing to understand web technologies. The problem is that most of us don’t know where to start when it comes to coding and programming. Or how to put things together to make things happen.

The same is not true for any web expert or front-end developer who has years of expertise.

In this guide, you will learn how to link JavaScript to Html. We will make you connect JavaScript to Html in an easy and simplified way. In order to do so, you must know-

  • Where to link JavaScript in an Html page?
  • How to link javascript to Html?

Where to link JavaScript in an Html Page?

Technically you can link JavaScript mainly in three different positions. If you closely look at the Html Page markup/template you will find a head tag, a body tag and a footer tag.

Thus, just before any of these closing tags, you can link your JavaScript.

<head>
....
....
<!-- just before the closing head tag--->
</head>

<body>
....
....
<!-- or just before the closing body tag (Recommended)--->
</body>

<footer>
....
....
<!--or just before the closing footer tag--->
</footer>

The best practice is to add/link JavaScript just before the closing </body> tag.

This is because it provides a good user experience at the time of page load. If you do so, the script only gets loaded after the text, CSS and other important page elements have been loaded.

If you don’t care much about optimisation then you can put the JavaScript at any of the three locations.

You may not see the delay effect If you are just linking a single JavaScript before the </head> section.

But, If a page has too many JS scripts in the head section. Then there will be a significant response delay and rendering of the page. This leads to the slowing down of web pages causing a bad user experience. As a result, high bounce rate.

Now you know where to link the JavaScript in Html. Let’s see how we can link one.

How to link JavaScript to HTML?

You can link JavaScript to HTML using the <script> tag. There are 3 scenarios you may face when adding JS to HTML. You may have a-

  • Inline JavaScript
  • Local JavaScript
  • External JavaScript

Inline JavaScript code

Simply add a pair of  HTML <script> </script> tag and in between the tags write or add your JavaScript code.

<script>
// any js code
</script>

Local JavaScript

If you are having a JS file in your local project folder then you can use the src attribute to the link. In order to link it, you must specify the local path of the Js file.

For example, link a jQuery library to your HTML project.

<script src="./project/script/jquery.js"/>

External JavaScript

Linking an external JavaScript file is the same as that of linking a local JS file, The only difference is that the file is on a remote server. Therefore, you need to put the URL of the JS file.

Note: The delivery of the JS file is over a network.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" />

Note: We didn’t use the closing tag script instead just used /> at the end. However, it is completely valid to use the last closing tag instead of just using /> at the end.

Also, You may be interested to learn how to hide and show div using JavaScript in an html.

Like this article? Follow us on Facebook and LinkedIn. You can also subscribe to our weekly Feed