Explain Codes LogoExplain Codes Logo

Are HTML comments inside script tags a best practice?

html
best-practices
clean-code
javascript
Nikita BarsukovbyNikita Barsukov·Jan 29, 2025
TLDR

No, incorporating HTML comments (<!-- -->) within <script> tags is antiquated and should be avoided. It is advisable to utilize JavaScript comments (// or /* */) for annotation. HTML comments can cause misinterpretation and code errors. Here's a correct example:

// Using this for a clever single-line comment /* Use this for masterfully crafted multi-line comments */

Maintaining this approach is key to clean and error-free scripting.

Diving into history: how it all began

HTML comment tags were historically used to hide JavaScript code from browsers that didn't support it. It was a time of dinosaurs and Netscape Navigator. However, the web has evolved, and modern browsers are now fully capable of recognizing <script> tags and their content. Wrapping JavaScript code within HTML comments is now as unnecessary as dial-up internet.

Modern code: embracing cleanliness

As a guardian of the web, it's important to keep your code clean, readable, and maintainable. Modern browsers are smart, they ignore <!-- and --> at the beginning and end of <script> blocks. Obfuscating JavaScript code with HTML comments is contrary to the philosophy of clean code, and can create potential errors, especially in XHTML documents where incorrect closing of the comment can create unforeseen bugs.

Being forward-thinking: ensuring compatibility and avoiding errors

Rather than adhering to outdated practices for compatibility's sake, it's advised to adopt modern solutions. Tools such as polyfills and transpilation provide compatibility support across diverse browsers. Utilize eslint or jshint for early error detection in the development process, ensuring robust and error-free JavaScript execution.

Case against HTML comments in script tags

HTML comments inside <script> tags were applied to ensure browser compatibility at a time when browsers were not script-friendly. However, with improved browser technology and developments in ECMAScript, this practice is no longer required or advised. Here's why:

  1. Compatibility: Modern browsers are skillfully designed to handle <script> tags without the need for code hiding.
  2. Potential errors: An incorrectly closed HTML comment may result in syntax errors or faulty execution of JavaScript.
  3. Readability: Clean and concise code is paramount. HTML comments within scripts add clutter and obfuscate the code's purpose.
  4. Best practices: Use JavaScript's native commenting (//, /* */) to uphold code cleanliness and standard conventions.

Proactive code maintenance and readability

The code you write today is not just for your current self but for future you, your team, and open-source community, if applicable. Adopting universally understandable best practices is essential for script longevity.

Code for the eyes

Every line of code you write may be read multiple times. Avoid redundant HTML comments that might confuse future readers.

Future-proofing your code

Treat your future self and fellow coders by using native JavaScript comments. This will make revisiting or refactoring code a smoother experience.

Modern toolkit to your rescue

Explore modern linting tools and code editors that flag bad practices automatically. Use comment blocks for explaining logic or convoluted algorithms but avoid wrapping scripts in HTML comments.