BLOG | categories | javascript

How to link JavaScript to HTML

By Steve Founder of PageDart

When creating web pages there comes a time when you need to do a bit more than display content. You need to load JavaScript.

One of the first JavaScript files added is Google Analytics to track page loads and visitors.

But how do you link JavaScript to HTML?

In this tutorial, we are going to cover how to link JavaScript to HTML. We will look at:

Adding JavaScript to a page
Adding a JavaScript file to a page
Adding JavaScript from a CDN

Let's get started.

Adding JavaScript to a page

When you add JavaScript to a page you use a <script> tag. Sounds simple enough. Let's look at an example.

We will start simple. Say that as soon as the web page loads we want to say “hello”. To do this we can use the alert() JavaScript function.

We will need a very basic HTML page and then load the script like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <script>
      alert("hello")
    </script>
  </body>
</html>

The above is all you would need to say hello when the page loads. The browser reads the page and processes the HTML line by line. When it reads the script tag it knows that this is JavaScript and it will run the code.

When it reads the line alert("hello") it can see we want to display the word “hello” in an alert:

This is a simple example but it shows how you can write JavaScript within an HTML page. This is “inline” JavaScript.

The script tag has some attributes that we can use. These are:

async
charset
defer
src
type

For example, we could specify that the script is JavaScript by adding a type like this:

<script type="text/javascript">
  alert("hello")
</script>

It used to be common to use more than one type of script but JavaScript won that battle. So now browsers default the type to Javascript. So the above code is the same as:

<script>
  alert("hello")
</script>

So there is no reason to use the type attribute anymore.

What about the other attributes, what do they do?

The other attributes only work when loading an external JavaScript file. Let's look at this next.

Adding a JavaScript file to a page

To load an external JavaScript file we need to use the src attribute. src stands for source and it is the path to the script that you want to load. This attribute loads an external JavaScript file.

For example, say that we have a JavaScript file called main.js in the assets folder on your web server. The contents of this file are the same as before:

alert("hello")

When the file loads it will alert with the word “hello”.

You would load the external file with this HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <script src="/assets/main.js"></script>
  </body>
</html>

Remember, we don't need to include the type because the file is JavaScript. All we need is the src attribute which is the path to the file.

The HTML will load the script when it loads the page as it did before. When the browser reads that line it will fetch the JavaScript file and run it.

Now that we have an external script we can look at some of the other script attributes. Let's start with async and defer.

When the browser finds a script tag in the HTML the page loading stops while the browser fetches the script. Once the file is ready the browser runs the code. Once the code has finished running the page will resume loading.

async and defer will improve web performance by allowing the page to continue to load. But they do it in different ways.

Let's look at async first.

The async attribute tells the browser to download the file in the background. This allows the page to continue loading. As soon as the file has downloaded the browser will run the code.

This is how you would add the async attribute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <script src="/assets/main.js" async></script>
  </body>
</html>

How does defer differ? This attribute tells the browser to download the file in the background like async. Yet, it will only run the code once the browser has finished processing loading the page.

This means that defer will not block the page at all. Whereas, async will only block the page when it runs the code. Both attributes mean that they will not block the page when the script is downloading.

Here is how you would use defer:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <script src="/assets/main.js" defer></script>
  </body>
</html>

So which one do you choose and when?

The general rule is that you should use defer because it will never stop the page from loading. Also, if you have more than one script on the page defer will run them in order. With async the code runs as soon as they download and you cannot guarantee order.

There is one more attribute that we have not talked about. It is the charset attribute.

This attribute allows you to specify the encoding of the characters. Which can either be “UTF-8” or “ISO-8859-1”. In 20 years of creating web sites, I have never used this attribute. It is safe to say you can leave the default which is “ISO-8859-1”.

Where should you put your script tags? The general rule is to add them before the </body> tag. This is at the end of the page and means that most of the page has loaded.

This is what the HTML should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <h1>Hello!</h1>
    <p>Just saying hi!</p>
    <script src="/assets/main.js" defer></script>
  </body>
</html>

The only time you might break this rule is if you have a large JavaScript file. This will take longer to download so you can move this to the <head> section of the page, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <script src="/assets/main.js" defer></script>
  </head>  
  <body>
    <h1>Hello!</h1>
    <p>Just saying hi!</p>
  </body>
</html>

With the defer attribute you know the page will not block and the script will download in the background.

We have loaded scripts from the local webserver but what if the file is on another server. One example of this is when you need to load a framework like JQuery.

Let's look at this next.

Adding JavaScript using a CDN

The last thing that I want to teach you about is loading JavaScript from a CDN. You can load libraries such as JQuery from fast and free CDN's. This will make your website faster.

Here are a few free options:

CDNJS is an open source project to provide JavaScript files
Google Libraries A much smaller selection but with all the power of Google
Microsoft Ajax Content Delivery Network Like Google this is also only a small selection of files but uses Microsoft servers
jsdelivr Also an open source project this one can take the files from NPM

Each of these CDNs will allow you to load the latest JQuery. Here is the URL from each of these CDNs:

This is the same file from each of the providers. You only need to pick one. Remember, always use the minified version as it will download faster.

As an example this is what it would look like if we loaded JQuery from the Google CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
  </head>  
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" defer></script>
  </body>
</html>

Key takeaway: If you are loading a common library or framework then use one of these CDN's to do it.

Wrapping Up, How to link JavaScript to HTML

We have looked at how to link JavaScript to HTML. We have discussed three ways to do it:

Adding the JavaScript code to the page inside a script tag
Adding the JavaScript from your web server as an external script
Adding the JavaScript from a CDN

If you are loading a JavaScript framework such as JQuery use the CDN option as it will load the fastest.

We have also looked at the script tag and some of the attributes that you can use:

async - Load the script in the background and run it once it is ready
defer - Load the script in the background and run it once the HTML is ready
charset - change the encoding of the script (but leave the default)
src - Point the source to the external JavaScript file either locally or from a CDN
type - Default is JavaScript so leave the default

We have also mentioned two performance improvements to be aware of:

Make sure to load the script with the defer attribute
Make sure that the JavaScript you load is minified

Adding JavaScript to a page

Adding a JavaScript file to a page

Adding JavaScript using a CDN

Wrapping Up, How to link JavaScript to HTML

Recent Posts