Add JavaScript to HTML

How to Add JavaScript to HTML

JavaScript can be added to HTML by 2 major methods, which are:

• Embedding JavaScript:
  • Head Section
  • Body Section
• External JavaScript

JavaScript can be added to HTML by embedding JavaScript to the head or body section of the HTML file inside a script tag. Both methods use the script tag so that when the HTML code is executed, the code in the script tag is interpreted as JavaScript code.

The second method listed above is the external method which requires you to create a new file with a .js extension. Then this new JavaScript file is linked to the HTML file in either the head or body section. A detailed explanation of these methods is covered in the sections below.

JavaScript in Head Section

This is a method of embedding JavaScript to HTML, but in this case, JavaScript is added to the head section of the HTML file.

The Head section typically consists of the title tag, meta tags, and other external links like linking external CSS or JavaScript file. 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 a JavaScript code when DOM is being rendered.

Example

The below example shows a simple HTML code. Our goal is to write text with JavaScript into it.

We want to use JavaScript to add text to the empty HTML body above using the document.write JavaScript method.

The document.write method allows us to write directly on the DOM(Document Object Model), which is the browser's view.

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.

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

JavaScript in Body Section

This is the second method of embedding JavaScript into HTML. In this case JavaScript is added to the body section of the HTML file. The Body section is where the webpage's main content is scripted, and this is what the browser's view, known as the DOM (Document Object Model), renders.

Example

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

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

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

It is essential to consider site performance while choosing the method of embedding JavaScript to HTML because of the synchronous nature of JavaScript. When the browser encounters a script while rendering, it pauses rendering the rest of the page until it parses the previous script.

So, it is preferred in most cases to always put the script tag in the body section to improve the performance of your website.

External JavaScript

• This is the second method of adding javascript to HTML.
• In this method, you will need to create a new JavaScript file with the .js extension and add the JavaScript code to it.
• The script tag, in this case, will not have any code in it. 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 JavaScript can be added to HTML externally from a JavaScript file. An HTML file(.HTML) and a JavaScript file(.js).

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, next, we will add the JavaScript code into a new JavaScript file.

You don't need to put the JavaScript code in a script tag while using this method, as we did while embedding JavaScript to HTML.

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

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

An example of the use-case of noscript can be seen below.

The result of the HTML code above can be found below when Javascript is enabled in the user's browser.