How to use the HTML <script> Element

September 1st, 2020

HTML

Learn how to use the HTML <script> element.

The HTML <script> element is used to add JavaScript code to your document.

With <script> you can add JavaScript in two different ways:

You can embed JavaScript code inline, directly inside your document.
Or import/load an external JavaScript file (.js).

So it’s a matter of loading JavaScript internally vs. externally.

Let’s take a look at both options.

Inline JavaScript

To embed your JavaScript code inline, you define opening and closing script tags, and put JS code inside:

<script>
  // Add your JavaScript code here
</script>

The <script> element can then either be put inside your document’s <head> element:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // Add your JavaScript code here
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Or outside the <head> element, just before the closing </body> element tag:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // Add your JavaScript code here
    </script>
  </body>
</html>

So what’s the difference between putting a JavaScript in the <head> vs. <body>?

The difference is performance. And it can be a big difference.

By default, HTML documents and their elements are parsed (read) and rendered from top to bottom. When you load and run JavaScript code in the <head>, the rendering of the rest of your page elements (your visible content) is blocked until the script is parsed and done running its code.

Executing a JavaScript file could take a few milliseconds (ms), or several seconds, depending on the size and the type of code you’re executing. So it can delay the time before your page becomes interactive (useable) to the user.

By putting your JavaScript code at the bottom (right before </body>), the JavaScript code won’t load and execute until after all your page content is rendered and is visible to the user. This avoids blocking page content and therefore the user can interact with the web page sooner.

Okay, now you know how to embed inline JavaScript code and how to do it in the most performant way.

Now let’s look at importing external JavaScript code, and how it differs from internal (inline) JavaScript.

Import external JavaScript file

To load external JavaScript code, you have to import it via a file with the .js extension. E.g. main.js.

It works like this:

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

And just like with inline JavaScript, you can either put it inside your <head> element:

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Or right before the closing body element tag </body>:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

The defer attribute

With modern Javascript, there’s an even more performant way of doing running your external scripts than loading it at the bottom of your page.

We can use the defer attribute on <script> elements:

<script defer src="main.js"></script>

And then put it inside your <head> element:

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

With this defer approach, your JavaScript code is loaded (not executed) while your HTML code is parsing, but it doesn’t execute until after the HTML is done parsing.

If your external script is put at the bottom (right before </body>), this happens:

First, the HTML code parses
Then the HTML renders
Then the JavaScript code is loaded
Then the JavaScript code is executed

With defer we’re loading the JavaScript code while the HTML is parsing (in parallel), so as soon as your HTML is done, the JavaScript code is already loaded and ready to execute.

Why is this better? It isn’t necessarily always better. But many websites rely on JavaScript to work immediately, as soon as the page becomes interactive (useable to the user) — and this approach can make your site ready for interaction much faster.

It’s okay if you don’t fully understand this defer concept right now, you will once you have some practical experience with it.

The most important thing to know that it’s generally the most performant way of running JavaScript code on your website.

Good to know:

You can only use the defer attribute on external JavaScript files — not on inline JavaScript code.
When importing external scripts, you need to specify the relative source path, so if your JavaScript main.js file is in a folder called js, inside your root project directory, you import it like this src="/js/main.js"
You’ll sometimes see <script> elements that has a language identifier, by using the type attribute <script type="text/javascript"> In HTML5 (the latest version) you no longer have to do this, since it’s already set by default.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Share & Discuss on

Twitter

Hacker News