HTML <script> Tag

The HTML <script> tag is an essential element used to embed or reference JavaScript code within an HTML document. JavaScript is a widely used programming language for creating interactive and dynamic web pages, and the <script> tag allows web developers to enhance the functionality of their websites by incorporating client-side scripts. These scripts can be written directly inside the <script> tag or included as external files.

The <script> tag can be placed either in the <head> or <body> section of an HTML document, depending on when the script should execute. Using this tag correctly ensures the smooth functioning of web pages and enhances the overall user experience.

Syntax of the <script> Tag

Here’s the basic syntax of the <script> tag when embedding JavaScript directly in an HTML document:

html
<script>
    // JavaScript code goes here
</script>

For external JavaScript files, the src attribute is used to link to the external file:

html
<script src="path/to/javascript-file.js"></script>

When using the src attribute, the content inside the <script> tag is ignored, and the browser loads the script from the provided file path.

Attributes of the <script> Tag

The <script> tag supports several attributes that control how and when the script is executed. Here’s a list of the most commonly used attributes:

AttributeDescription
srcSpecifies the URL of an external JavaScript file.
typeSpecifies the MIME type of the script (default is “text/javascript”).
asyncExecutes the script asynchronously without blocking the page load.
deferDelays the execution of the script until the page has fully loaded.
crossoriginHandles the cross-origin requests for external scripts.
integrityProvides a way to ensure that the external script hasn’t been modified.
nomoduleSpecifies that the script should not be executed in browsers that support ES6 modules.
charsetDeclares the character encoding used in the external script file (applies only when src is used).

Examples of HTML <script> Tag

Example 1: Embedding JavaScript Inside the HTML Document

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
        document.write("This text is added by JavaScript.");
    </script>
</body>
</html>

In this example, JavaScript is directly written within the <script> tag to manipulate the content on the page.

Example 2: Linking to an External JavaScript File

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>External JavaScript File</h1>
</body>
</html>

In this example, the src attribute links to an external JavaScript file (script.js), and the defer attribute ensures that the script will be executed after the HTML document has fully loaded.

FAQs About HTML <script> Tag

Q1: What is the purpose of the HTML <script> tag?
A: The <script> tag is used to embed or reference JavaScript code in an HTML document, allowing developers to add interactive and dynamic features to web pages.

Q2: Where should I place the <script> tag in my HTML document?
A: The <script> tag can be placed in either the <head> or <body> section. It’s often recommended to place it at the end of the <body> section or use the defer attribute to avoid blocking page rendering.

Q3: What is the difference between the async and defer attributes in the <script> tag?
A: The async attribute allows the script to be executed asynchronously, meaning it loads independently of the HTML parsing. The defer attribute, on the other hand, ensures the script is executed after the HTML document has completely loaded.

Q4: Can I use multiple <script> tags in one HTML document?
A: Yes, you can use multiple <script> tags in a single HTML document, either for embedding different JavaScript codes or linking to multiple external JavaScript files.

Q5: Does the <script> tag affect SEO?
A: If not used properly, the <script> tag can slow down page load times, affecting user experience and SEO. Using the defer or async attributes helps ensure that the script loads without blocking content, improving SEO performance.

tools

HTML

Related Articles