HTML script Tag Tutorial with Examples


HTML <script> is a tag used to put some executable code which is named as a script into the web age or HTML code. <script> tag will contain different scripts that can be JavaScript or WebGL GLSL programming language or provide a reference to external scripts to be loaded and executed.

<script> Tag and JavaScript

<script> is a tag that starts the script block and the script block is ended with the </script> enclosing tag. The block inside these tags will be referred to as script body or block and may contain JavaScript, WebGL GLSL or reference to the external script files which can be server from the current domain or external domain. But in general script tag is used to run JavaScript code which is very popular even defacto scripting language for web pages.

<script>

alert("This is JavaScript");

</script>

Run Script

Script tag is used to run JavaScript code where the code will be put into the script tags. The given code will be executed immediately without waiting for a specific event. In the following example we will show a message box with a message.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


<script>

alert("I like poftut.com");

</script>

</body>
</html>

Set Script Type

Even there are multiple scripting languages that can be used with the script tag JavaScript is the default scripting language that is used with script implicitly. Alternatively, we can specify the scripting language with the type attribute of the script tag. In the following example we will put two script block where first is JavaScript which value is text/javascript and the second block is WebGL which value is x-shader/x-vertex.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


<script type="text/javascript">

alert("I like poftut.com");

</script>



<script type="x-shader/x-vertex">

attribute vec2 aVertexPosition;

</script>


</body>
</html>

Specify External Script File

Script tag can also load and run an external script file. The script file can be on the same domain or on the other domain. The script file path or URI will be specified with the attribute src.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


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

<script src="../scripts/poftut.js"></script>

<script src="https://www.poftut.com/scripts/my.js"></script>


</body>
</html>

Run Script Asynchronized

By default, the specified script block of the script file is loaded as soon as possible. But in some cases using lazy loading can be more beneficial which is called asynchronized loading. This will iterate the loading of the script and will create less load for the web client or web browser. Lazy loading generally used with external script files and the attribute async is used. All the external script files will be loaded synchronized in the following example.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


<script src="poftut.js" async></script>

<script async src="../scripts/poftut.js"></script>

<script async src="https://www.poftut.com/scripts/my.js"></script>


</body>
</html>

Set Character Set/Encoding For External Script

By default the current HTML document character set or encoding is used for the script block. In some cases the encoding of the script block especially external script files can be different than the current HTML document.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


<script charset="UTF-8" src="poftut.js"></script>

<script charset="ISO-8859-1" src="../scripts/poftut.js"></script>

<script src="https://www.poftut.com/scripts/my.js" charset="UTF-8"></script>


</body>
</html>

Execute Script After The Page Parsing

Even async provides lazy loading there is an alternative way to load external scripts that is called as defer attribute. With the defer attribute the given external script will be loaded after the page parsing which means after all the elements of the HTML document or web page are parsed and put properly. Defer attribute can be only used for the external script files.

<html>
<body>

<h1>The HTML Script Tag Example</h1>


<script src="poftut.js" defer></script>

<script defer src="../scripts/poftut.js"></script>

<script defer src="https://www.poftut.com/scripts/my.js"></script>


</body>
</html>

LEARN MORE  What Is DOM (Document Object Model)?

Leave a Comment