How to Use HTML Tag in JavaScript

Understanding the `<script>` Tag in HTML

The <script> tag in HTML is used to embed executable code directly into a web page—most commonly JavaScript. It can also reference external JavaScript files, making it a key part of creating dynamic, interactive websites.

What Does `<script>` Do?

JavaScript code placed inside a <script></script> block tells the browser what to do—like showing alerts, updating content, handling user input, or adding animations.

Here’s a simple example:

Example: JavaScript Inside a `<script>` Tag

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <h1>JavaScript Tutorials</h1>

        <script>
            // JavaScript code goes here
            alert('Hello, how are you?');
        </script>
    </body>
    </html>

What’s Happening?

The <script> tag wraps JavaScript code.
The alert() function shows a popup message when the page loads.

Do You Need the `type` Attribute?

HTML4 required a type attribute (like type="text/javascript") to tell the browser what kind of script it was loading.
HTML5 made this optional. If you leave it out, it assumes text/javascript by default.

So, this is valid in HTML5:

<script>
    console.log("This works just fine without type!");
</script>

Where to Place `<script>` Tags

You can place <script> tags anywhere in the HTML, but their position affects when and how they run:

In <head>: Runs before the page content is loaded.
In <body> (at the end): Runs after the page content is loaded, which helps speed up the page load.

Example: Multiple `<script>` Tags

    <!DOCTYPE html>
    <html>
    <head>
    <script>
        alert('Executing JavaScript 1');
    </script>
    </head>
    <body>
    <h1>JavaScript Tutorials</h1>

    <script>
        alert('Executing JavaScript 2');
    </script>

    <p>This page contains multiple script tags.</p>

    <script>
        alert('Executing JavaScript 3');
    </script>
    </body>
    </html>

Execution Order:

Scripts run in the order they appear. The browser will execute:

JavaScript 1
JavaScript 2
JavaScript 3

This is important when your scripts depend on one another.

Using External JavaScript Files

To keep your code organized, it’s a good idea to put JavaScript in separate files with a .js extension and link them using the src attribute.

Example: External Script File

    <!DOCTYPE html>
    <html>
    <head>
    <script src="myScript.js"></script>
    </head>
    <body>
    <h1>JavaScript Tutorials</h1>
    </body>
    </html>

Notes:

The browser loads and runs the file from the specified path.
You can load scripts from your domain or third-party sources (like a CDN).

Attributes for `<script>` Tags

Here’s a table of useful attributes you can add to a <script> tag:

Attribute	Description
`src`	Specifies the external script file location.
`type`	Defines the MIME type (default is `text/javascript`).
`async`	Loads the script asynchronously while the page continues to parse.
`defer`	Delays script execution until the HTML is fully parsed.
`crossorigin`	Handles cross-origin resource sharing.
`referrerpolicy`	Controls what referrer info is sent when fetching the script.
`integrity`	Provides Subresource Integrity (SRI) for security validation.
`nomodule`	Prevents the script from running in modern browsers that support ES6 modules.

`async` vs `defer`

These two attributes are often confused. Here's a quick breakdown:

Attribute	When it runs	Use case
`async`	Loads and executes the script as soon as it’s available	Good for independent scripts (e.g., analytics)
`defer`	Waits to execute until after HTML is parsed	Best for scripts that depend on DOM elements

Summary

The <script> tag is essential for adding JavaScript to your web pages.
You can include code directly or reference an external file.
Where you place your scripts—and how you load them—matters for performance.
Use async and defer wisely to control how scripts load.
You can have multiple <script> tags, and they execute in order unless modified by attributes.