Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Are HTML comments inside script tags a best practice?
Before trying to understand whether HTML comments inside script tags is a best practice or not, let us first discuss how comments work in HTML and the different ways to use them.
Comments are helpful for understanding code, leaving reminders, and providing explanations. They also help in disabling statements temporarily when testing or working on a new feature. The browser ignores everything inside a comment tag and does not render it on the page.
HTML Comment Syntax
Following is the basic syntax for writing an HTML comment −
<!-- Your comment text here -->
The comment starts with <!-- and ends with -->. Everything between these markers is ignored by the browser.
Note − There should be no space within the opening tag itself. For example, < !-- is not valid. However, any number of spaces can be included inside the comment body.
Single-Line Comment
A single-line comment is used to annotate a single statement or a short note. We insert these comments as reminders about what a particular section of code does.
Example
Following example shows how to use a single-line comment in HTML −
<html> <head> <title>Single Line Comment</title> </head> <body style="font-family: arial, sans-serif; padding: 10px;"> <!-- This paragraph displays the website name --> <p>TutorialsPoint Website</p> </body> </html>
The comment is not displayed on the page. Only the paragraph text is rendered −
TutorialsPoint Website
Multi-Line Comment
Multiple lines can be spanned using multi-line comments. This is helpful for explaining complex code blocks or temporarily hiding large sections.
Example
Following example shows how to use a multi-line comment in HTML −
<html>
<head>
<title>Multi-Line Comment</title>
</head>
<body style="font-family: arial, sans-serif; padding: 10px;">
<!--
TutorialsPoint is a technical content website
where we can find all technical related information
with content as well as videos.
-->
<p>TutorialsPoint WEBSITE</p>
</body>
</html>
The multi-line comment is completely hidden from the output. Only the paragraph is displayed −
TutorialsPoint WEBSITE
Using Comments to Quickly Disable Code
We can wrap any HTML block inside comment tags to temporarily disable it. This is useful when tracking errors or preventing certain elements from rendering. The code can be restored easily by removing the comment tags.
Example
In this example, the second image is commented out and will not be displayed −
<html> <head> <title>Disable Code with Comments</title> </head> <body style="font-family: arial, sans-serif; padding: 10px;"> <p><b>Images related to Courses</b></p> <img src="/images/ncert-books-class-6-maths_icon.svg" height="150" width="150"> <!-- Hiding this image for now <img src="/images/pic2.jpg" height="150" width="150"> --> <img src="/images/statistics_icon.svg" height="150" width="150"> </body> </html>
Only the first and third images are displayed. The second image is hidden inside the comment block.
HTML Comments Inside Script Tags
In the early days of the web, some browsers did not support JavaScript. To prevent those browsers from displaying the script code as plain text, developers wrapped JavaScript inside HTML comments. The comment starts with <!-- and ends with //-->, where // is a JavaScript single-line comment that prevents the closing tag from being treated as a JS error.
Syntax
Following is the syntax for hiding scripts using HTML comments −
<script type="text/javascript">
<!--
// JavaScript code here
//-->
</script>
Example
Following example demonstrates wrapping JavaScript inside HTML comment tags −
<html>
<head>
<title>Script with HTML Comment</title>
</head>
<body style="font-family: arial, sans-serif; padding: 10px;">
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
The output of the above code is −
Hello World!
Is It a Best Practice?
No, wrapping JavaScript inside HTML comments is no longer a best practice. This technique was relevant in the 1990s when browsers like Netscape 1.0 and early versions of Internet Explorer did not understand the <script> tag. Today, every modern browser fully supports JavaScript, making this approach unnecessary.
Using HTML comments inside script tags can even cause issues in XHTML documents, where comment content may be stripped entirely. The modern approach is to simply write JavaScript directly inside the <script> tag without any comment wrappers.
Example − Modern Approach (Recommended)
Following example shows the correct modern way to include JavaScript without HTML comments −
<html>
<head>
<title>Modern Script Tag Usage</title>
</head>
<body style="font-family: arial, sans-serif; padding: 10px;">
<p id="output"></p>
<script type="text/javascript">
document.getElementById("output").textContent = "Hello from JavaScript!";
</script>
</body>
</html>
The output of the above code is −
Hello from JavaScript!
Example − Using External Script File
For better code organization, you can also place JavaScript in an external file using the src attribute −
<script type="text/javascript" src="/js/app.js"></script>
This keeps the HTML clean and allows the browser to cache the script file separately.
Conclusion
HTML comments are useful for annotating code, leaving notes, and temporarily disabling elements. However, placing HTML comments inside <script> tags to hide JavaScript from old browsers is an outdated practice. All modern browsers support JavaScript natively, so you should write your scripts directly without any comment wrappers.
2K+ Views
