JavaScript-HTML Link

Internal JavaScript

HTML Document allows JavaScript programs to be inserted in a <script> tag. The tag is placed just before the closing tag <body/>. This allows the HTML parser to load all HTML content first before loading the JavaScript program.

The tag  <script>  can also be placed just before the closing <head/>, but it is a bad practice because the <script> tag slows down the display of HTML contents.

index.html

Edit on Stackblitz

External JavaScript

The src attribute in the <script> tag links an HTML document to an external JavaScript file.

JavaScript programs can also be placed in an external file. When the same JavaScript code is needed on different web pages, external scripts are the best option.

index.html

JavaScript programs can be written in an external or separate file.

script.js

Alternatively, the tag <script> can be placed just before the closing </head> tag but including the attribute defer  in it.

script.js

The attribute defer makes sure the HTML Parser loads the HTML contents first before loading the script tag. It is the same as having the tag before the closing tag.

Edit on Stackblitz

Happy coding!!!