The popular technology stack for modern web pages includes HTML, CSS, and JavaScript. To each of them its purpose: CSS to implement the visual part of websites, JavaScript for the functional parts of the code, and HTML unites these and other blocks of code into a single web page.
The latest version of HTML (5th edition) received a number of important updates that expanded its capabilities. It improved work with the DOM, added new tags and the interaction with user scenarios out-of-the-box. Yet implementing complex web programming still requires JavaScript.
The script attribute
HTML is closely related to JavaScript, thus it has special solutions to manage JS code. To link to a JS script with HTML, it has a special attribute - script. This attribute gives the possibility to use the same JS script in different HTML pages. Depending on the location of this attribute in the code, the target script will be called as part of the webpage.
If a webpage requires a third party JS script, this attribute is placed inside the <head> attribute. One example of this could be downloading special fonts or ad modules. In other cases this script can be placed in certain blocks of the page to save user resources. For example, a web page may request a third party captcha service only after a few unsuccessful sign-in tries.
The syntax for loading a JS script from a third party source:
<script src="<address/path>"> </script>Address must be the full path to your JS script instead. Note, that the path must contain the name of the file, including its extension (.js). It’s also recommended to check the availability of your script before changing the webpage source. You can do it just by entering the supposed path in your browser's address bar. In case of normal access, the browser will load your script as plain text.
Instead of the Address, you can use paths to local and hosted web resources. Naturally, it’s recommended to use the first option only during script testing or in pages with special access.
Syntax for downloading from local storage:
<script src= "./scripts/myScript.js"></script>Syntax for downloading from a remote storage (server):
<script src= "https://site.site/scripts/myScript.js">;But if the requested JS script is located in the same folder as the opened HTML file, one can only specify its name instead of the full path to the file:
<script src= "myScript.js"></script>The use of obsolete syntax
You can also find many other recommendations about syntax on the Internet, in particular using the script type attribute. This confusion arose from the changes that were made to HTML and JavaScript as they evolved. Consider the most common ones:
1. Specifying MIME data type
<script
type="text/javascript"
src=" https://site.site/scripts/myScript.js"
></script>The MIME data type attribute is used to designate the type which will be downloaded. This allows you to speed up the “recognition” of a multimedia file for further work. In old versions, it was necessary to specify data types in order for them to work correctly.
In scripts written according to HTML5 standards, all scripts loaded from third party sources will be recognized as JS scripts by default. Accordingly, if you don’t work with legacy code and do not use scripts in other programming languages, then there is no need to specify the script type.
2. Using text/javascript
Sometimes it may be necessary to explicitly specify the MIME data type for the JS script. In this case, don't use text/javascript as this is an outdated practice which is better to avoid in modern code. Instead this, you must use the application/javascript attribute:
<script type= application/javascript' src= "https://site.site/scripts/myScript.js"></script>