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 ad­van­tages and dis­ad­van­tages 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, in­ter­ac­tive website, you can hardly avoid en­liven­ing HTML text files by in­cor­po­rat­ing CSS and JavaScript. HTML files are plain text documents for creating and struc­tur­ing website content. HTML is easy to learn, and you can get by without for­mat­ting. It’s also user-friendly thanks to free code editors such as Notepad++ or Kate. On the other hand, cre­ativ­i­ty is provided by CSS text files embedded in HTML embedded CSS text files, which define the layout, color scheme, ty­pogra­phies, and other design elements of a website.

A website only becomes truly in­ter­ac­tive with JavaScript elements, which add dynamic behavior to the content. JavaScript files embedded in HTML, for example, enable the active mod­i­fi­ca­tion of website content such as automatic date display, day-dependent coloring, or au­to­mat­i­cal­ly displayed messages when the website is visited. With enabled JavaScript, JavaScript content can be executed directly in most browsers. This saves pro­cess­ing power and improves the loading speed of in­ter­ac­tive content and an­i­ma­tions 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.
  • Ref­er­enc­ing JavaScript as an external file in HTML: Embedding an external JavaScript file ref­er­ences the JavaScript file in the HTML text. Embedding as a reference allows ex­ter­nal­ly 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 es­pe­cial­ly easy with special JavaScript frame­works. JS frame­works group together pre­de­fined JavaScript objects and state­ments and make pro­gram­ming 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 rel­a­tive­ly simple JS source code is suf­fi­cient. In the following example, the message “Hello friend” is written on a website via JavaScript in­te­gra­tion:

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

Complex vi­su­al­iza­tions, an­i­ma­tions, or in­ter­ac­tive 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 dis­ad­van­tage is that you have to note JavaScript functions sep­a­rate­ly in the source code for each HTML document. This leads to increased effort when main­tain­ing 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 ref­er­enced. So, all desired HTML pages with a cor­re­spond­ing 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 in­ter­ac­tive content on websites and in browsers. However, since even JavaScript doesn’t always load fast enough, the open standard We­bAssem­bly is now being used more and more as a JavaScript sup­ple­ment.

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>

If you want to display a place­hold­er 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>
Go to Main Menu