It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

HTML script Tag

Reading time 3 min
Published Jun 29, 2017
Updated Oct 11, 2019

HTML script: Main Tips

  • HTML <script> tags are used to reference or embed a code to execute.
  • Usually, a JavaScript code is used. However, HTML <script> can be used with other coding languages (e.g., GLSL – OpenGL Shading Language).
  • You must use both opening and closing tags.
  • The global attributes are supported.

How to Use JavaScript in HTML

If you include the <script> tags, HTML code will embed a JS script or reference an external file containing a script:

Example
<script>
  document.getElementById("learn").innerHTML = "It works!";
</script>

You can include the type attribute to specify the media type of the given script:

Example
<script type="application/javascript">
  document.getElementById("p").innerHTML = "It works!";
</script>

Embedding an External Script

To include a JS script kept in an external file instead of embedding it directly, you need to define the source for the file using the src attribute:

Example
<script src="scripts-tag-example.js"></script>

The document containing the script must have a .js extension. If it cannot be loaded (e.g., due to an incompatible type), an error will be sent. If all goes well, a load event will fire.

Note: if you try to both embed a JS script directly and specify an external file, only the latter one will be used.

Controlling the Loading Time for the Script

Beginners are traditionally told the <script> tags belong in the head section of the document. However, as the browser starts fetching the script as soon as it encounters the element, this may slow down the loading time in some cases. To avoid this, you can place your script at the very end of the document, just before you close the <body> tags.

If you decide to keep the <script> tags in the head section of the document, there are two attributes that can help you control the timing of loading the script. Both of them are of a boolean type and only work when you're adding an external file.

async specifies that the script is executed without blocking parsing:

Example
<script async>
  document.getElementById("p").innerHTML = "It works!";
</script>

defer specifies that the script is executed after parsing:

Example
<script defer>
  document.getElementById("p").innerHTML = "It works!";
</script>

If neither one of these two attributes is set, the script is executed before the browser continues parsing.

Note: neither async nor defer will work with a directly embedded script.

Deprecated Attributes

There are two attributes that were used with HTML <script> tags previously, but have since been deprecated:

  • charset specified character encoding in the externally linked script file.
  • language specified the scripting language.

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All