以下のHTMLがあります。

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script>
    //var s = "<!--<script>";
  </script>
</head>
<body>
  <h1>hello</h1>
</body>
</html>

ここで、"<!--<script>"は単なるJavaScript文字列なので、scriptタグの外側には影響を及ぼさない…と思っていたのですが、実際には

http://codepen.io/anon/pen/rVWeqz

のように、本来表示されるはずの「hello」が表示されません。
(<!--や<script>が単体の場合には再現せず、必ずコメント開始からscriptタグに続く必要があるようです)

私の確認したすべてのブラウザ(IE11, Chrome, Firefox)で同じ挙動をしたので、これがHTMLの仕様なのだと思いますが、具体的にはどのような仕様なのでしょう?

--以下追記 2015/05/25 23:56--

いただいた回答に合わせて、追加の疑問点が明確化されたので追記します。

(1) 通常、scriptタグの内部ではHTMLタグは無視されるはずでは? たとえば以下のHTMLで、hiの部分は画面上には表示されません


<body>
<script>
  <p>hi</p>
  var s = "bye";
</script>
<h1>hello</h1>
</body>

http://codepen.io/anon/pen/xGROKJ

(2) <!--と<script>の組み合わせの場合のみ発生するのはなぜか

「<!--」単体の場合や、<!--<p>といった組み合わせの場合、以降が表示されなくなる現象は発生しません。