What's the correct way to write comments in attributes such as 'style' and 'onclick'?

Question

The right way to write comments in HTML is: <!-- Comment -->. For Javascript, the right way to write comments is // Comment or /* Comment */, while for CSS, comments are written as /* Comment */.

What is the right way to write comments in style and onclick attributes of HTML elements?

---

For example, which is right? This:

<span style='color: red; <!-- background-color: green; -->'>Test</span>

Or this:

<span style='color: red; /* background-color: green; */'>Test</span>

Tested in a fiddle, both codes produced the same result of the word "Test" with a red color and no background color.

---

Also, which is correct? This:

<span onclick="alert('1'); // alert('2');">Click me!</span>  

this:

<span onclick="alert('1'); /* alert('2'); */">Click me!</span>

Or this:

<span onclick="alert('1'); <!-- alert('2'); -->">Click me!</span>

Because, according to this fiddle, all 3 elements produce an alert saying "1" when clicked.

I would appreciate your answer.

Answer 1

The syntax of the style attribute is essentially the same as CSS files. So the comment syntax is the same as in CSS, which is /* ... */

The syntax of onEVENT attributes is Javascript. Javascript has two types of comments: // that comments until the end of the line, and /* ... */ that encloses comments. If the onEVENT attribute is a single line, if you use // it will comment the rest of the attribute. If you want to end the comment earlier, use /* ... */. You can also have newlines in an onEVENT attribute; then the // comment will only last to the newline.

Example:

<div id="foo" onclick="alert('foo'); // comment */; alert('bar');">
    // comment
</div>
<div id="bar" onclick="alert('foo'); /* comment */ alert('bar');">
    /* */ comment
</div>
<div id="foobar" onclick="alert('foo'); // comment
alert('bar')">
    // comment multi-line
</div>

In // comment, the second alert() is commented out. In /* */ comment, both alerts execute. Also, both alerts execute in // comment multi-line. Amazingly, the SO code highlighter gets this right!

FIDDLE