Can comments appear before the DOCTYPE declaration?
I would like to place a comment (<!-- this --> style) at the very top of my HTML code, preceding the DOCTYPE declaration. Does this conform to the standards? Is it supported by the major browsers? Are there any pitfalls in doing this?
It is fully valid to do
<!-- this, -->
<!DOCTYPE html>
However, it brings all versions of IE into quirks-mode (unless it is forced into no-quirks mode — see the Gotchas section below). The simplest is to move the comment below the DOCTYPE.
<!DOCTYPE html>
<!-- this, -->
But another way is to “upgrade” the comment into a suitable conditional comment, such as this:
<!--[if !IE]> this <![endif]-->
<!DOCTYPE html>
Explanation: a conditional comment does not count as a comment, in IE's world.
Alternative syntax: To forget/remember that conditional comments are a Microsoft intrusion into the HTML standard, one could for instance do
<!--[if anybrowser]> this <![endif]-->
<!DOCTYPE html>
Likewise, to target IE in particular, one could do
<!--[if !anybrowser]> this <![endif]-->
<!DOCTYPE html>
Gotchas
A comment inside a conditional comment will bring IE into quirks-mode if IE sees it (that is: if one uses an [if IE] condition, or an equivalent to [if IE] — such as the [if !anybrowser] condition that I mentioned above.). So, for example, this would bring IE in quirks-mode:
<![if IE]><!-- this --><![endif]>
<!DOCTYPE html>
As would
<!--[if IE]><!--><!-- this <![endif]-->
<!DOCTYPE html>
and many other variants. Whereas for example
<!--[if IE]><!DOCTYPE html><!--><!-- this <![endif]-->
<!DOCTYPE html>
would not cause quirks-mode, because here the conditional comment has a DOCTYPE before any other content, and thus IE considers that the first content of the page is a DOCTYPE.
Finally, the newest IE versions, IE8 and IE9, can be forced to standards-mode (and to quirks-mode as well) by the use of another Microsoft invention — the x-ua-compatible directive. See http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx In that case, then
<!-- this -->
<!DOCTYPE html>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=8" ><![endif]-->
will force IE8 and IE9 into no-quirks mode, while IE6 and IE7 will remain in quirks mode. Whereas, in contrast, this
<!--[if gte IE 8]><meta http-equiv="X-UA-Compatible" content="IE=8" ><![endif]-->
<!DOCTYPE html>
would force IE8 and IE9 into standards mode, despite that the content of the conditional comment does not start with a DOCTYPE. And IE6 and IE7 will also remain in no-quirks mode since the conditional comment doesn't target them.
Writing the <!DOCTYPE> first is certainly best practice.
I remember strange problems a long, long time ago where some browser (probably IE6) ignored a <!DOCTYPE> because there was something seemingly innocent before it - I think just whitespace, but maybe it was a comment. In any case, it was a horrible, horrible bug to have to track down, and there's certainly never any good reason to have comments or whitespace before the <!DOCTYPE>.
Writing the <!DOCTYPE> first is, I'd say, just something experienced web developers do to avoid horrible, elusive bugs.
While it's acceptable per the standard I believe, you definately want to avoid it, as it'll throw IE into quirks mode.
(See Triggering different rendering modes)