How to Link JavaScript to HTML?

Html and CSS help to make a static web page, but to make it interactive we have to use javascript. By using javascript we can manipulate the HTML DOM elements, alter the CSS and also add the script logic to make our web page interactive and user-friendly.

link-javascript-to-html

In this article, we will learn all the different ways to link javascript to HTML by taking some examples.

How to Link JavaScript to HTML?

To link javascript to HTML we have to use the Html <script></script> tag. There are two ways to link javascript to Html:

Embedding the javascript code inside the Html document, which is called inline javascript.

Syntax-

Linking external javascript files using src attribute of the <script> tag, this way of linking javascript is called external javascript.

Syntax-

HTML Script Tag

The HTML script tag is used to link the client-side javascript to HTML. It helps to embed the inline javascript in HTML or link the external javascript files using src attribute.

An example of using script tag in Html-

Embed (inline) JavaScript Example

To embed javascript in Html we have to wrap our javascript code in between the opening(<script>)and closing (</script>) tag, and place it either inside the <head> or bottom of </body> tag (just before the closing </body> tag). Embedding javascript into the HTML is called inline javascript.

Example-

Output-

Above, we embedded the javascript code into our Html document bottom of the </body> tag (just before the closing </body> tag). As result, it shows an alert Hello there! on clicking the Alert button. Use this Compiler to compile this code.

Where to Place the Script Tag (embedded javascript)

Javascript code is embedded or referenced inside the HTML head or in the body tag as per requirement, let's talk about it in detail:

Head Section
Body Section

Head section- To load the javascript before loading the Html document itself, we reference the javascript code inside the <head> of the Html document.

Example-

Above, we embed the script in Html document by placing the <script></script> tag inside the <head> tag. As result, javascript code gets loaded before loading the HTML.

Body section- To load the javascript after loading the Html document, we embed or reference the javascript code in the </body> tag just before the closing.

Example-

Above, we embed the script in Html by placing the <script></script> tag inside the <body> tag (just before the closing). As result, javascript code will be loaded after loading the HTML.

Loading the HTML first makes the page loading time faster because browsers only have to load the plain HTML document. But when we load the javascript first, the loading of HTML gets blocked until all javascript code gets executed, as result, page load time gets increased.

Link External JavaScript files

To link external javascript, we have to write the scripting logic inside a separate file(.js file extension) and then reference the file name by writing its name inside src attribute of the <script> tag.

For example- suppose we have an external javascript file script.js having the javascript code, to link this file into our Html we have to reference the script.js file inside src attribute of the <script> tag as given code below-

Note: If referencing file is in the folder then writing only the file name will work, otherwise we have to mention the file location also.

Above, if you will look closely, we are referencing the script.js file name inside the src attribute of <script> tag. As result, script.js file gets linked to our Html.

The type Attribute

The type attribute is an attribute of <script> tag, it defines the type of script used for scripting.

Syntax-

In CSS we use attribute selectors to target specific HTML elements, here is an example-

Above, we have an HTML document having a <a><a/> tag, there are two attributes- the first one is href and the other is target.

In HTML, javascript is the default scripting language, and because of this reason type attribute is not required to use in <script> tag.

It's important to remember that, we have different ways to add the JavaScript code into the HTML learn more...

Conclusion

To link javascript to Html we can use inline scripting or an external file.
An opening and closing <script></script> tag is used to link the javascript to HTML.
Inline javascript linking is script logic embedded inside the HTML document using <script> tag.
External javascript is a separate file( file extension .js) referenced by writing the file name inside src attribute of <script> tag.