hgroup element - by. UXKM

요약 설명

<hgroup> 요소는 하나의 제목 그룹을 나타내는 시맨틱 태그로, 주제의 제목과 그에 대한 부제목을 논리적으로 묶어줄 때 사용됩니다.
<h1> ~ <h6> 요소들을 포함하며, 이들을 단일한 헤딩 구조로 인식하게 해줍니다. 예를 들어, 메인 제목과 설명 또는 보조 제목을 묶을 때 사용되며, 이 그룹은 가장 높은 수준의 제목으로 간주됩니다.

이 요소는 HTML5에서 소개되었으나, 현재는 사용이 권장되지 않으며, 대신 의미론적 마크업과 스타일링으로 대체하는 것이 일반적입니다.
또한, 일부 스크린 리더나 브라우저에서는 완벽하게 지원되지 않을 수 있어 사용 시 주의가 필요합니다.

주요 역할 및 특징

  1. 여러 제목을 하나의 논리적 단위로 묶기
    • <hgroup>은 주요 제목과 부제목을 포함하는 그룹을 정의합니다.
    • <hgroup> 내의 제목들은 하나의 제목처럼 간주됩니다.
  2. HTML5 의미론적 구조
    • <hgroup>은 문서의 계층적 구조를 더 명확히 하기 위해 도입되었습니다.
    • 하지만 실제로는 사용 빈도가 낮고, 접근성과 브라우저 호환성 문제가 있어 권장되지 않습니다.
  3. 대체 방법

    <div>나 <header> 요소를 사용하고, 제목과 부제목을 개별적으로 정의하는 것이 현재 표준 접근 방식입니다.

  4. 지원 및 접근성 문제
    • 스크린 리더와 일부 브라우저에서 <hgroup>의 의미를 올바르게 해석하지 못할 수 있습니다.
    • W3C는 <hgroup> 요소의 사용을 권장하지 않습니다.

CSS 기본 값

<hgroup> 요소는 기본적으로 블록 레벨 요소입니다.

기본 문법

속성

<hgroup> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

간단한 제목 그룹화 (권장하지 않음)

접근성을 고려하지 않은 예제 (권장하지 않음)

이 예제는 첫 번째 예제와 마찬가지로 스크린 리더에서 부적절하게 처리될 수 있습니다.

접근성을 고려한 대체 방식

<header>와 함께 부제목을 <p> 태그로 처리하여 의미를 명확히 합니다. 또한, 부제목에 스타일을 지정하여 시각적으로 구분할 수 있게 합니다.