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, color scheme, typographies, and other design elements of a website.
A website only becomes truly interactive with JavaScript elements, which add dynamic behavior to the content. JavaScript files embedded in HTML, for example, enable the active modification of website content such as automatic date display, day-dependent coloring, 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 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.
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:
This website only displays a message box.
Complex visualizations, 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:
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 tag, the JavaScript inclusion would look like this:
If you want to display a placeholder message for visitors who have JavaScript disabled, use the following noscript tag:
Related articles
Enable JavaScript: How to turn on the script language in your browser
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 an 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 markup 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.
You can access an element by using getElementById():
Example
Create an Embed Object
You can create an element by using the document.createElement() method:
Example
Embed Object Properties
Property
Description
height
Sets or returns the value of the height attribute in an embed element
src
Sets or returns the value of the src attribute in an embed element
type
Sets or returns the value of the type attribute in an embed element
width
Sets or returns the value of the width attribute in an embed element
Standard Properties and Events
The Embed object also supports the standard properties and events.
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
An HTML document is made up of HTML elements, HTML element attributes, comments, special characters, and doctype. If you like to add presentational features to an HTML document you can attach css to an HTML document, to add dynamic user experience (e.g. popup, alert message, animations etc.) to an HTML document you can add JavaScipt to your HTML document.
If javascript is disabled in the browser property, even though an external script is attached or a script is written within tags in an HTML document, it becomes inactive.
Certain JavaScripts do not work with all the browsers and sometimes a script works on and above (or vice a versa) a particular version of a web browser.
The script Tag
The script is an HTML element. Html script element is used to enclose client side scripts like JavaScript within an HTML document.
There are four types of attributes in script element:
The language attribute is used to specify the scripting language and it’s version for the enclosed code. In the following example, JavaScript version is 1.2. If a specific browser does not support the said JavaScript version, the code is ignored. If you do not specify a language attribute, the default behavior depends on the browser version. The language attribute is deprecated in HTML 4.01.
This attribute specifies the location of an external script. This attribute is useful for sharing functions among many different pages. Note that external JavaScript files contain only JavaScript statements and files must have the extension .js.
If you set defer attribute, the browser delays the execution of the script or it changes the order of the execution of the script. This can improve the performance by delaying execution of scripts until the content of body is read and displayed by the browser.
This attribute specifies the scripting language. The scripting language is specified as a content type (e.g., «text/javascript» ). The attribute is supported by all modern browser.
The noscript tag
If any browser does not support the JavaScript code the alternate content placed within noscript tag is being executed.
Javascript in HTML document
There are two general areas in HTML document where JavaScript can be placed. First is between . section, another is specific location in
.
section. If you want to display a message ‘Good Morning’ (through the JavaScript alert command) at the time of page loading then you must place the script at the
. section. In the following examples you will see the different location of tags in a HTML document.
