totn HTML

HTML: <script> tag

This HTML tutorial explains how to use the HTML element called the <script> tag with syntax and examples.

Description

The HTML <script> tag is used to embed or reference a client-side script such as JavaScript. This tag is also commonly referred to as the <script> element.

Syntax

There are two ways that you can use the <script> tag. You can either embed the code within the <script> tags or you can reference a file that includes the code.

Embedded Code

In HTML, the syntax for the <script> tag that has embedded code within the <script> tag is:

<script type="text/javascript">
  document.write("HTML5 Script Tag Example");
</script>

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>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <script> tag:

Attribute Description HTML Compatibility
async Boolean value to indicate whether browser should execute script asynchronously HTML5
src URI of the external script HTML 4.01, HTML5
type Scripting language of the code. It can be one of the following values:
  • text/javascript
  • text/ecmascript
  • application/javascript
  • application/ecmascript
 HTML 4.01 (Not required in HTML5)
language Scripting language. Use type instead. Deprecated
defer Boolean value to indicate whether script is executed after document has been parsed HTML 4.01, HTML5

Note

Browser Compatibility

The <script> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

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

HTML5 Document

If you created a new web page in HTML5, your <script> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<script src="/js/functions.js"></script>
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<script>
  document.write("HTML5 Script Tag Example");
</script>
</body>

</html>

In this HTML5 Document example, we have used the <script> tag within the <head> tag to reference a javascript file called functions.js. We have also used the <script> tag within the <body> tag to print the text "HTML5 Script Tag Example".

Notice that in the HTML5 Document example that type="text/javascript" is not required in the <script> tag.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <script> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/js/functions.js" type="text/javascript"></script>
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<script type="text/javascript">
  document.write("HTML 4.01 Transitional Script Tag Example");
</script>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have used the <script> tag within the <head> tag to reference a javascript file called functions.js. We have also used the <script> tag within the <body> tag to print the text "HTML 4.01 Transitional Script Tag Example".

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <script> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/js/functions.js" type="text/javascript"></script>
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<script type="text/javascript">
  document.write("HTML XHTML 1.0 Transitional Script Tag Example");
</script>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have used the <script> tag within the <head> tag to reference a javascript file called functions.js. We have also used the <script> tag within the <body> tag to print the text "XHTML 1.0 Transitional Script Tag Example".

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <script> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/js/functions.js" type="text/javascript"></script>
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<script type="text/javascript">
  document.write("HTML XHTML 1.0 Strict Script Tag Example");
</script>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have used the <script> tag within the <head> tag to reference a javascript file called functions.js. We have also used the <script> tag within the <body> tag to print the text "XHTML 1.0 Strict Script Tag Example".

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <script> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/js/functions.js" type="text/javascript"></script>
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<script type="text/javascript">
  document.write("HTML XHTML 1.1 Script Tag Example");
</script>
</body>

</html>

In this XHTML 1.1 Document example, we have used the <script> tag within the <head> tag to reference a javascript file called functions.js. We have also used the <script> tag within the <body> tag to print the text "XHTML 1.1 Script Tag Example".

Share on: