The script tag is one of the most fundamental elements in any web page. It allows developers to include dynamic JavaScript code that powers interactivity, functionality, and more.
However, as JavaScript has evolved, so too has the script tag gained new capabilities. One important attribute that developers may not be fully aware of is "type".
The type attribute specifies the format or type of script code contained within the script element. This provides important context to browsers on how the code should be handled and executed.
In the past, the default type of "text/javascript" was sufficient for most uses. But as JavaScript modules, import maps, and other newer script types have emerged, being explicit about type has become essential.
Some common types and their meanings:
"text/javascript" - This is the default type for classic JavaScript scripts. It indicates standard JavaScript code.
"module" - Indicates the script contains JavaScript module code. Modules allow JavaScript code to be split across multiple files that can import parts from each other.
"importmap" - Specifies the script contains an import map, which defines how module specifiers are resolved to actual module scripts.
"speculation" - Contains speculation rules that allow browsers to speculatively parse and compile scripts to improve performance.
"data" - Indicates the script contains raw data rather than executable code. Used for embedding non-code resources like JSON data.
Specifying the type helps the browser parse, compile, and execute the script properly based on its format. For example, classic scripts are executed immediately while module scripts are deferred until all dependencies are resolved. The type attribute provides metadata to allow correct handling.
Thank you for reading! If you found this article helpful, please give it a thumbs up. You can find me on Twitter or LinkedIn Looking forward to connecting with you!
Top comments (0)