HTML noscript 태그: JavaScript 비활성화 시 대체 콘텐츠 표시
HTML의 <noscript>는 브라우저에서 스크립트를 사용할 수 없는 경우에 제공할 대체 콘텐츠를 담습니다. JavaScript 파일의 다운로드 실패나 실행 중 오류를 감지하는 요소는 아니므로, 스크립트 오류에 대한 안내는 별도로 구현해야 합니다.
스크립트를 끈 상태와 실행 실패의 차이
브라우저가 스크립트를 실행하도록 설정되어 있으면 noscript 안의 내용은 일반 본문처럼 표시되지 않습니다. 특정 파일이 없거나, 구문 오류가 있거나, 실행 중 예외가 발생했다고 해서 noscript로 자동 전환되지는 않습니다. 기능이 실패할 때 안내가 필요하다면 기본 HTML에 안내를 두고 성공 후 갱신하는 방식도 검토합니다.
전체 예제: 정상 실행과 오류 비교
아래 문서를 noscript-demo.html로 저장하고 브라우저에서 엽니다. JavaScript를 켠 상태에서는 기본 안내 문장이 실행 성공 메시지로 바뀝니다. 외부 라이브러리나 서버 요청은 없습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>noscript 동작 비교</title>
</head>
<body>
<h1>스크립트 상태 실습</h1>
<p id="status">스크립트가 아직 이 안내를 갱신하지 않았습니다.</p>
<noscript>
<p>현재 스크립트를 사용할 수 없습니다. 아래 기본 안내를 읽어 주세요.</p>
</noscript>
<p>기본 안내: 이 페이지는 스크립트 없이도 본문을 읽을 수 있습니다.</p>
<script>
if (new URLSearchParams(location.search).has('fail')) {
throw new Error('실습용 실행 오류');
}
document.getElementById('status').textContent = '스크립트가 실행되었습니다.';
</script>
</body>
</html>- 스크립트를 켠 상태에서 문서를 엽니다. “스크립트가 실행되었습니다.”와 기본 안내가 표시되고 noscript의 안내는 보이지 않습니다.
- 주소 끝에
?fail=1을 붙여 다시 엽니다. 실습용 오류로 갱신 전 문장이 남지만, 스크립트 설정은 켜져 있으므로 noscript의 안내는 나타나지 않습니다. 개발자 도구 콘솔에서 실습용 오류를 확인할 수 있습니다. - 브라우저가 제공하는 JavaScript 비활성화 기능으로 해당 페이지의 스크립트를 끈 후 새로고침하면 noscript의 안내가 표시됩니다. 단순히 script 태그를 삭제하는 것은 같은 시험이 아닙니다.
- 실습을 마치면 JavaScript 설정을 원래대로 복구하고 주소의 쿼리 문자열을 제거한 뒤 다시 불러옵니다.
파일 주소에 쿼리 문자열을 붙이는 동작이 제한된 환경에서는 같은 파일을 로컬 웹 서버에서 제공해 비교할 수 있습니다. 스크립트를 끄는 메뉴와 적용 범위는 브라우저·개발자 도구에 따라 다르므로 해당 도구의 설정을 확인합니다. 브라우저 전체를 끄기보다 실습 페이지에만 임시 적용하고 복구하세요.
body에 안내를 두고 기본 콘텐츠 유지하기
일반적인 대체 문단이나 링크는 예제처럼 body 안에 넣습니다. head 안의 noscript에는 허용되는 내용이 제한되므로 문단·버튼 등을 넣지 않습니다. noscript를 다른 noscript 안에 중첩하지도 않습니다.
핵심 설명이나 연락 경로를 모두 JavaScript로 생성하면 스크립트가 실행되지 않을 때 이용하기 어렵습니다. 기본 HTML에서 제공할 수 있는 내용은 먼저 제공하고, 상호작용이 필요한 부분만 점진적으로 보강하면 대체 안내에만 의존하는 상황을 줄일 수 있습니다. noscript에 오류 복구나 보안 기능이 있다고 가정하지 말고, 구체적인 표시 조건은 MDN noscript 문서에서 확인합니다.
