Beware gotcha when using HTML comments in Firefox

Just spent far too much time on this little gotcha, hopefully this saves someone a lot of frustration!

Let’s say you have some markup, like so:

<div id="someContainer">
    <span>Some text</span>
</div><!-- someContainer -->

It’s relatively common for people to put a closing comment to help match up closing tags. I personally don’t care for it because it adds bytes to your HTML and a decent IDE should make it clear which opening and closing tags are paired together. Nevertheless, a lot of people do it, including some people I work with.

Where you can get into trouble is if you decide you want to comment out that markup, like this:

<!--
<div id="someContainer">
    <span>Some text</span>
</div><!-- someContainer -->

Both my Eclipse IDE and the Chrome and Safari (WebKit-based) browsers had absolutely no problem with this. But Firefox thinks that a comment open tag has been left open, and it produces mangled HTML as a result!

If you are seeing weird behavior in Firefox, check your HTML comments!