HTML Comments inside Opening Tag of the Element

Solution 1:

HTML comments are not allowed inside tags, start or end, at all.

Solution 2:

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.

Solution 3:

I have kicked off a standard for structuring HTML comments, called 'HTMLDoc', analogous to JSDoc for Javascript, JavaDoc for Java, etc.

You can read about it here: http://usehtmldoc.surge.sh.

It allows documentation at the tag, attribute and value level.

For your code, it might look something like this:

<!--
@tag option
@attribute disabled Used to disable any particular option
@attribute selected Used to pre-select any particular option
@attribute label Used to provide a short version of the content in the option
@attribute value The actual value that will be send to the server. If omitted the content between the option opening and closing tags will be send.
-->

<option disabled = "disabled"
        selected = "selected"
        label = "string"
        value = "value">
Option 1
</option>