HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのnoscript要素とは？使い方とJavaScript無効時の表示方法を解説

<noscript>要素とは

HTMLの<noscript>要素は、サイト訪問者のブラウザでJavaScriptが無効になっている場合に、指定したコンテンツを表示するためのHTML要素です。

たとえば、誰かがあなたのウェブサイトを訪れた際、ブラウザ設定でJavaScriptがオフになっていたとします。うっかり無効化しているケースも考えられるため、その訪問者に注意を促すメッセージを表示したいときに、<noscript>要素を次のように活用できます。

<noscript>
  <h2>
    お使いのブラウザではJavaScriptが無効になっています。
    当サイトを快適にご利用いただくには、JavaScriptを有効にすることをおすすめします。
  </h2>
</noscript>

実際の動きを確認できるよう、このコードをCodePenに組み込んでみました。

ただし、このデモが表示されるのはJavaScriptを無効にしている場合だけです。

JavaScriptを一時的に無効にする手順

  1. ブラウザのアドレスバーにある鍵アイコンをクリックし、「サイトの設定」を選択します。
  2. 「権限」セクションの「JavaScript」右側にあるプルダウンメニューを開き、「ブロック」を選択します。

続いてページを再読み込みしてください（ブラウザ全体ではなく、開いているタブだけでOKです）。これで<noscript>要素内のテキストがページ上に表示されるようになります。

一連の操作の流れは、以下の動画をご覧ください。

HTMLのnoscript要素とは？使い方とJavaScript無効時の表示方法を解説

後ほどJavaScriptを再び有効にしたい場合は、同じ「サイトの設定」画面に戻り、プルダウンから「許可」を選択します。タブの再読み込みを求められたら指示に従いましょう。これでJavaScriptが再度有効になります。

<head>と<body>、どちらに配置できる？

<noscript>要素は、ページの<head>要素内にも<body>要素内にも配置できます。

ただし、<head>内で使用する場合は、中に置けるのは<style>、<link>、<meta>要素のみで、テキストを含む要素は配置できない点に注意しましょう。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値