HTML5에서는 hidden 속성을 사용하여 특정 요소를 숨길 수 있습니다. 이 속성이 적용된 요소는 브라우저 화면에 표시되지 않으며, "더 이상 관련이 없는" 콘텐츠임을 의미론적으로 나타냅니다.
hidden 속성의 특징
hidden 속성은 불리언(Boolean) 속성이므로 별도의 값을 지정하지 않고도 사용할 수 있습니다. CSS의 display: none;과 시각적으로는 비슷한 효과를 내지만, hidden 속성은 해당 콘텐츠가 현재 사용자와 관련이 없음을 명시적으로 선언한다는 점에서 의미론적 차이가 있습니다.
또한 이 속성은 Chrome, Firefox, Safari, Edge 등 모든 주요 최신 브라우저에서 폭넓게 지원되므로 안심하고 사용할 수 있습니다.
예제
다음 코드를 실행하면 HTML5의 hidden 속성이 실제로 어떻게 동작하는지 직접 확인해 볼 수 있습니다.
<!DOCTYPE html> <html> <body> <h2>Heading</h2> <p>This is a demo paragraph and visible.</p> <p hidden>This is a demo paragraph and hidden.</p> </body> </html>
위 예제를 실행하면 첫 번째 단락은 정상적으로 화면에 표시되지만, hidden 속성이 적용된 두 번째 단락은 브라우저에 나타나지 않습니다.