Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML noscript 태그란? 개념부터 실전 예제까지 한눈에 배우기

HTML의 <noscript> 태그는 웹 브라우저에서 자바스크립트(JavaScript)가 비활성화되어 있거나 스크립트를 지원하지 않는 환경으로 사이트를 방문한 사용자에게 대체 콘텐츠를 제공하기 위해 사용됩니다.

참고: 방문자의 브라우저에서 스크립트가 활성화되어 있지 않거나, 애초에 스크립트를 지원하지 않는 브라우저를 사용하는 경우 해당 사용자는 <noscript> 태그 안에 작성된 내용을 동일하게 보게 됩니다.

<noscript> 태그가 필요한 이유

일부 사용자는 보안상의 이유로 브라우저 설정에서 자바스크립트를 끄는 경우가 많습니다. 또한 텍스트 기반 브라우저나 일부 구형 기기에서는 자바스크립트 자체를 지원하지 않습니다. 이럴 때 <noscript> 태그를 활용하면 핵심 정보나 안내 메시지를 대신 전달할 수 있어 접근성과 사용자 경험이 향상됩니다.

사용 예제

다음은 <noscript> 태그를 실제로 구현한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<script>
   document.write("This is it!")
</script>
   <noscript>This text would be visible if your web browser doesn't support JavaScript or you have disabled it in the browser.</noscript>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

1. 자바스크립트가 활성화된 경우

브라우저에서 자바스크립트가 정상적으로 활성화되어 있다면, <script> 태그 안의 코드가 실행되어 다음과 같은 화면이 표시됩니다.

HTML noscript 태그란? 개념부터 실전 예제까지 한눈에 배우기

2. 자바스크립트가 비활성화된 경우

반대로 브라우저에서 자바스크립트가 비활성화되어 있다면, <script> 태그는 무시되고 <noscript> 태그 안에 작성된 아래 문구가 대신 화면에 나타납니다.

HTML noscript 태그란? 개념부터 실전 예제까지 한눈에 배우기

정리

<noscript> 태그는 자바스크립트에 의존하는 웹 페이지에서도 모든 방문자에게 원활한 정보를 전달할 수 있게 해주는 유용한 요소입니다. 스크립트 미지원 환경을 고려한 폴백(fallback) 콘텐츠를 제공함으로써 웹 접근성을 높이고, 검색 엔진 최적화(SEO) 측면에서도 도움이 될 수 있습니다.