heading(h1~h6) element - by. UXKM
요약 설명heading 요소는 문서나 섹션의 제목을 나타내는 시맨틱 태그로,
<h1>이 가장 높은 수준의 제목이며<h6>로 갈수록 단계가 낮아집니다.
heading 요소는 문서의 구조를 계층적으로 표현하며, 검색 엔진과 보조기기에서도 중요한 의미를 갖습니다. 시각적인 크기보다 문서의 의미와 구조를 정의하는 용도로 사용해야 하며, 제목의 순서는 논리적 구조에 따라 계층적으로 구성하는 것이 좋습니다.
주요 역할 및 특징
헤딩 요소는 웹 페이지의 콘텐츠를 논리적으로 구분하고, 사용자가 정보를 쉽게 이해할 수 있도록 돕는 중요한 역할을 합니다. 웹 페이지에서 헤딩은 문서 구조를 계층적으로 정의하며, 콘텐츠의 중요도에 따라 다양한 수준의 제목을 제공합니다.
-
중요도
-
<h1>: 가장 중요한 제목으로, 페이지의 주제를 나타냅니다. 일반적으로 한 페이지에 하나만 사용하며, 페이지의 핵심 주제를 설명합니다. -
<h2>: 두 번째로 중요한 제목으로, 페이지 내 주요 섹션을 나타냅니다. -
<h3>~<h6>: 점차적으로 덜 중요한 제목으로,<h2>나 그 이상의 제목 밑에 존재하는 하위 섹션들을 정의합니다.
-
-
사용 규칙
-
<h1>은 한 문서에서 하나만 사용하는 것이 권장됩니다. -
헤딩의 순서는 논리적이어야 하며, 순서를 건너뛰지 않도록 주의해야 합니다.
예를 들어,<h1>뒤에<h3>를 바로 사용하지 않도록 합니다. - 각 헤딩의 역할을 명확히 하여, 페이지의 주제나 섹션을 효과적으로 전달할 수 있도록 합니다.
-
-
SEO(검색 엔진 최적화) 효과
검색 엔진은 헤딩 구조를 통해 페이지의 주요 내용을 분석하고 인덱싱합니다. 올바른 헤딩 구조는 검색 엔진 최적화(SEO)에 긍정적인 영향을 주며, 페이지의 핵심 정보를 효과적으로 전달하여 검색 결과에서 더 높은 노출을 가능하게 합니다.
-
접근성 강화
스크린 리더 등 보조 기술은 헤딩을 통해 문서 구조를 파악하고 개요를 제공합니다. 논리적인 헤딩 사용은 시각적 접근이 어려운 사용자도 콘텐츠를 쉽게 탐색할 수 있도록 돕고, 올바른 헤딩 계층은 중요한 정보에 빠르게 접근할 수 있게 합니다.
-
가독성 향상
헤딩은 시각적으로 강조되어 가독성을 향상시키며, 사용자가 페이지의 주요 부분을 빠르게 파악해 콘텐츠를 효과적으로 소비할 수 있도록 돕습니다.
CSS 기본 값
헤딩 요소는 기본적으로 블록 레벨 요소로, 별도의 CSS를 지정하지 않아도 display: block;이 적용되며,
크롬 브라우저 기준 <h1~3>까지 기본 스타일(User Agent Stylesheet)은 다음과 같습니다. (<h4~6> 생략)
기본 문법
속성
헤딩 요소는 고유 속성을 가지지 않으며,
글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.