Embedding JavaScript in HTML: easy instructions and examples

JavaScript adds a breath of fresh air to a static HTML file. You can embed JavaScript directly or as an external file in HTML. We’ll show you what the advantages and disadvantages are to inserting JavaScript into HTML.

Why should you embed JavaScript in HTML?

HTML, CSS, and JavaScript are the three basic pillars of the modern world wide web. If you want to create a modern, interactive website, you can hardly avoid enlivening HTML text files by incorporating CSS and JavaScript. HTML files are plain text documents for creating and structuring website content. HTML is easy to learn, and you can get by without formatting. It’s also user-friendly thanks to free code editors such as Notepad++ or Kate. On the other hand, creativity is provided by CSS text files embedded in HTML embedded CSS text files, which define the layout, colour scheme, typographies, and other design elements of a website.

A website only becomes truly interactive with JavaScript elements, which add dynamic behaviour to the content. JavaScript files embedded in HTML, for example, enable the active modification of website content such as automatic date display, day-dependent colouring, or automatically displayed messages when the website is visited. With enabled JavaScript, JavaScript content can be executed directly in most browsers. This saves processing power and improves the loading speed of interactive content and animations on a website.

What options are there for embedding JavaScript?

You can note or reference JavaScript elements in HTML source code as script elements as follows. 

<script> </codesnippet></script>
JavaScript-Element

Script elements are usually embedded in the body or head area of an HTML document.

Depending on how you include JavaScript in HTML, you can choose from the following options:

  • Note JavaScript directly in an HTML page: Direct notation in HTML is done in the head element and ensures that JavaScript files load as quickly as possible via direct notation. The downside is that direct notations must be made for each HTML document on a website to load content.
  • Referencing JavaScript as an external file in HTML: Embedding an external JavaScript file references the JavaScript file in the HTML text. Embedding as a reference allows externally noted JavaScript files to be loaded on multiple pages without having to note them directly as verbose JavaScript elements in HTML files.
Tip

Including JavaScript elements is especially easy with special JavaScript frameworks. JS frameworks group together predefined JavaScript objects and statements and make programming easier.

How to embed JavaScript in HTML: practical examples

You can choose between two different methods to include JavaScript. We’ll introduce you to both.

Embedding JavaScript in HTML directly

To load JavaScript elements as quickly as possible, place the script element in the HTML head or body. In new browsers, a relatively simple JS source code is sufficient. In the following example, the message ‘Hello friend’ is written on a website via JavaScript integration:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript: Hello Friend</title>
    <script>
        alert(“Hwllo Friend!“);
    </script>
</head>
<body>
    <p>This website only displays a message box.</p>
</body>
</html>

Complex visualisations, animations, or interactive elements can also be noted directly in HTML. The advantage of direct embedding is that JavaScript elements are edited directly in the HTML file. The disadvantage is that you have to note JavaScript functions separately in the source code for each HTML document. This leads to increased effort when maintaining the source code.

Embedding JavaScript as an external file

It’s more efficient and more common to note down JavaScript as an external file and reference it in the HTML document. In this way, JavaScript can be included in HTML as if the file were noted directly in the source code.

In the HTML document it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Include external JavaScript file</title>
    <script src="filename.js"></script>
</head>
</body>

Embedding JavaScript as an external file offers the advantage that only the link to the external file is referenced. So, all desired HTML pages with a corresponding reference can access the file and load it faster. In addition, the source code is easier to maintain, since it’s not several HTML documents, but only one JavaScript file.

Tip

JavaScript elements have been a sort of non-plus-ultra for interactive content on websites and in browsers. However, since even JavaScript doesn’t always load fast enough, the open standard WebAssembly is now being used more and more as a JavaScript supplement.

Special features in different HTML versions

When embedding JavaScript in HTML, note that older browsers require more verbose source code. Instead of the simpler HTML 5 <script>...</script> tag, the JavaScript inclusion would look like this:

<script type="text/javascript">
JavaScript-Element
</script>

</script>

If you want to display a placeholder message for visitors who have JavaScript disabled, use the following noscript tag:

<head>
    <script>
        JavaScript-Element
    </script>
    <noscript>
        Please enable JavaScript to see the JavaScript element.    
    </noscript>
</head>
Was this article helpful?