https://smitop.com/post/js-html-comments/

Smitop * About * Uses * Accounts

HTML comments work in JavaScript too

By # Smitop * Feb 23, 2022

Here's some obscure trivia about JavaScript: you can use HTML
comments in JavaScript. Not just in <script> tags: you can use them
in included standalone files, and even in Node.js and Deno. Syntax
highlighters, on the other hand, do not have great support for this
(the only one I've seen get this completely right is the one in the
Firefox DevTools), so these snippets will show a bit weirdly on my
blog. Here's what that looks like:

// below statement logs 1
console.log(1); <!-- log 1 -->
<!-- above statement logs 1 -->


This is entirely a historical relic, and using this for anything
other than experimentation is a Bad Idea. The original intent was to
make it so that browsers without JavaScript support would ignore
script blocks that were surrounded with HTML comments, instead of
treating them as text (browsers treat unknown elements as <span>s).
As such, HTML comments inside JavaScript were ignored. Such code
blocks might look like this:

<script>
  <!--
    // browsers without JavaScript support think this is all in a big comment,
    // and so don't render this as plain text
    alert("Hi!");
  -->
</script>


While there are no browsers made in the past two decades that display
the contents of script tags (even when JavaScript is disabled), this
behavior can't be removed from browsers since some websites rely on
this. Eventually this behavior was added to the ECMAScript spec, as a
legacy behavior that should only be implemented in browser-like
environments. I'm not sure why Node and Deno support this: maybe V8
doesn't have any option to disable this?

The spec allows for a lot of interesting comment behavior. We can use
<!-- the same as // for a line comment, but --> only works at the
start of a line. Unlike actual HTML comments, which are block
comments, HTML-in-JS comments are always line comments.

// Logs 1
console.log(1); // Logs 1

<!-- Logs 2
console.log(3); <!-- Logs 2

--> Logs 3
console.log(3);


The reason that --> is only allowed at the start of a line is because
otherwise it would break the "goes to" operator (decrement followed
by greater than).

Some more useful comment-related trivia I learned is that a shebang
(#!) at the beginning of a file is also treated as a comment, even in
(modern) web browsers.

---------------------------------------------------------------------
If you are interested in my work, you can email notme@smitop.com or
follow me on Twitter, YouTube, and elsewhere.

Related

Blog post

How to use private JS class variables

September 30, 2019
A short tutorial on using private class variables in JavaScript.
(continue reading)
Blog post

Accidentally causing a Switch rumor

July 31, 2021
Nintendo's website wasn't updated because of a big update, but
because I asked them to. (continue reading)
Blog post

Interesting things in Nintendo's OSS code

March 25, 2021
The Nintendo Switch has some open source parts, and Nintendo very
kindly allows the source code for these parts to be viewed. (continue
reading)
Blog post

Writing a Boolean expression parser in Rust

March 15, 2021
Let's write some Rust to parse and evaluate Boolean expressions.
(continue reading)
Blog post

TagTime Web: my stochastic time tracking web app

August 26, 2020
It randomly samples what you are doing (continue reading)
Tags: programming, javascript,
Previous: Zopfli is *really* good at compressing PNGs
This work is licensed under a Creative Commons Attribution-ShareAlike
4.0 International License.
[hello]