Take it easy on me. I am just learning HTML.
Accroding to http://www.w3.org/TR/html-markup/syntax.html#comments and many other sites I've seen such as this http://www.w3schools.com/tags/tag_comment.asp
they say an HTML comment is <!-- text --> with no space between ! and the next dash.
Yet, I show below that only when I write <! -- test --> is the stuff inside be actually gets ignored. Notice the space added between <! and --
Here is the HTML code
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!-- td {border: 1px solid gray;} -->
</style>
</head>
<body>
<table>
<tr> <td> test </td> </tr>
</table>
</body>
</html>
Now before you run it, should the table have border or not?
If the stuff in text/css is really commented out, then the table should not have border, right? But it does. I tried this on chrome Version 24.0.1312.52 under linux mint 14, and also firefox 18.0
Now when I change the line to
<! -- td {border: 1px solid gray;} -->
Notice the extra space now. Then the table shows up with no border as expected. The same happens when I actually delete the whole line:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr> <td> test </td> </tr>
</table>
</body>
</html>
question is: Is the comment <!-- text --> or is it <! -- text --> ?
CSS doesn't accept HTML <!-- comment here --> comments. Instead CSS uses /* comment */ to comment lines. Try that instead.
The string <! -- does not comment out anything. Instead, in CSS it is a syntax error, and the CSS error processing rules imply in this case that all of the style sheet is ignored.
The string <!-- does not start a comment either, but by CSS comment rules, it (as well as -->) is permitted and ignored (skipped) in certain contexts. Thus, the style sheet
<!-- td {border: 1px solid gray;} -->
is taken as
{border: 1px solid gray;}
You can check this out using the W3C CSS Validator. In the first case, with the space, an error is reported, and no valid CSS rules are reported. In the second case, no error is reported, and the rule is shown as valid.
In CSS, a comment always starts with /* and ends with */.
The reason for the special rules for <!-- and --> is that very long ago (and we are talking about the time when Netscape 1 was still in use), some browsers did not recognize the style element at all. This implied that they ignored the <style> and </style> tags and processed the content between them as if it were normal HTML content. This would have caused the style sheet to be displayed inside the page on such browsers. To prevent this, to “hide the style sheet”, the style sheet was wrapped between the HTML comment delimiters. Old browsers then simply ignored the content of the style element. But then a special rule had to be added to CSS spec to allow the delimiters.
This is ancient history, but old habits prevail and are even copied from other people’s code without understanding what they mean. There has been no reason to “hide the style sheet” for a long, long time, and the trick has now become a potential risk (due to possible interference with XHTML rules or to people’s confusion and typing errors).
So, never use <!-- (or <! --) in CSS.
I've seen people use <!-- --> in CSS style block for compatibility purpose.
In this case, old browsers that don't support CSS will comment it out to avoid errors.
<style type="text/css">
<!-- td {border: 1px solid gray;} -->
</style>
will be interpreted as
<style type="text/css">
</style>
by old browsers that don't support CSS. This way these browsers avoid potential errors.
In modern browsers however, <!-- --> inside CSS style block will be ignored.
<style type="text/css">
<!-- td {border: 1px solid gray;} -->
</style>
will be interpreted as
<style type="text/css">
td {border: 1px solid gray;}
</style>
by browsers with CSS support.
