Here is an example of a script file called 'myscript.js' linked into a document 'head'.
<head> <script src='myscript.js'/> </head>
The script 'type' attribute identifies the Internet media type (formerly known as the MIME type) of the script file. In HTML5, this attribute is no longer necessary. You may wish to include it to support pre-HTML5 browsers however. I tend to include it out of habit, but this is a a habit I am getting away from, mainly to keep HTML documents simpler.
File paths always cause me problems. So here is some quick guidance on how browsers use paths to locate script files.
These are the most straightforward. Any page in the site will look at this exact location to load the js file.
The browser expects this file to live in the same folder as the current page.
The browser expects this file in the root of the current web site
<head> <script src='myscript.js' async/> </head>
Should async be added to every script? Yes, if the page can be displayed before the script has finished.
The async attribute is specific to HTML5 and is a minimized version of the fully specified async='async'
Adding defer to a script element tells the browser to load the script but execute it after the page has been loaded. It used to be common practice to place script tags at the end of HTML documents to achieve this result.
<head> <script src='myscript.js' defer/> </head>
While scripts at the end of a document don't execute until the document DOM is loaded, that also aren't loaded either. The 'defer' attribute allows the browser to load the JS file, and defer the execution, instead of deferring the script load and the execution.
Async and Defer are only valid for external scripts. They are ignored if there is no 'src' attribute. Async and Defer are only relevant to script tags specified in the document HEAD. If you use both async and defer together, async will take precedence. I believe specifying both is a mistake because you will get unpredictable results across browsers, depending on what functionality is supported, and your code is confusing as these attributes have different intentions.
var script = document.createElement('script'); script.src = 'myscript.js'; document.body.append(script);
By default, dynamic scripts are loaded asynchronously. This can be changed by setting the 'async' attribute on the script element to false.
Here is some additional information on async and defer.
And, a post I wrote on 7 Free XML validation tools that can be used to validate your HTML documents - check it out.