HTML <script> Tag

For embedding a client -side script, we use script tag in html tag.

This <script> tag can be used for containing scripting statements. It can also point another external script file with the help of the src attribute in html document.

In HTML documents, JavaScript is commonly used for manipulating images, validating forms, and making dynamic changes in data and information of the document.

Syntax:

<body>
<script>
……………………………….…;
</script>
</body>

Example

In this example, we are going to write "Hello JavaScript!"with the help of JavaScript:

<!DOCTYPE html>
<html>
<head>
<title> html script tag </title>
</head>
<body>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>

Attributes of Script Tag    

Async:

It is similar to defer attribute. Using this attribute we can make the script completely independent.There is no blockage on the browser when we use async attribute

Crossorigin:

It is used to configure the HTTP CORS Request request mode.

Integrity:

It is used to allow a web browser so that it may be reviewed and ensure that the fetched script is never loaded if the source of the data has been altered.

Nomodule:

This parameter enables the ES2015 modules and specifies that the used script cannot be launched in web browsers.

Unsafe-url:   

It is used to specify the information at the time of requesting a script.

Src:

This attribute helps in providing the URL of an external script file.

Comparison between HTML and XHTML

Data and information in scripts are supplied in XHTML as #PCDATA rather than CDATA, which triggers the processing of entities.

Example:

<!DOCTYPE html>
<html>
<head>
<title> html script tag </title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var i = 10;
if (i < 5) {
// some code
}
//]]>
</script>
</body>
</html>

Default CSS Settings

The CSS values which are automatically saved as default in most of the browsers according to the use of section tag. The following CSS is added to the document:

script {
display: none;
}