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-ElementScript 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.
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.
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>
Related articles
How to enable JavaScript in Chrome
It’s hard to imagine the modern web without JavaScript. Next to HTML and CSS, the programming language plays a decisive role in the implementation of user-friendly and attractive web projects. A website without scripts written in JavaScript that provides the desired amount of interactivity is hardly possible. In this guide, we explain why many users decide to block the language in their browser…
Use PHP to insert information into a MySQL/MariaDB database from a HTML form
A PHP script is a convenient way to accept information submitted from a website's HTML form and insert it into a MySQL/MariaDB database. This tutorial will cover how to create a basic PHP script for inserting data, and an HTML form to take user input from a webpage and pass it to the PHP script.
How to embed a Video in HTML
With HTML5, uploading video content onto your website is easier than ever. The most recent version of this popular mark-up language defines a new native element, video, and the associated programming interface. Website operators can also embed audio-visual content onto their online presences using video platforms such as YouTube or Vimeo.
Angular vs. React
Angular vs. React is a competition that divides the developer community. The two frameworks both enjoy a large fanbase and come with numerous advantages. We explain what Angular and React are, what they have in common, what distinguishes them, and what kinds of projects each of them is suited to. Read on to find out more.
How to add JavaScript to WordPress
Scripts in JavaScript are a handy way to fill websites with interactive content. However, in order to prevent problems with malicious code from occurring, WordPress only allows administrators to add JavaScript by default. We’ll show you how to enable JavaScript for all backend users in our dedicated article. Read on for more.
