HTML noscript 요소 사용법 – 자바스크립트가 비활성화된 브라우저를 위한 대체 콘텐츠 표시하기

HTML <noscript> 요소는 사이트 방문자의 브라우저에서 자바스크립트(JavaScript)가 비활성화되어 있을 때 특정 콘텐츠를 표시하기 위해 사용됩니다.

예를 들어, 누군가 여러분의 웹사이트에 방문했는데 브라우저에서 자바스크립트가 꺼져 있다고 가정해 보겠습니다. 실수로 자바스크립트를 끈 경우일 수도 있으므로, 이를 알려주기 위해 다음과 같이 <noscript>를 사용할 수 있습니다.

<noscript>
  <h2>
    JavaScript is disabled in your browser. To get the best user experience on
    our website we recommend that you enable it.
  </h2>
</noscript>

쉽게 이해할 수 있도록 위의 HTML 코드 조각을 CodePen에 추가해 두었습니다.

다만 자바스크립트를 비활성화해야만 이 내용을 확인할 수 있습니다.

자바스크립트를 일시적으로 비활성화하는 방법:

브라우저 주소창에서 자물쇠 아이콘을 클릭한 후 사이트 설정(Site settings)을 클릭합니다.
권한(Permissions) 항목에서 JavaScript를 찾아 오른쪽 드롭다운 메뉴를 클릭하고 차단(Block)을 선택합니다.

이제 페이지를 새로고침하면(브라우저 전체가 아닌 해당 탭만) 브라우저 탭에서 <noscript> 요소의 텍스트가 화면에 표시되는 것을 확인할 수 있습니다.

전체 과정을 보여주는 짧은 영상입니다:

HTML noscript 요소 사용법 – 자바스크립트가 비활성화된 브라우저를 위한 대체 콘텐츠 표시하기

자바스크립트를 다시 활성화하려면 동일한 사이트 설정 탭으로 돌아가 드롭다운 메뉴에서 허용(Allow)을 선택하면 됩니다. 그러면 브라우저 탭을 새로고침하라는 안내가 나타나며, 새로고침을 완료하면 자바스크립트가 다시 활성화됩니다.

<noscript> 요소는 웹사이트의 <head>와 <body> 요소 어디에든 넣어 사용할 수 있습니다.

다만, <head> 요소 안에서 <noscript>를 사용할 경우에는 그 안에 <style>, <link>, <meta> 요소만 넣을 수 있으며, 텍스트 요소는 포함할 수 없습니다.