Type value and its meaning in the tag in js <script>

In the script tag in HTML, the type attribute is used to specify the MIME type of the script, that is, to tell the browser how to interpret and process the content of the script. Commonly used type values and their meanings are as follows:

1. type=“text/javascript”

meaning: Specifies that the script is of JavaScript type. This was the standard way in the early days, and modern browsers would handle the contents in script tags as JavaScript by default, so explicit specifications are no longer required.

Example

<script type="text/javascript">
    ("This is a JavaScript script.");
</script>

2. type=“module”

meaning: Specifies that the script is a JavaScript module. Modules can import and export other modules and are executed in strict mode by default. When using modules, the browser will handle each module independently, which can avoid global naming conflicts.

Features:

You can use the import and export syntax.
Supports and dynamic imports (import()).
The code in the module runs automatically in strict mode

Example:

<script type="module">
    import { myFunction } from './';
    myFunction();
</script>

=“application/javascript”

meaning:This is another valid MIME type for text/javascript, also used to specify JavaScript types. Although technically correct, it is rarely used in practice.

Example

<script type="application/javascript">
    ("This is a JavaScript script.");
</script>

4. type=“application/json”

meaning: Used to contain JSON data. The browser does not execute the contents in the script tag, but can use the data through JavaScript code. Usually used to embed static data within a page.

&lt;script type="application/json" &gt;
    {
        "name": "John",
        "age": 30
    }
&lt;/script&gt;
&lt;script&gt;
    const dataElement = ('myData');
    const jsonData = ();
    (); // Output "John"&lt;/script&gt;

5. type=“text/babel”

meaning: Usually used in JSX or ES6+ code, indicating that these codes need to be processed using a Babel translator. The browser itself does not recognize scripts of this type and usually needs to be converted into compatible JavaScript code through Babel during development.Example:

<script type="text/babel">
    const element = <h1>Hello, world!</h1>;
    (element, ('root'));
</script>

6. type=“text/coffeescript”

meaning: Used for CoffeeScript code. Browsers cannot execute CoffeeScript directly, and usually require a preprocessor to convert it into JavaScript.
Example

<script type="text/coffeescript">
    square = (x) -> x * x
    (square(3))
</script>

7. type=“text/plain”

meaning:The browser will process the content as plain text, not scripts. This means that the content will not be executed or parsed.
Example:

<script type="text/plain">
    ("This will not be executed as JavaScript.");
</script>

8. type=“application/ld+json”

meaning:Used to embed JSON-LD (JavaScript Object Notation for Linked Data) data, usually used for structured data tags (such as providing additional metadata to search engines)
Example:

<script type="application/ld+json">
{
    "@context": "",
    "@type": "Person",
    "name": "John Doe",
    "jobTitle": "Software Engineer",
    "url": ""
}
</script>

9. type=“text/x-template”

meaning:Used to define JavaScript templates (such as templates). The browser does not parse and execute content, and usually gets and uses templates in JavaScript code.
Example:

<script type="text/x-template" >
    <div>
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
    </div>
</script>

10. Omit the type attribute

meaning:If the type attribute is omitted, the browser will handle it as text/javascript by default. This is also the most commonly used method in modern web development.
Example:

<script>
    ("This is JavaScript by default.");
</script>

Summarize
Different type values are suitable for different scenarios and requirements. type="module" and type="text/javascript" are the most commonly used types for JavaScript. And application/json and application/ld+json are used for specific types of data embedding, and text/x-template is often used in front-end template engines.

This is the article about the type value and its meaning in the js tag in the <script> tag. For more related js ＜script> tag type value content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!