Why don’t self-closing script elements work ?
Last Updated :
10 Apr, 2023
In HTML, the <script> tag is used to include scripts or code on a web page. Scripts can be used to add interactivity to a webpage, such as dynamically updating content or performing calculations. When including a script on a webpage, it is important to ensure that the code is properly formatted and that there are no syntax errors. One common mistake that developers make is attempting to use a self-closing <script> tag, such as <script />. However, self-closing script elements do not work and can cause unexpected issues.
So let us understand the concept using some code examples.
Example 1: Filename: index.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self-closing script element</title>
</head>
<body>
<h1>Hello World!</h1>
<button onclick="myFunction()">Click me</button>
<script src="index.js" />
</body>
</html>
|
Filename: index.js
Javascript
function myFunction() {
window.alert("Welcome to GeeksforGeeks");
}
|
In the above example, self-closing script elements do not work in HTML. This is because the contents of the <script> tag is treated as text by the browser until the closing </script> tag is encountered. If the tag is self-closing, the browser does not know where the script ends and will not execute it.
So, if you use a self-closing <script> tag, the script will not work on any file, not just the first file. To fix this issue, you should use a standard <script> tag with a closing tag when including scripts on a webpage. This will ensure that the script is properly interpreted by the browser and executed as intended.
Output:
Example 2: Filename: index.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Working script element</title>
<script src="index.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<button onclick="myFunction()">Click me</button>
</body>
</html>
|
Filename: index.js
Javascript
function myFunction() {
window.alert("Welcome to GeeksforGeeks");
}
|
In this example the script part will work because we are not using a self-closing tag instead we are using standard <script> tag with a closing tag when including scripts on a webpage.
Output:
The reason that self-closing script tags do not work is because the contents of the <script> tag are treated as text by the browser until the closing </script> tag is encountered. If the tag is self-closing, the browser does not know where the script ends and will not execute it. This behaviour is consistent with the HTML specification, which states that the <script> tag should not be self-closing.
It is worth noting that some older browsers may attempt to parse self-closing script tags as valid script tags, but this behaviour is not reliable and should not be relied upon. Additionally, some online validators may not flag self-closing script tags as errors, but this does not mean that they are valid.
To avoid issues with self-closing script tags, it is important to always use a standard <script> tag with a closing tag when including scripts on a webpage. This will ensure that the script is properly interpreted by the browser and executed as intended.
In summary, self-closing script elements do not work in HTML because the browser does not know where the script ends and will not execute it. Developers should always use a standard <script> tag with a closing tag when including scripts on a webpage to avoid unexpected issues.
Share your thoughts in the comments
Please Login to comment...