ReactJS
What Does the type Attribute Do in a <script> Tag?
Introduction
JavaScript code is commonly embedded or referenced via the <script> HTML element, which is used to incorporate executable code or data. Other languages, including JSON and WebGL's GLSL shader programming language, can also be utilised with the <script> element.
The <script> element's type attribute specifies the kind of script it represents, such as a data block, import map, JavaScript module, traditional script or speculation rules.
Value
The value of this attribute indicates the type of data represented by the script, and will be one of the following:
Attribute is not set (default), an empty string, or a JavaScript MIME type
Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are listed in the IANA media types specification.
importmap
This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules.
module
This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The charset and defer attributes have no effect. For information on using modules, see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.
1. Default JavaScript (text/javascript)
In HTML5, JavaScript is the default scripting language, so the type attribute is optional for regular JavaScript.
Example with type:
<script type="text/javascript"> console.log("Hello, world!"); </script>
Purpose: Runs regular JavaScript.
Modern browsers: Assume text/javascript by default, making the type attribute unnecessary.
2. ES6 Modules (type="module")
You can utilize ES6 features like import and export by using the type="module" tag.
Example:
<script type="module"> import { greet } from './module.js'; greet();</script>
Benefits and Drawback
- Supports import and export statements.
- Runs in strict mode by default.
- Has its own scope, preventing variable conflicts.
Drawback:
- Modules are deferred by default, meaning they load after the HTML document is parsed.
Conclusion
The type attribute of the <script> element tells you what sort of script is being executed.Although it used to be required, the attribute is now optional for normal JavaScript as HTML5 treats text/javascript as the default.
- Use type="module" for ES6 modules to enable import and export functionality.
- Use type="application/json" for embedding non-executable data.
- Avoid deprecated types like text/ecmascript or text/vbscript.
In practice, omit the type attribute for regular JavaScript unless working with modules or custom data formats.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.
React