HTML script Tag Tutorial

In this section, we will learn what HTML <script> element is and how to use it.

Scripting in HTML: What is <script> Tag in HTML and How to use JavaScript in HTML?

HTML <script> element is used to bring JavaScript programs into an HTML document.

HTML <script> element is used in two ways:

  • If the JavaScript source code is already written in a file somewhere outside of the HTML document, we can use the `src` attribute of the <script> element and set the address of that external JavaScript file as the value of this attribute. Browsers then send a request to that URL to get back the JavaScript file and load it in the HTML document.
  • On the other hand, if we want to write JavaScript codes directly in an HTML document, we can use the body of the <script> element. Basically, this body is the place where we can write JavaScript codes and browsers run those scripts when the page was loaded in.

Notes:

  • It’s a good practice to put <script> element within the body of HTML <body> element and right before its closing tag `</body>`.
  • It’s important to note that a <script> element using the `src` attribute should not include additional JavaScript code between the <script> and </script> tags. If both are provided, the script file is downloaded and executed while the inline code is ignored.
  • Sometimes users disable the use of JavaScript in their browsers. In such cases, your JavaScript program (the content of the <script> element) won’t be executed. If this will harm your HTML document, you can use HTML <noscript> element to alert users about this problem.

HTML <script> Tag Syntax:

<script type = “text/javascript”> </script>

HTML <script> Tag Values

The value we set in the body of HTML <script> element is the script codes that we want it to be executed in that browser when the page is loaded.

Example: using JavaScript in HTML

See the Pen using JavaScript in HTML by Omid Dehghan (@odehghan) on CodePen.

Example: HTML inline JavaScript

See the Pen HTML inline JavaScript by Omid Dehghan (@odehghan) on CodePen.

Leave a Reply