Skip to main content
ツイート済み twitter.com/jaStackOverflow/status/1205593372326543366
本文に 410 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <script>
    //var s = "<!--<script>";
  </script>
</head>
<body>
  <h1>hello</h1>
</body>
</html> 

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

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


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

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

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

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


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

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

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

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

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

疑問点を明確化して追記
ソース リンク
ryo
  • 113
  • 9

以下の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>といった組み合わせの場合、以降が表示されなくなる現象は発生しません。

以下の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の仕様なのだと思いますが、具体的にはどのような仕様なのでしょう?

以下の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>といった組み合わせの場合、以降が表示されなくなる現象は発生しません。

ソース リンク
ryo
  • 113
  • 9

HTMLのコメント・scriptタグの解釈について

以下の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の仕様なのだと思いますが、具体的にはどのような仕様なのでしょう?