<noscript> 태그는 브라우저에서 <script> 태그가 작동하지 않을 때 대신 내보낼 내용을 담기 위해 쓰인다.
즉, 방문객이 브라우저에서 자바스크립트가 실행되도록 설정해 두었다면 자바스크립트는 실행되고 <noscript> 태그 안의 내용은 나오지 않는다. 하지만 자바스크립트 기능을 꺼두고 있다면 자바스크립트가 실행되지 않는 대신에 <noscript> 태그 안의 내용이 출력된다.
<script type="text/javascript">
document.write('안녕하십니까?')
</script>
<noscript><p>자바스크립트를 꺼두셨군요.</p></noscript>
위의 예에서, 보통은 자바스크립트가 실행되기 때문에 화면에는 다음 문장이 나올 것이다.
안녕하십니까?
하지만 자바스크립트가 실행되지 않는다면 화면에는 다음 문장이 나오게 된다.
자바스크립트를 꺼두셨군요.
브라우저에서 자바스크립트 기능을 꺼두고 쓰는 사람도 있기 때문에 자바스크립트를 쓴 곳에는 <noscript> 태그를 써서 자바스크립트가 필요하다는 걸 알려주는 게 좋다.
<p><a href="#" onclick="window.open('photo.html'; return false">사진 보기</a></p>
<noscript><p>사진 보기를 하려면 자바스크립트가 필요합니다.</p></noscript>
위 예에서는 자바스크립트를 써서 사진 보기 창을 뜨도록 하고 있으므로, 자바스크립트를 꺼두면 새 창을 뜨게 할 수 없기 때문에 사진을 볼 수 없다. 만약 <noscript> 태그를 쓰지 않는다면 모르는 사람은 왜 사진 보기가 안 되는 걸까 의아해 할지도 모른다. 하지만 <noscript> 태그를 써서, 위와 같이 사진을 보기 위해서는 자바스크립트가 필요하다는 걸 알려준다면 자바스크립트 기능을 꺼두었기 때문에 사진 보기가 안 된다는 걸 알고 사진을 보기 위해 자바스크립트 기능을 켜게 될 것이다.
위 코드의 결과는 다음과 같다. 브라우저에서 자바스크립트 기능을 꺼서 어떻게 보이는지 직접 확인해 보기 바란다.
참고로 photo.html 파일은 만들지 않았으므로 사진 보기를 눌러도 새 창은 뜨지 않을 것이며, <noscript> 태그 안의 글씨는 현재 이곳의 CSS 설정에 따라 크기나 색깔이 다르게 보일 수도 있다.
<noscript> 태그 안의 내용은 웹 문서의 내용과는 상관 없는 것이므로 웹 문서의 내용과는 다르게 보이도록 하는 게 좋다. 예를 들어, CSS에서 설정을 다음과 같이 해 두면 <noscript> 태그 안의 글씨는 돋움 글꼴에 본문 글씨보다 작게 녹색으로 보이게 되므로 웹 문서에 쓰인 글씨가 검은 색이면 서로 구별될 것이다.
noscript { font-family: 돋움, Dotum;
font-size: 75%;
color: green; }
끝으로 한 가지 주의사항은, <noscript> 태그는 <p> 태그를 감쌀 수 있지만 그 반대는 되지 않고, <noscript> 태그 안에 들어 있는 글씨를 <p> 같은 형님 태그로 감싸주지 않으면 웹 표준 검사에서 오류가 난다는 것이다.
