Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jun 20, 2021Updated Oct 31, 2022
Contribute to Docs

The <script> element is used to insert runnable code into a document, usually JavaScript. It can be used both to include a script within the HTML document, or to load an external script from another source.


<!-- In-document script -->
// JavaScript code goes here
<!-- External script -->
<script src="filename.js"></script>

The <script> element can be used without attributes, but some common attributes are used to modify the behavior:

  • When provided, the src attribute will load an external script.
  • The async attribute executes the script as soon as it is loaded, ignoring other pending actions in the browser.
  • The defer attribute requires the script to wait to execute until the content in the <body> has finished loading into the browser.

The <script> element is allowed to be placed both into the <head> and <body>, and their behavior with respect to loading and executing depends on which one they are in, and the attributes they are given.


This example demonstrates the multiple places where a <script> element may live, and how execution affects their location and attributes:

<!-- Will load and run file "deferred_app.js" only once the body below is fully loaded into memory -->
<script defer src="deferred_app.js"></script>
<!-- Will load and run file "async_app.js" as soon as it finishes loading -->
<script async src="async_app.js"></script>
<!-- Will run before the body finishes loading into memory -->
console.log('Goodbye, World!');
<h1>Hello, World!</h1>
Traditionally, a Hello World application represents the first step a new
programmer takes into learning a new language.
<!-- Will naturally run after the other body content is fully loaded into memory -->
console.log('Hello, World!');

All contributors

Looking to contribute?

Learn HTML on Codecademy