10617


以下のHTMLがあります。

[code]

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

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

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

[code]

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

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

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

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

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

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

[code]

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

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

[code]

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

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

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


CC BY-SA 4.0
2015-05-25T14:20:04.773
10609
2019-12-13T19:37:08.003
2019-12-13T19:37:08.003
32986
9871
question
javascript html
HTMLのコメント・scriptタグの解釈について


ＨＴＭＬの上位規格であるＳＧＭＬでの注釈宣言と呼ばれるものです。  
`<! ... >` をマーク宣言と言って、この中で２つハイフンで始まり２つのハイフンで終わる部分が注釈として解釈され無視されます。  
`<!--<script>` は、コメントが始まっているがコメントの終わりのハイフン２つがないので、以降の部分がコメントとして無視されてしまっています。
~~(なので`script`でなくても何でも良い)~~  
だから、  
例えば、  
`//var s = "<!--<script-->";`
のようにすれば正しく解釈されて`<h1>hello</h1>`の部分が表示されるようになるはずです。


CC BY-SA 3.0
2015-05-25T14:39:24.340
10611
2015-05-25T15:11:41.833
2015-05-25T15:11:41.833
5044
5044
10609
answer


`<!--<script>`が単なるJavaScript文字列である為には、その文字列が`<script>`ブロックの内側にあるとHTMLパーサが認識している必要があります。

示されているコードはインデントのおかげでJavaScriptであるように見えるだけで、単純なテキストとして上から解釈した時、`</script>`がどこと対になっているのか判断できません。

これについてはW3Cの中で投稿者のコードとほぼ同じ例を用いた詳しい説明があります。  
各ブラウザは不正なscriptタグについて、この例を忠実に再現しているように見えます。

<http://www.w3.org/TR/html5/scripting-1.html>

### 4.11.1.2 Restrictions for contents of script elements

> When a script element contains script documentation, there are further  
>  restrictions on the contents of the element, as described in the section
> below.
>

>> Code Example:

>>

>> The following script illustrates this issue. Suppose you have a script that  
>  contains a string, as in:
[code]

>>     var example = 'Consider this string: <!-- <script>';

>>     console.log(example);

>>  
[/code]

>>

>> If one were to put this string directly in a script block, it would violate
the  
>  restrictions above:
[code]

>>     <script>

>>       var example = 'Consider this string: <!-- <script>';

>>       console.log(example);

>>     </script>

>>  
[/code]

>>

>> The bigger problem, though, and the reason why it would violate those  
>  restrictions, is that actually the script would get parsed weirdly: the
> script  
>  block above is not terminated. That is, what looks like a `</script>` end
> tag  
>  in this snippet is actually still part of the script block. The script
> doesn't  
>  execute (since it's not terminated); if it somehow were to execute, as it
> might  
>  if the markup looked as follows, it would fail because the script
> (highlighted  
>  here) is not valid JavaScript:
[code]

>>     <script>

>>       var example = 'Consider this string: <!-- <script>';

>>       console.log(example);

>>     </script>

>>     <!-- despite appearances, this is actually part of the script still!
-->

>>     <script>

>>      ... // this is the same script block still...

>>     </script>

>>  
[/code]

>>

>> What is going on here is that for legacy reasons, `<!--` and `<script`
strings  
>  in script elements in HTML need to be balanced in order for the parser to  
>  consider closing the block.
>>

>> By escaping the problematic strings as mentioned at the top of this
section,  
>  the problem is avoided entirely:
[code]

>>     <script>

>>       var example = 'Consider this string: <\!-- <\script>';

>>       console.log(example);

>>     </script>

>>     <!-- this is just a comment between script blocks -->

>>     <script>

>>      ... // this is a new script block

>>     </script>

>>  
[/code]

>>

>> It is possible for these sequences to naturally occur in script
expressions, as  
>  in the following examples:
[code]

>>     if (x<!--y) { ... }

>>     if ( player<script ) { ... }

>>  
[/code]

>>

>> In such cases the characters cannot be escaped, but the expressions can be  
>  rewritten so that the sequences don't occur, as in:
[code]

>>     if (x < !--y) { ... }

>>     if (!--y > x) { ... }

>>     if (!(--y) > x) { ... }

>>     if (player < script) { ... }

>>     if (script > player) { ... }

>>  
[/code]

>>

>> Doing this also avoids a different pitfall as well: for related historical  
>  reasons, the string `<!--` in JavaScript is actually treated as a line
> comment  
>  start, just like `//`.


CC BY-SA 3.0
2015-05-25T20:27:28.043
10617
2015-05-25T20:41:50.037
2015-05-25T20:41:50.037
62
62
10609
answer