Workarounds for comments inside HTML tags
HTML does not allow you to use <!--
and -->
to mark comments inside a tag. However there are workarounds for the main use cases.
To add a comment within an HTML tag
You can just make up an attribute that you use just to comment to yourself. For example:
<div comment="Name and Id">
...
</div>
The major downside is that the comments will not be stripped out during minifying, so:
- it will take up space in your final HTML document served to the user
- if the user clicks
View source
they will be able to read your comments
To temporarily disable an attribute
Just rename the attribute with a prefix that you know to indicate temporary disabling. For example, to disable an attribute called option
:
<div option="big">
...
</div>
becomes
<div DISABLED-option="big">
...
</div>
Obviously don't do this if there is actually a valid attribute called disabled-option
.
To temporarily disable a class or style
Since there is no error message if you use a class or style that doesn't exist, you can do this to disable a class or style:
For example, to disable a class called tall
while preserving a class called highlighted
:
<div class="highlighted tall">
...
</div>
becomes
<div class="highlighted DISABLED-tall">
...
</div>
Similarly, to disable the color
style while preserving the font-weight
style:
<div style="font-weight:700; color:red;">
...
</div>
becomes
<div style="font-weight:700; DISABLED-color:red;">
...
</div>
Again, remember that these won't be stripped out during minifying so they will take up space in the file the end user receives, and will be viewable with View source
.
<noscript class="comment">comment</noscript>
which does not have limitation of<!-- -->
and then before the document gets to parsing it, have javascript just set it's outerHTML to an empty string. noscript is preferred because it is the only standard tag other than script that is meaningless enough for this to make sense with.