🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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