You can use HTML <script> to indicate the use of scripts in your HTML documents. In addition to the direct integration of JavaScript code, it’s also possible to reference external scripts. You can also use optional attributes such as async or defer to control how these scripts are processed.

What is HTML <script> and what is it used for?

The <script> HTML tag is used to embed client-side scripts into web pages or HTML documents. Between the opening and closing <script> tags, you can either include script commands directly or link to an external script file by using the src attribute. While earlier versions of HTML required users to specify the scripting language, HTML5 uses JavaScript as the default scripting language for this element.

Typical uses for HTML <script> tags or JavaScript in general include form input validation, image manipulation, and dynamic changes to website content.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

What is the syntax of the HTML<script> tag?

The syntax of <script> is relatively straightforward: An introductory <script> tag marks the start and a closing </script> tag marks the end of the script. The basic syntax structure looks like this:

<script>JavaScript code or reference to external script</script>
html

If you write the JavaScript code directly into the element, you don’t need any further parameters. For a reference to an external script, you also need the HTML attribute src (for source). Here’s the syntax for including external scripts in HTML <script>:

<script src="script.js"></script>
html

Example of integrating JavaScript directly

Below, we’re going to take a look at a simple example that illustrates how to directly embed JavaScript in an HTML document using the HTML <script> tag. In the <body> area, we’ve added a button with the <button id> “myButton”. After creating the ID, we include JavaScript code that displays a message, which says “You clicked the button!” when a user presses the button:

<body>
    <h1>JavaScript example button: Direct integration</h1>
    <button id="myButton">Click here!</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('You clicked the button!');
        });
    </script>
</body>
html
Tip

It’s best to include an alternative text that will be presented instead of the script, in the event that it cannot be executed. This can occur, for example, if a user has JavaScript disabled. You can use the <noscript> element (introductory and closing tag) for this.

Example for integrating an external script

Now, we’re going to look at how to create the button with the message from above using an external script. To do this, we’re going to first save the code for the clickable button—which displays the message “You clicked the button!” when clicked—in a new file named script.js:

// script.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myButton').addEventListener('click', function() {
        alert('You clicked the button!');
    });
});
javascript

Next, we’re going to integrate the script into an HTML document that is located in the same directory as the script:

<body>
    <h1>JavaScript example button: embedding via reference</h1>
    <button id="myButton">Click here!</button>
    <script src="script.js"></script>
</body>
</html>
html
Tip

In a separate article, we go into more detail on how to embed JavaScript in HTML.

What attributes are there for HTML <script>?

The HTML <script> tag can be combined with a number of attributes. Here are some of the most important ones:

  • async: This attribute ensures that an external script is downloaded and executed in parallel with the page’s code interpretation as soon as the script is available (even if the page is not fully loaded).
  • crossorigin: If you want to set the request mode to HTTP CORS requests for the script, use the crossorigin attribute.
  • defer: If the defer attribute is set, an external script is also downloaded in parallel to the interpretation of the page code. However, it is only executed as soon as the page has been fully interpreted.
  • integrity: To increase security, you can add the integrity attribute to HTML <script>. It ensures that browsers can check the script that has been retrieved. This ensures that the code is not loaded if the source code has been manipulated.
  • nomodule: With nomodule, you ensure that your scripts are not executed in browsers that support ES2015 modules.
  • referrerpolicy: If you want to specify which referrer information should be sent when a script is called, use the referrerpolicy attribute. Possible values include no-referrer (no referrer page) and strict-origin (only the origin domain is sent as the referrer).
  • src: The src attribute specifies the URL of an external script.
  • type: With this (now optional) attribute, you can specify what content the HTML <script> element contains. In addition to the classic script, ECMAScript modules (module) and import maps (importmap) with rules for ECMAScript module imports are also possible.
Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private registration for more privacy
  • Free Domain Connect for easy DNS setup
Was this article helpful?
Go to Main Menu