The <script> tag
This is easy, right?
<script> tag Attributes
The <script> tag comes with a couple of attributes. These attributes are not used nowadays, but you should know the work of these attributes. In the previous versions of HTML, it was mandatory to use these attributes but these are deprecated now. You should know the use of these attributes because there are good chances that you might deal with old scripts in your developer career.
The type attribute: The type attribute specifies the Internet media type (formerly known as MIME type) of a script. You can define any MIME type as an value to type attributes. Most commonly used values are
type attribute is also being used with other tags like
embed. For example, If we want to use CSS in our HTML page, we will include type attribut as
The HTML4 (old standard of HTML) required
script tag to have
type attribute, but now the latest version HTML5 doesn't demand it. Modern version of HTML (HTML5) assumes this
type attribute by default as
The language attribute: The language tag has been deprecated for a long time. It is no longer used in modern scripts. This attribute was used to specify the scripting language that is being used.
What and Why External Scripts?
External scripts are those scripts which are not embedded in HTML file and are kept in a separate file. It's a good practice to large and common scripts in a separate file, it makes your HTML code shorter, readable and much much easy to edit.
Suppose that there are 5 pages in a website that needs same scripts. Then instead of writing the same code in 5 different pages, again and again, we can write the script in a separate file and attach this single script file to multiple HTML pages. Separating large or common scripts makes your page load faster, increases the readability, saves a lot of time and makes code easy to edit.
How it helps loading page faster?
When you have external JS files – the browser usually caches these files when you open that page first time. Hence the next time you open the site, it is already there on client side.
Let's see how to attach script files to our HTML. Script tags use
src attribute for attaching script files.
src attribute is used to specify link or path to our script file. You can think of this
src attribute as a URL. Like a URL,
src holds the path of the script file.
<script src = "public/js/frontend/main.js"></script>
"public/js/frontend/main.js" is a path to the script file holding the scripts. It's an absolute path to our script file.
If the script file is located in the same folder as in which the HTML file is located. Then we can attach the script file by relative path.
<script src = "main.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/cjs/react.development.js"><script>
It is also possible to include multiple external scripts. We can import as many external scripts as we want.
// Import as many scripts you want. <script src = "main.js"></script> <script src = "render.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/cjs/react.development.js"></script>
That's all for this topic. If you guys have any suggestions or queries, feel free to drop a comment. We would be happy to add that in our post. You can also contribute your articles by creating contributor account here.
Happy Learning 🙂
About the Author
Comments and QueriesIf you want someone to read your code, please put the code inside <pre><code> and </code></pre> tags. For example:
<pre><code class="java"> String foo = "bar"; </code></pre>For more information on supported HTML tags in disqus comment, click here.