Including JavaScript in an HTML Page

The <script> element can be used to:

Include external JavaScript files in our HTML page.
Specify inline JavaScript code in our HTML page.

Including JavaScript files

In this section, we will learn how to include one or more locally or remotely hosted JavaScript files.

Including a single file

To include the external JavaScript file into our HTML document, we use the <script> element with a src="path_to_js_file.js" attribute. The basic syntax is:

<script src="myscript.js"></script>

This code uses the <script> element to include the external, locally hosted myscript.js file to our HTML document. The <script> element has an opening <script> tag, a src attribute whose value is the path to our JavaScript file, and a closing </script> tag.

Including multiple files

To include multiple JavaScript files, we can use multiple <script> elements:

<script src="myscript.js"></script>
<script src="my-other-script.js"></script>

Including a file from a subfolder

If the JavaScript file was placed in some js/ subfolder, we would write:

<script src="js/myscript.js"></script>

Note: It is a good idea to create a dedicated js/ (or scripts/) folder and place all your locally hosted JavaScript files in that folder.

On a production server, you might want to use the path that includes the root folder path, represented by a / symbol. So, the code snippet on a live server should be:

<script src="/js/myscript.js"></script>

Including a remotely hosted JavaScript file

To include the remotely hosted JavaScript file, we write:

<script src="https://www.example.com/myscript.js"></script>

The above code includes the JavaScript file from an external website. These websites are also called Content Delivery Networks or CDNs.

The full HTML page listing

Traditionally, the script element is usually placed in the <head> section, so our index.html file has the following source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <script src="myscript.js"></script>
</head>
<body>
    
</body>
</html>

The loading of JavaScript files blocks the parsing of a page until the script loading has completed. As a workaround, we can place the <script> element at the end of our document, before the closing </body> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>

    <script src="myscript.js"></script>
</body>
</html>

This way, the entire content of our HTML page is parsed first, and only then does the JavaScript file get imported.

Note: If you are not concerned about the potential performance issues caused by blocking, then you should keep your <script> elements inside the <head> section. Otherwise, prefer importing JavaScript files just before the closing </body> tag.

Specifying inline JavaScript

The <script> element can also be used to specify the inline JavaScript code:

<script>
    alert("Hello World!");
    // other JavaScript statements
</script>

The JavaScript code itself is placed between the opening <script> and closing </script> tags.

The full index.html file now looks like the following:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Page Title</title>
   <script>
       alert("Hello World!");
       // Other JavaScript statements
   </script>
</head>
<body>
   
</body>
</html>

In production, we often see a mix of included external JavaScript files and inline code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Page Title</title>
   <script src="myscript.js"></script>
   <script>
       alert("Hello World!");
       // Other JavaScript statements
   </script>
</head>
<body>
   
</body>
</html>

Summary

In summary, we use the <script> element to import and execute the external JavaScript file, or to specify and execute the inline JavaScript code.

The JavaScript code is usually imported inside the <head> section or at the end of the <body> section to avoid blocking loading of other documents.