HTML <noscript> 태그 – 올바른 이해와 사용 방법

`<noscript>` 태그의 정의 및 사용법

<noscript> 태그는
브라우저에서 현재 HTML 문서에서 실행되는 스크립트를 지원하지 않거나,
브라우저에서 스크립트를 사용할 수 없도록 비활성으로 설정한 사용자를 고려하여 스크립트를 대체할 수 있는 콘텐츠를 나타내는 태그입니다.

"스크립트"란
웹 페이지를 로드한 사용자의 웹 브라우저(흔히 '클라이언트'라고 함)에서 실행되는 스크립트를 의미합니다. 대표적으로 자바스크립트가 있습니다.

한편으로는, 브라우저가 스크립트를 지원하거나 활성화되어 있는 경우에
<noscript> 태그는 아무런 작동이나 표시를 하지 않습니다.

사용 목적

<noscript> 태그를 사용하면 스크립트를 지원하거나 활성화되어 있는 브라우저와 그렇지 않은 브라우저에게 다른 마크업을 제공할 수 있습니다.

예제

<noscript> 태그는 현재의 HTML 문서에서 스크립트를 사용해서 콘텐츠를 동적으로 구현하려고 하는데, 현재의 브라우저 상태가 스크립트를 지원하지 않아 대체 콘텐츠를 제공하기 위해서 사용하는 것입니다.

이때, 대체 콘텐츠는 두 가지 목적으로 제공될 수 있습니다.

첫 번째는 스크립트로 제공되는 콘텐츠가 스크립트를 사용하지 못하면 콘텐츠가 작동하지 않거나 표시되지 않음을 사용자에게 알리는 용도로 사용됩니다.
두 번째는 스크립트로 제공되는 콘텐츠가 스크립트를 사용하지 못하면 콘텐츠의 일부 기능이 제한되거나 정적인 콘텐츠로만 표시될 수 있는 경우, 해당 대체 콘텐츠를 제공하는 용도로 사용됩니다.

콘텐츠가 작동하지 않거나 표시되지 않음을 알리는 용도

HTML

<script>
    /* 콘텐츠가 스크립트를 사용하지 못하면
       콘텐츠가 작동하지 않거나 표시할 수 없는 스크립트 */
</script>
<noscript>
    <p>
        이 웹 페이지는 동적으로 생성된 콘텐츠를 제공하기 위해
        자바스크립트를 사용합니다.
        하지만 현재 사용하고 계신 브라우저에서 자바스크립트를 실행할 수 없습니다.
    </p>
</noscript>

<script> 태그는 스크립트를 실행하기 위해 스크립트를 포함하는 태그입니다.

위 예제처럼 스크립트가 실행되지 않을 경우 사용자에게 <noscript> 태그를 사용하여 사용자에게 알림을 표시할 수 있습니다.

일부 기능이 제한되거나 정적인 콘텐츠로 표시되는 용도

다음은 슬라이드쇼를 제공하는 웹 페이지의 예시입니다. 스크립트가 지원되지 않는 경우, 슬라이드쇼가 아닌 각 이미지를 개별적으로 표시할 수 있습니다.

HTML

<script>
   /* 자바스크립트를 사용하여
      동적으로 슬라이드쇼를 제공하는 부분 */
</script>
<noscript>
    <img src="image1.jpg" alt="이미지 1">
    <img src="image2.jpg" alt="이미지 2">
    <img src="image3.jpg" alt="이미지 3">
    <!-- 각 이미지를 개별적으로 표시하는 부분 -->
</noscript>

이렇게 <noscript> 태그를 사용하면 스크립트를 지원하는 경우와 그렇지 않은 경우에 대해 서로 다른 콘텐츠를 제공할 수 있습니다.

주의할 점

<noscript> 태그는 <head>나 <body> 모두에서 사용 가능합니다.
그런데, <head> 내에서 사용할 경우 주의할 점이 있습니다.

<head> 내부에서 <noscript> 태그를 사용할 경우에는
콘텐츠로 <link>, <style>, <meta> 요소만 포함할 수 있습니다.

<head> 내에서는 그 밖의 요소나 텍스트가 화면에 표시되지 않기 때문에 스크립트가 실행되지 않을 경우 <noscript> 내에서 사용해도 화면에 표시가 되지 않습니다. 그렇기 때문에 <head> 내에서 <noscript>를 사용할 경우 <noscript> 내에서 사용할 수 있는 요소들도 화면에 표시되는 요소를 사용할 수 없습니다. <link>, <style>, <meta> 요소는 모두 화면에 표시되지 않는 요소들입니다.

<link>는 화면에 표시되지는 않지만 스크립트가 실행되지 않는 상황에서 대체할 수 있는 CSS 스타일시트를 연결할 수 있고, <style>로는 대체한 스타일을 직접 CSS 스타일로 작성할 수 있으며, <meta>는 원하는 대체 페이지로 리다이렉트 새로 고침 등의 기능을 구현할 수 있습니다.