How to embed JavaScript in HTML with simple examples

JavaScript adds a breath of fresh air to a static HTML file. You can embed JavaScript in HTML either directly or as an external file. We show you the ad­van­tages and dis­ad­van­tages of embedding JavaScript and point out the specific details you need to know.

Why embed JavaScript in HTML?

HTML, CSS, and JavaScript are the three core tech­nolo­gies of the modern World Wide Web. To create a modern, in­ter­ac­tive website, you usually need more than static HTML. By embedding CSS and JavaScript, you can add design and dynamic func­tion­al­i­ty to plain HTML files. HTML files are text documents that define and structure website content. HTML is easy to learn, requires no special for­mat­ting, and can be written with free code editors such as Notepad++ or Kate. Design elements, in turn, are handled by CSS files embedded in HTML, which define the layout, colors, ty­pog­ra­phy, and visual style of a website.

JavaScript makes a website truly in­ter­ac­tive. When you embed JavaScript files in HTML, you can add dynamic behavior to your content, such as dis­play­ing the current date au­to­mat­i­cal­ly or changing page elements based on user input. With JavaScript enabled, most browsers can execute JavaScript content directly. This can reduce server-side pro­cess­ing and help in­ter­ac­tive content and an­i­ma­tions load more ef­fi­cient­ly.

What options are there for embedding JavaScript?

You can add JavaScript elements to the HTML source code using <script> elements as follows:

<script>JavaScript element</script>

You usually insert <script> elements in the body or head section of an HTML document.

Depending on how you embed JavaScript in HTML, you have the following options:

• Write JavaScript directly in the HTML page: Directly embedding JavaScript in HTML ensures that JavaScript files load as quickly as possible through direct notation. The downside is that direct entries have to be made for every HTML document on a website in order to load content.
• Reference JavaScript as an external file in HTML: Embedding JavaScript as an external file ref­er­ences the JavaScript file in the HTML text. Embedding as a reference makes it possible to load ex­ter­nal­ly written JavaScript files on multiple pages without having to insert them directly as extensive JavaScript elements in HTML files.

Security aspects when embedding JavaScript

When you embed JavaScript in HTML, security should always be a priority. One common attack vector is Cross-Site Scripting (XSS), where malicious code is injected through forms or external content. To reduce this risk, user input should always be validated and untrusted content sanitized.

Modern security tech­niques provide ad­di­tion­al pro­tec­tion. Sub­re­source Integrity (SRI) uses a hash value to verify that a loaded file has not been modified, while Content Security Policies (CSP) can block unwanted scripts. CSP headers, for example, allow scripts to run only from specific trusted sources.

How to embed JavaScript in HTML: examples

You can choose between two different methods to embed JavaScript in HTML. We introduce both options below.

Embed JavaScript in HTML directly

To load JavaScript elements ef­fi­cient­ly, you can place the script element either in the HTML head or in the HTML body. In modern browsers, a simple JavaScript snippet is often enough. The following example embeds JavaScript to display the message “Hello friend” on a website:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript: Hello friend</title>
</head>
<body>
<p>This website displays a notification box.</p>
<script>
alert("Hello friend!");
</script>
</body>
</html>

Complex layouts, an­i­ma­tions, and in­ter­ac­tive elements can also be added directly to an HTML file. The advantage of embedding JavaScript this way is that the code can be edited in the same document. The downside is that JavaScript functions must be added sep­a­rate­ly to each HTML file. This makes the source code more difficult to maintain.

Embed JavaScript as an external file

It is more efficient and common to write JavaScript as an external file and reference it in the HTML document. In this way, you can embed JavaScript in HTML as if the file were written directly in the source code.

In the HTML document, it looks like this:

<!DOCTYPE html> 
<html lang="en">
<head> 
<title>Embed an external JavaScript file</title>
<script src="filename.js" defer></script>
</head>
<body>
<p>Here, JavaScript is loaded as an external file.</p>
</body>
</html>

Embedding JavaScript as an external file has the advantage that the HTML document only needs to reference the linked external file. Any HTML page with the correct reference can then access the same JavaScript file. This can improve loading behavior and makes the source code easier to maintain, since changes only need to be made in one JavaScript file rather than across multiple HTML documents.

Special features of external JavaScript files

When you embed JavaScript as an external file, as shown above, modern HTML standards such as HTML5 give you more control over when the code runs and how JavaScript files are struc­tured.

The HTML at­trib­ut­es async and defer define when and how scripts are loaded and executed. With async, the script runs as soon as it has finished loading, re­gard­less of whether the HTML document has been fully parsed. With defer, the script only runs after the document has been parsed. This makes defer es­pe­cial­ly useful for scripts that depend on the DOM.

For larger web projects, type="module" is par­tic­u­lar­ly useful. It lets you divide JavaScript into modules, making complex ap­pli­ca­tions easier to organize and maintain. Modules use defer by default, which makes this ar­chi­tec­ture well suited to scalable web ap­pli­ca­tions. Each module also runs in its own scope, helping to prevent global naming conflicts. With the import and export keywords, you can share functions, classes, or constants between files.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Async, Defer and Module Example</title>

<!-- async: loads immediately, executes as soon as loaded (order not guaranteed) -->
<script src="async-example.js" async></script>

<!-- defer: loads in parallel, executes after parsing in order -->
<script src="defer-example.js" defer></script>

<!-- module: modern module architecture, automatically loaded in a "defer"-like way -->
<script type="module" src="module-example.js"></script>
</head>
<body>
<h1>Example page for async, defer, and module</h1>
</body>
</html>

In the HTML example above, three JavaScript files are embedded in different ways. The script with async (async-example.js) loads in parallel and is executed im­me­di­ate­ly after loading, which means the execution order can be un­pre­dictable. The defer script (defer-example.js) also loads in parallel, but only runs after the HTML document has been fully parsed. The module script (module-example.js) behaves similarly to defer, but also uses module ar­chi­tec­ture with its own scope and support for import and export in modern web ap­pli­ca­tions.

Special features in different HTML versions

When you embed JavaScript in HTML, remember that older browsers may require more detailed source code. Instead of the simpler HTML5 <script>…</script> tag, JavaScript would be inserted into HTML 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>
</head>
<body>
  <noscript>
    Please enable JavaScript to view the JavaScript element.
  </noscript>
</body>