<script>、<noscript>

<script> タグはウェブページにスクリプトを挿入するために使用され、 <noscript> タグはブラウザがスクリプトをサポートしていない場合に表示するコンテンツを指定するために使用されます。

<script>

<script> は、スクリプトコードを読み込むために使用されます。現在では、主に JavaScript コードを読み込むために使用されます。

<script>
console.log('hello world');
</script>

上記のコードをウェブページに埋め込むと、すぐに実行されます。

<script> は外部スクリプトを読み込むこともでき、 src 属性で外部スクリプトのアドレスを指定します。

<script src="javascript.js"></script>

上記のコードは、 javascript.js スクリプトファイルを読み込んで実行します。

type 属性はスクリプトのタイプを指定します。デフォルトは JavaScript コードなので省略可能です。完全な書き方は実際には次のようになります。

<script type="text/javascript" src="javascript.js"></script>

type 属性を module に設定することもでき、これは従来のスクリプトではなく、ES6 モジュールであることを示します。

<script type="module" src="main.js"></script>

ES6 モジュールをサポートしていないブラウザに対しては、 nomodule 属性を設定できます。ES6 モジュールをサポートしているブラウザは、指定されたスクリプトを読み込みません。この属性は通常、 type="module" と組み合わせて使用され、古いブラウザのフォールバックソリューションとして機能します。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<script> には他にもいくつかの属性がありますが、そのほとんどは JavaScript 言語に関連しています。詳細については、関連する JavaScript チュートリアルを参照してください。

• async：この属性は、JavaScript コードを非同期で実行することを指定します。JavaScript コードはデフォルトで同期的に実行されるため、ブロッキング効果を引き起こしません。
• defer：この属性は、JavaScript コードをすぐに実行するのではなく、ページの解析が完了した後に実行することを指定します。
• crossorigin：この属性を使用すると、外部スクリプトをクロスオリジンで読み込みます。つまり、HTTP リクエストのヘッダー情報に origin フィールドが追加されます。
• integrity：外部スクリプトのハッシュ値を提供し、スクリプトの改ざんを防ぎます。ハッシュ値が一致する外部スクリプトのみが実行されます。
• nonce：サーバーが HTTP ヘッダー情報で提供する暗号乱数で、スクリプトが読み込まれるたびに異なります。これは、インラインスクリプトのホワイトリストを提供するようなもので、ホワイトリストに含まれるスクリプトのみが実行されます。
• referrerpolicy：HTTP リクエストの Referer フィールドの処理方法を指定します。

<noscript>

<noscript> タグは、ブラウザが JavaScript をサポートしていない場合、または JavaScript が無効になっている場合に表示されるコンテンツを指定するために使用されます。ユーザーが JavaScript を無効にする理由は、帯域幅を節約して携帯電話のバッテリー寿命を延ばしたり、トラッキングを防いでプライバシーを保護したりするためかもしれません。

<noscript>
  お使いのブラウザは JavaScript を実行できません。ページが正常に表示されません。
</noscript>

上記のコードは、ブラウザが JavaScript コードを実行できない場合にのみ表示され、それ以外の場合は表示されません。