HTML Scripts
A script is a small piece of code embedded in web pages to make them dynamic and interactive. For example, with scripts, you can create a pop-up box message, a dropdown menu, etc. JavaScript is the most common scripting language used on websites. You can also use the <script> element with other languages or types (e.g., module type or text/javascript MIME type).
How to Add Scripts
The <script> element is used to embed script or reference to an executable script within an HTML document. Scripts are often placed in the <head> or at the end of the <body> element. To prevent blocking page rendering, use the defer or async attribute when placing scripts in the head. The defer attribute downloads the script in parallel with HTML parsing and executes it after parsing is complete, while async downloads the script in parallel and pauses HTML parsing only when the script is ready to execute. However, there is no restriction, and the script could be placed anywhere in the document.
If you need the same scripts to be available for many web pages, then you should place scripts into a separate file, then call them from the HTML document.
You can insert the following piece of code with the <script> tag into your HTML code:
HTML Scripts
<script src="scripts.js"></script>Note: In HTML5, the type attribute is optional (defaulting to text/javascript) and is considered deprecated for JavaScript scripts.
How to Trigger Scripts
You can specify whether to make a script run automatically (as soon as the page loads) or after the user has done something (like hovering over or clicking a link). If you want the script to run if the user performs any action (called an event), then you should use event handlers to let the browser know which event is responsible for triggering the script.
Event handlers can be specified as attributes within HTML tags, or attached via JavaScript using methods like addEventListener.
Example of the HTML <script> tag with an event handler:
Event Handler Example — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>The <noscript> element
Though many modern browsers support JavaScript, some older browsers cannot run JavaScript code, and users may also have JavaScript disabled in their browsers. To provide alternative information for non-JavaScript browsers or browsers with JavaScript disabled, use the <noscript> tag. The contents of this tag are displayed to the user only when JavaScript is disabled or when the browser doesn’t support JavaScript.
Example of the HTML <noscript> tag:
My first JavaScript example! — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<p id="output"></p>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>In case JavaScript is disabled or the browser doesn't support it, the code will display the content inside the noscript element.</p>
</body>
</html>Result
Practice
Where can <script> tag be placed in HTML?