根本的な、script タグ記述方法

昨今のブラウザは、かなりの範囲で、下位互換してくれるし、タグ抜けなども勝手に補完してくれるので、要らなくなってきている、とも言えますが、読み込み時点で、ブラウザに何が起きるかは不明なため、万一、script タグが外れた状態でロードされてしまっても、script が表示されることを防いでおくほうが、安全ではないか、と思います。

<div>
<script>
$(function xx);~~
//内容を記述
</script>
<p>xyxyxyxyxyxyx</p>
</div>

という記述をしても、スクリプトは機能しますし、上記のように、body 内に書いた場合、script で囲まれた範囲は、ブラウザが忖度してくれて、display none となります。
ただ、ページ読み込み不具合となり、script 部分が欠けた場合(開始タグと閉じタグが違っている)を想定すると


<div>
<scr>
$(function xx);~~
//内容を記述
</script>
<p>xyxyxyxyxyxyx</p>
</div>

という記述となってしまい、表示上は

$(function xx);~~
//内容を記述
xyxyxyxyxyxyx

という、スクリプト内容が表示されかねない、という事態が想定できます。
したがって、head 以外に script(や、HTML 記述違反ではあるが、EC サイト系などで、途中に挟まざるを得ない CSS 用の link )タグを記述する際は、極力

<div>
<script><!--
$(function xx);~~
//内容を記述
//--></script>
<p>xyxyxyxyxyxyx</p>
</div>

と、コメントアウトを付与しておくことをおススメします。
この状態であれば、script タグが、どう壊れようと


xyxyxyxyxyxyx

と、スクリプト部分のコメントアウトが、適用され、スクリプト内容が表示されてしまうことは防げます。
script タグが壊れて、機能はしなくなっていても、他の表示を壊すことは無い、という保険としても、無駄では無い記述だと思います。

この記事が気に入ったらサポートをしてみませんか?