HTML script Tag

An equivalent of a keyword, a tag describes how a web browser produces and presents the material. Scripts like JavaScript can be included using the <script> element. The characteristics of the <script> tag determine how the tag will act. The src element specifies the path to external script files and is an example of a <script> attribute.

Syntax:

<script>  

  //code to be executed  

</script>

Due to this strong tag functionality, developers can effortlessly incorporate well-known libraries, plugins, and scripts into their HTML documents to enhance performance. This expedites the development process and fosters enhanced troubleshooting and streamlined collaboration with fellow programmers.

By leveraging the <script> elements, you can include a JavaScript file or any alternative scripting language within an HTML document. To streamline coding efficiency and enhance performance, embed this code directly inside the element or link to an external file by specifying the src attribute.

The browser interprets the script during the loading of the HTML file, enabling dynamic functionalities and user engagement on the page. For example, JavaScript can modify content, react to user actions, and offer animated effects.

The <script> tag enables the control of multiple attributes, such as asynchronous behavior and deferral, which dictate the sequencing of script execution. It is applicable in both the header and body sections of an HTML file.

Moreover, the extremely versatile src element allows you to incorporate external resources into your script code.

Let's now examine a few well-known script tag properties.

1. Script Tag Information: You may utilize the script tag's numerous characteristics to regulate how the code is loaded and run. These qualities consist of:

• ✅ Where to place the HTML script element.
• ✅ The actions it takes (asynchronously, loading later, etc.) What order of importance should the browser give it while retrieving it?
• ✅ Which cryptographic hash should be used in the verification process?
• ✅ And if blocking or nonce is enabled, respectively.

All of these characteristics serve various functions and maintain the speed and security of your website. Some of the most popular script tag characteristics are shown below.

1. Async: The boolean value will be true if this attribute is present. The async property instructs the browser to download this script asynchronously to render the page without interruption after downloading. You may so take pleasure in quick performance.
2. Crossorigin: The crossorigin property is useful when loading scripts from several domains. For scripts originating from foreign domains, the browser will, by default, not communicate specific information in the error messages delivered to window.onerror. However, by utilizing this feature, you may enable tracking of any problems brought on by these sorts of requests, enhancing user experience and performance on all pages of your website.
3. Defer: When this property is present, the browser will hold off on running any scripts until after the full page has been processed. This is especially helpful if you have several scripts on a single page since it ensures that they are executed in the order they appear in the HTML code. If you aren't going to utilize the src property, don't use this attribute because the inline scripts won't work.
4. Fetch Priority: For improved efficiency, this feature enables you to give the script source priority when the web browser fetches it. The priority of requests can be changed depending on several factors, including the size and quantity of resources sought at once, as well as the state of the network:

• ✅ High: This signal indicates a high-priority call for external scripts and should be given priority over other fetch requests.
• ✅ Low: Compared to other external scripts, signals are not fetched with as much priority.
• ✅ Auto: Signals automatically determine the fetch priority of external scripts about other scripts when sent out.

1. Integrity: By utilizing this feature, you may provide the browser with a cryptographic hash of the script resource to confirm that it wasn't altered during the download. This guarantees that your script is appropriately secured and secure to use.
2. Nomodule: The nomodule property of the script> element allows developers to tell contemporary browsers not to run their script. It was recently included in HTML5. This is especially helpful if your code only needs to operate on outdated web browsers and does not adhere to ECMAScript module requirements.
3. Nonce: Nonce denotes a single usage of a number. Using this feature, you may generate an erratic, one-time-use string (often called a "nonce") that verifies the script was not changed during download. Then, your response's Content Security Policy header has this unique identity, which any web browser will validate. Thanks to the security safeguard, you may be certain that nothing harmful has been changed throughout the transmission process.

Referrer Policy

Using this feature, you may modify the Referrer-Policy response header, which governs how any reference data is delivered when a script is requested.

• ✅ No-referrer: There will be no referrer header transmission.
• ✅ No-referrer-when-downgrade: The Referer header will not be transmitted if an origin does not use Transport Layer Security (TLS, often known as HTTPS).
• ✅ Origin: Only its source, including protocol, hostname, and port, will be allowed to be included in the referrer sent to the server.
• ✅ Origin-when-cross-origin: As a safety measure, only the scheme, hostname, and port number will be included in the referrer sent to external sources. However, it will also disclose its path internally from the same origin page.
• ✅ Same-origin: A referrer will be included in requests from the same domain. However, no referrer information will be connected with queries made across various domains.
• ✅ Strict-origin: Communicate the document's origin as part of the referrer when switching from HTTPS to another secure destination. If you are switching to HTTP, do not send the referrer.
• ✅ Strict-origin-when-cross-origin: Give the whole URL if sending a same-origin request. Send the origin only if both destinations use the same degree of security, such as HTTPS and HTTPS. Finally, avoid including headers (such as HTTPS) when visiting less secure websites.
• ✅ Unsafe-URL: The referrer contains the route and origin but not the username, password, or fragment. This value exposes origins and pathways from secure TLS sources to insecure locations, making it hazardous.
• ✅ Src: This property specifies the precise location of a required external script resource. This is an excellent substitute for embedding a script directly in your text.
• ✅ Type: The script's type is expressly defined by this attribute, normally text/javascript. The type property must provide the browser with explicit instructions on handling your scripts. It will be obvious to the browser that your script contains conventional JavaScript code if you omit this attribute, set it to an empty string, or use the JavaScript MIME type. This makes your script more interpretable and simpler to process.
• ✅ Blocking: This parameter is used to describe the loading and execution methods for the script. While the script is being fetched, some actions are blocked.

Now that we have gained an understanding of the features of the script tag, let's examine a few examples.

Using a Script Tag

HTML script tags can be applied in one of two ways:

• ✅ to connect a script file to embed script code
• ✅ script code embed
• ✅ The script tag can include scripting code in the body or head tags.

Let's examine a sample HTML body containing a script tag.

Examples of HTML Script Tags

1. Using 'Src' to Import Script

Certainly, HTML and JavaScript can be utilized together within the same webpage. By employing the script tag and the src attribute, you can compartmentalize your code into an external file and bring it into your page. To demonstrate this process, refer to the example provided below.

<html>  

<body>  

<script type="text/javascript">  

document.write("Hii Welcome");  

</script>  

</body>  

</html>

Output:

Let's examine a sample of an HTML head element containing a script tag.

<html>  

<head>  

<script type="text/javascript">  

function msg(){  

 alert("Hello Welcome");  

}  

</script>  

</head>  

<body>  

<p>Welcome</p>  

<form>  

<input type="button" value="click here" onclick="msg()"/>  

</form>  

</body>  

</html>

Output:

Example 2: (script outside body tag):

<!DOCTYPE html>

<html>

<head>

<title>script tag</title>

<style>

body {

text-align:center;

}

h1 {

color:red;

}

</style>

<script>

function Main() {

alert('Welcome!');

}

</script>

</head>

<body>

<h1>Welcome</h1>

<h2><script> Tag</h2>

<button type="button" onclick="Main()">

Let's Start</button>

</body>

</html>

Output:

Conclusion to the HTML Script Tag

You can effectively incorporate scripts into your web pages by utilizing the HTML script tag. This provides a reliable, trustworthy, and safe method for loading content from external origins.

To make informed decisions regarding the placement of scripts on your web pages, utilize the script tag and ensure you understand the purpose of each attribute and its impact on your website's performance. This ensures that your website operates as intended and loads efficiently.