HTML Comments inside Opening Tag of the Element
HtmlTagsCommentsHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
HTML comments are not allowed inside tags, start or end, at all.
Solution 2 - Html
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 - Html
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>
Solution 4 - Html
No.
According to HTML comment tag those comments are tags like any other HTML-tag and thus can not be
placed inside start or end tags.
Solution 5 - Html
We cannot use comments inside HTML tags, but we can use comments after or before HTML tags.
Solution 6 - Html
You can strikethrough the attributes to disable them and also comment out in quotes.
Ex.:
<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"
"--You can erase the attribute to disable it:"
*value = "value"
-class = "myOptions"
"--Disabling doesn't work with any characters:"
//id = "myOption" "--This won't disable it"
>Option 1</option>