HTML Comments inside Opening Tag of the Element

When I try this

<option disabled = "disabled" <!-- Used to disable any particular option -->
        selected = "selected" <!-- Used to pre-select any particular option -->
        label = "string"      <!-- Used to provide a short version of the content in the option --> 
        value = "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 1
</option>

I am trying to comment the attributes and values inside the openning tag of the element. However this does not work as browsers (tested on IE9, FF4.01, GG11, AF5 and Opera11) treat everything followed after the disabled="disabled" as either comment or content.

Are HTMl Comments not allowed inside the opening tag of elements?

Solution

Workarounds for comments inside HTML tags

HTML does not allow you to use  to mark comments inside a tag. However there are workarounds for the main use cases:

adding a comment to explain why you are doing something which is not obvious
temporarily not setting an attribute, style or class, during debugging

To add a comment within an HTML tag

You can just make up an attribute name that you use just to comment to yourself. For example:

<div comment="Name and Id">
   ... 
</div>

The major downside is that these 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 decide to use to indicate temporary disabling. For example, to disable an attribute called option, you might choose to do this:

<div option="big">
   ... 
</div>

becomes

<div DISABLED-option="big">
   ... 
</div>

Obviously don't do this if you actually might need a real 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 just add any prefix or suffix to disable a class or style. To help teh reader guess what you mean, I suggest the prefix DISABLED-.

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.