Categories
Learn HTML

HTML: script tag

HTML: <script> tag

In this series of learning HTML, we will teach you how to use HTML script tag with proper syntax and lots of examples. Let’s start on the HTML script tag.

Description of HTML script tag

The HTML “script” tag is used to define a client-side script, such as JavaScript, that can be executed by the web browser. The “script” tag is typically used to add interactivity or dynamic functionality to a web page, such as validating form input, creating animations, or manipulating the content of the page.

Here is an example of how to use the “script” tag in HTML:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me</button>
</body>
</html>

In the example above, a JavaScript function called “sayHello” is defined in the “head” section of the HTML document using the “script” tag. This function displays an alert box with the message “Hello, World!” when called. The “onclick” attribute is added to a button in the “body” section of the HTML document, which calls the “sayHello” function when the button is clicked.

The “script” tag can also be used to include external JavaScript files by specifying a “src” attribute that contains the URL of the JavaScript file. For example:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="sayHello()">Click me</button>
</body>
</html>

In the example above, the “script” tag includes an external JavaScript file called “script.js” that contains the “sayHello” function. This approach allows for the separation of the HTML and JavaScript code, making it easier to manage and maintain the codebase.

 

 

Syntax of HTML script tag

The HTML <script> tag is used to define a client-side script, such as JavaScript, that can be executed within a web page. The syntax of the <script> tag is as follows:

<script type="text/javascript">
// script code goes here
</script>

Here, the opening tag <script> is used to indicate the start of the script, and the closing tag </script> is used to indicate the end of the script. The type attribute specifies the MIME type of the script, such as text/javascript for JavaScript code. It is recommended to include the type attribute even though it is optional in HTML5.

The script code can either be included directly within the <script> tags, or it can be specified in an external file using the src attribute.

Example:

<script type="text/javascript">
function sayHello() {
alert("Hello, world!");
}
</script>

<button onclick="sayHello()">Click me</button>

In this example, the <script> element contains a JavaScript function that displays an alert message when called. The function is attached to a button element using the onclick attribute, so that it is executed when the button is clicked.

 

Reference a File

In HTML, the syntax for the <script> tag that references a javascript file is:

<script src="/js/functions.js" type="text/javascript"></script>

Global Attributes

The <script> tag in HTML has several global attributes that can be used to modify its behavior and appearance on a web page. These attributes can be used to specify things like the source of the script, the type of script, and whether the script should be executed immediately or deferred.

Here are some of the most commonly used global attributes for the <script> tag:

  1. async: This attribute specifies that the script should be executed asynchronously with the rest of the page, which means that the page rendering won’t wait for the script to finish loading and executing before continuing.
  2. defer: This attribute specifies that the script should be deferred until after the page has finished parsing, but before the DOMContentLoaded event is fired.
  3. src: This attribute specifies the URL of the script file that should be executed. It can be a relative or absolute URL.
  4. type: This attribute specifies the MIME type of the script file. For JavaScript, the type should be set to text/javascript.
  5. charset: This attribute specifies the character encoding of the script file.
  6. language: This attribute specifies the scripting language used in the script file, although it is no longer recommended to use this attribute.
  7. nonce: This attribute specifies a unique identifier (nonce) that can be used to enforce Content Security Policy (CSP) restrictions on the script.

It’s worth noting that the async and defer attributes should not be used together on the same <script> tag, as they have conflicting behaviors.

 

 

Event Attributes

There are no specific event attributes that are associated with the <script> tag in HTML. However, there are some events that are related to the execution of scripts that can be used to trigger JavaScript code or manipulate the behavior of the <script> tag.

Here are some events related to the <script> tag:

  1. DOMContentLoaded: This event is fired when the HTML document has finished loading and parsing, and all the scripts have been executed.
  2. load: This event is fired when the script file specified in the src attribute has finished loading and executing.
  3. error: This event is fired if there is an error while loading or executing the script file specified in the src attribute.
  4. beforeunload: This event is fired when the user is about to leave the current page, and it can be used to prompt the user to save their work or confirm their action.

It’s important to note that these events are not specific to the <script> tag, and they can be used with other HTML elements as well. Also, some events like load and error can only be used when the src attribute is specified in the <script> tag.

 

Other Attributes

In addition to the global and event attributes, the <script> tag in HTML also supports a few other attributes that are specific to it. These attributes can be used to specify additional information about the script, such as its purpose, version, or author.

Here are some of the attributes specific to the <script> tag:

  1. integrity: This attribute specifies a cryptographic hash of the script file, which can be used to verify that the file has not been tampered with during transmission. This attribute is often used in conjunction with the crossorigin attribute.
  2. crossorigin: This attribute specifies whether the script file should be fetched using CORS (Cross-Origin Resource Sharing) rules. It can be set to anonymous or use-credentials.
  3. nonce: This attribute specifies a cryptographic nonce (number used once) that can be used to enforce Content Security Policy (CSP) restrictions on the script.
  4. language: This attribute specifies the scripting language used in the script file. However, it is no longer recommended to use this attribute, as it has been deprecated in HTML5.
  5. defer: This attribute specifies that the script should be deferred until after the page has finished parsing, but before the DOMContentLoaded event is fired. It has already been mentioned in the global attributes section, but it is worth noting that it is also specific to the <script> tag.

It’s important to note that not all of these attributes are supported by all web browsers, so it’s important to check their compatibility before using them in production code.

 

Notes on HTML script Tag

Here are some important notes to keep in mind when using the <script> tag in HTML:

  1. The <script> tag can be used to embed JavaScript code directly in an HTML document, or to reference an external JavaScript file using the src attribute.
  2. The type attribute is required in HTML4 and XHTML documents, but it is optional in HTML5. However, it is still recommended to include it for compatibility with older browsers.
  3. Scripts that are embedded in the HTML document should be placed in the <head> section of the document, while scripts that are referenced using the src attribute should be placed at the end of the <body> section.
  4. When using external script files, it’s important to specify the correct src attribute, and to ensure that the file is available at that location on the web server.
  5. The async and defer attributes can be used to improve page loading performance by allowing the page to continue rendering while the script is loading or executing. However, it’s important to use these attributes carefully to avoid conflicts with other scripts or page elements.
  6. The integrity and crossorigin attributes can be used to ensure that the script file is being fetched securely, and to prevent cross-site scripting attacks.
  7. When using multiple scripts on a page, it’s important to ensure that they are loaded and executed in the correct order, as some scripts may depend on others to function properly.
  8. Finally, it’s important to test the script on different browsers and devices to ensure that it is working as expected, as some browsers may have different behavior or compatibility issues.

 

Browser Compatibility

The HTML script tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Example for HTML script tag

We will discuss the <script> tag below, exploring examples of how to use the <script> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML script tag below, with some examples of how to use the script tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

Here is an example of how to use the <script> tag in an HTML5 document:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML5 page.</p>
</body>
</html>

In this example, we have an HTML5 document that includes a single external JavaScript file called “script.js”. The <script> tag is used to reference this file, using the src attribute to specify its location on the web server. We also include the type attribute, which specifies that the script is written in JavaScript.

The <head> section of the document is used to include the script file, as this allows it to be loaded and executed before the page is rendered. The <title> tag is used to specify the title of the page, which is displayed in the browser’s title bar and in search engine results.

The <body> section of the document contains the main content of the page, which in this case consists of a heading and a paragraph of text.

Here is an example of what the contents of the “script.js” file might look like:

// This is a simple JavaScript function that displays a message in an alert box
function showMessage() {
alert("Welcome to my page!");
}

// Call the showMessage() function when the page has finished loading
window.onload = showMessage;

This script defines a simple function called “showMessage()”, which displays a welcome message in an alert box. The window.onload event is used to call this function when the page has finished loading.

When the HTML document is loaded in a web browser, the script file is loaded and executed, and the showMessage() function is called, displaying the welcome message in an alert box.

HTML 4.01 Transitional Document

Here’s an example of using the <script> tag in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML4 page.</p>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document that includes a single external JavaScript file called “script.js”. The <script> tag is used to reference this file, using the src attribute to specify its location on the web server. We also include the type attribute, which specifies that the script is written in JavaScript.

The <head> section of the document is used to include the script file, as this allows it to be loaded and executed before the page is rendered. The <title> tag is used to specify the title of the page, which is displayed in the browser’s title bar and in search engine results.

The <body> section of the document contains the main content of the page, which in this case consists of a heading and a paragraph of text.

Here is an example of what the contents of the “script.js” file might look like:

// This is a simple JavaScript function that displays a message in an alert box
function showMessage() {
alert("Welcome to my page!");
}

// Call the showMessage() function when the page has finished loading
window.onload = showMessage;

 

This script defines a simple function called “showMessage()”, which displays a welcome message in an alert box. The window.onload event is used to call this function when the page has finished loading.

When the HTML document is loaded in a web browser, the script file is loaded and executed, and the showMessage() function is called, displaying the welcome message in an alert box.

Note that the HTML 4.01 Transitional doctype is different from the HTML5 doctype used in the previous example, and that the syntax of the <script> tag is the same in both examples. However, there may be some differences in browser compatibility and behavior between HTML4 and HTML5, so it’s important to test your code on different browsers and devices to ensure that it works as expected.

 

 

XHTML 1.0 Transitional Document

here’s an example of using the <script> tag in an XHTML 1.0 Transitional document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first XHTML page.</p>
</body>
</html>

In this example, we have an XHTML 1.0 Transitional document that includes a single external JavaScript file called “script.js”. The <script> tag is used to reference this file, using the src attribute to specify its location on the web server. We also include the type attribute, which specifies that the script is written in JavaScript.

The <head> section of the document is used to include the script file, as this allows it to be loaded and executed before the page is rendered. The <title> tag is used to specify the title of the page, which is displayed in the browser’s title bar and in search engine results.

The <body> section of the document contains the main content of the page, which in this case consists of a heading and a paragraph of text.

Here is an example of what the contents of the “script.js” file might look like:

// This is a simple JavaScript function that displays a message in an alert box
function showMessage() {
alert("Welcome to my page!");
}

// Call the showMessage() function when the page has finished loading
window.onload = showMessage;

This script defines a simple function called “showMessage()”, which displays a welcome message in an alert box. The window.onload event is used to call this function when the page has finished loading.

When the XHTML document is loaded in a web browser, the script file is loaded and executed, and the showMessage() function is called, displaying the welcome message in an alert box.

Note that in XHTML, the document must be well-formed XML, which means that all tags must be closed properly and all attribute values must be enclosed in quotes. Also note that the syntax of the <script> tag is the same as in HTML, but because XHTML is an XML-based language, the tag must be properly closed with a forward slash.

 

XHTML 1.0 Strict Document

Here is an example of using the <script> tag in an XHTML 1.0 Strict document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<script type="text/javascript">
// <![CDATA[
function showMessage() {
alert("Welcome to my page!");
}
window.onload = showMessage;
// ]]>
</script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first XHTML page.</p>
</body>
</html>

 

In this example, we have an XHTML 1.0 Strict document that includes an inline JavaScript block. The <script> tag is used to define the script block and the type attribute is used to specify that the script is written in JavaScript. In addition, we use the CDATA section to avoid any conflicts with the XML syntax.

The <head> section of the document is used to define the script block, which in this case consists of a simple function called “showMessage()”. This function displays a welcome message in an alert box when the page has finished loading, and is called using the window.onload event.

The <body> section of the document contains the main content of the page, which in this case consists of a heading and a paragraph of text.

Note that in XHTML 1.0 Strict, all tags must be closed properly and attribute values must be enclosed in quotes. Also, the use of external JavaScript files is preferred over inline scripts for better separation of concerns and improved maintainability.

 

 

XHTML 1.1 Document

Here is an example of using the <script> tag in an XHTML 1.1 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first XHTML page.</p>
</body>
</html>

 

In this example, we have an XHTML 1.1 document that includes an external JavaScript file called “script.js”. The <script> tag is used to reference this file, using the src attribute to specify its location on the web server. We also include the type attribute, which specifies that the script is written in JavaScript.

The <head> section of the document is used to include the script file, as this allows it to be loaded and executed before the page is rendered. The <title> tag is used to specify the title of the page, which is displayed in the browser’s title bar and in search engine results.

The <body> section of the document contains the main content of the page, which in this case consists of a heading and a paragraph of text.

Here is an example of what the contents of the “script.js” file might look like:

// This is a simple JavaScript function that displays a message in an alert box
function showMessage() {
alert("Welcome to my page!");
}

// Call the showMessage() function when the page has finished loading
window.onload = showMessage;

 

This script defines a simple function called “showMessage()”, which displays a welcome message in an alert box. The window.onload event is used to call this function when the page has finished loading.

When the XHTML document is loaded in a web browser, the script file is loaded and executed, and the showMessage() function is called, displaying the welcome message in an alert box.

Note that in XHTML 1.1, the document must be well-formed XML, which means that all tags must be closed properly and all attribute values must be enclosed in quotes. The syntax of the <script> tag is the same as in HTML, but because XHTML is an XML-based language, the tag must be properly closed with a forward slash.