HTML5에서는 hidden 속성을 사용하여 단락(문단)을 숨길 수 있습니다. 이 속성이 적용된 요소는 화면에 표시되지 않으며, 더 이상 관련성이 없거나 일시적으로 보여줄 필요가 없는 콘텐츠를 마크업할 때 유용합니다.
hidden 속성의 특징
hidden은 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 작성하는 것만으로 활성화됩니다. 브라우저는 이 속성이 있는 요소를 기본적으로 display: none 상태로 처리하여 사용자에게 보이지 않게 합니다.
- 별도의 CSS나 JavaScript 없이 간단하게 요소를 숨길 수 있습니다.
- JavaScript로 속성을 추가하거나 제거하여 동적으로 콘텐츠를 표시하거나 숨길 수 있습니다.
- 숨겨진 콘텐츠도 HTML 문서에는 그대로 존재하므로, 검색 엔진 최적화(SEO) 목적의 키워드 숨김 등으로 악용해서는 안 됩니다.
예제
다음 코드를 실행하면 hidden 속성이 적용된 단락이 화면에 나타나지 않는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <h2>제목</h2> <p>이 단락은 화면에 표시됩니다.</p> <p hidden>이 단락은 hidden 속성으로 인해 숨겨집니다.</p> </body> </html>
위 예제에서 첫 번째 단락은 정상적으로 표시되지만, 두 번째 단락은 hidden 속성 때문에 브라우저에서 보이지 않습니다.