HTML <hgroup> 태그란?
<hgroup> 태그는 HTML 문서의 제목(heading)을 정의하는 요소로, <h1>부터 <h6>까지의 제목 태그들을 하나의 그룹으로 묶을 때 사용됩니다. 서브타이틀이나 부제목처럼 논리적으로 연관된 여러 제목을 하나의 단위로 처리해야 할 때 유용합니다.
참고: <hgroup> 태그는 HTML5에서 처음 도입되었으나 이후 폐기(deprecated)되었으며, W3C HTML5 공식 표준 사양에서는 제외되었습니다. 따라서 최신 프로젝트에서는 사용을 권장하지 않습니다.
기본 문법
<hgroup> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> </hgroup>
HTML hgroup 태그 사용 예제
다음은 HTML 문서에서 <hgroup> 요소를 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <head> <title>Document Title</title> </head> <body> <hgroup> <h1>Demo Heading One</h1> <h2>Demo Heading Two</h2> </hgroup> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> </body> </html>
실행 결과
위 예제에서는 <hgroup> 요소 안에 두 개의 제목인 <h1>과 <h2>를 함께 묶어 설정했습니다.
<hgroup> <h1>Demo Heading One</h1> <h2>Demo Heading Two</h2> </hgroup>
현재 권장되는 대안
<hgroup>이 표준에서 제외된 만큼, 제목과 부제목을 함께 표현하고 싶다면 <header> 요소 내부에 <h1>~<h6> 태그를 배치하거나, CSS를 활용해 시각적으로 그룹화하는 방식을 사용하는 것이 좋습니다. 이러한 방법은 브라우저 호환성과 접근성 측면에서도 더 안정적입니다.