HTML <hgroup> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<hgroup> 태그는
제목과 그와 관련된 콘텐츠(예: 하위 제목, 대체 제목, 태그라인)를 하나로 묶는 그룹을 나타냅니다.

이 태그를 사용하면 제목과 설명을 하나의 의미론적인 단위인 제목 그룹(heading group)으로 만들 수 있습니다.

특징

<hgroup> 태그 내에는 하나의 제목 태그(<h1>~<h6>)와
제목 태그의 앞이나 뒤 또는 앞과 뒤의 관련 콘텐츠인 0 개 이상의 <p> 태그로 구성됩니다.
필요하다면 스크립트 지원 요소(script-supporting elements, 예: <script>, <template>)도 포함될 수 있습니다.

기본 예제

다음 예제들은 <hgroup> 태그의 기본 구조와 다양한 활용 패턴을 보여줍니다.
각 예제에서 제목과 설명이 어떻게 하나의 의미론적 단위로 묶이는지 확인해 보세요.

HTML

<!-- 예제 1: 제목 다음에 설명 하나 -->
<hgroup>
    <h1>웹 개발 입문</h1> <!-- 대표 제목 -->
    <p>HTML과 CSS 기초부터 시작하기</p> <!-- 부제/설명 -->
</hgroup>

<!-- 예제 2: 설명 다음에 제목 하나 -->
<hgroup>
    <p>프로그래밍 학습용</p> <!-- 부제/설명 -->
    <h2>JavaScript 기초</h2> <!-- 대표 제목 -->
</hgroup>

<!-- 예제 3: 설명 - 제목 - 설명 -->
<hgroup>
    <p>초보자용 가이드</p> <!-- 부제/설명 -->
    <h2>CSS Flexbox 배우기</h2> <!-- 대표 제목 -->
    <p>레이아웃과 정렬 이해하기</p> <!-- 추가 설명/태그라인 -->
</hgroup>

참고하세요!
<hgroup> 태그 자체는 문서 전체의 개요나 맥락에는 영향을 주지 않습니다.
문서 전체의 개요나 맥락은 오히려 <hgroup> 내의 제목 요소가 가집니다.

기술적인 문법 요약

hgroup 태그의 기술적인 문법 요약
허용되는 콘텐츠	0 개 이상의 `<p>` 태그 다음에 하나의 제목 태그(`<h1>~<h6>`)가 오고 그 뒤에 0 개 이상의 `<p>` 태그가 옵니다. 선택적으로 스크립트 지원 요소(script-supporting elements, 예: `<script>`, `<template>`)도 포함될 수 있습니다.
암시적인 `role` 속성 값	`group`
허용된 `role` 속성 값	모두(Any)