[HTML] 제목 요소 (h1 ~ h6)

제목 요소 종류

h1 ~ h6로 총 여섯 가지 사용 가능하다. 숫자가 높아질 수록 하위제목이다. 

 

사용 방식

<h1>제목 레벨 1</h1>
<h2>제목 레벨 2</h2>
<h3>제목 레벨 3</h3>
<h4>제목 레벨 4</h4>
<h5>제목 레벨 5</h5>
<h6>제목 레벨 6</h6>

[결과]

너무 큰디유

제목 요소는 블록 요소를 포함할 수 없으며
인라인 요소와 텍스트만 사용가능!!

 

사용 이유

잘 구성된 제목 요소는 기기에서의 정보 인식성을 높일 수 있다.

즉, SEO관점에서 좋다. 스크린 리더 사용 시 웹 페이지의 제목구조를 파악해 제목 사이의 이동 기능을 제공해주기때문에 빠르게 탐색이 가능하다. 

 

따라서, 제목 요소는 순서대로 사용해주는 것이 바람직하다. 제목 요소가 순차적으로 사용되어야지 정보의 순서를 파악할 수 있고 구조를 파악할 수 있다. 추후 유지 보수를 위해서도 순서를 지켜주는 것이 좋다.

<h1>제목 레벨 1</h1>
<h6>제목 레벨 6</h6>

보다는

<h1>제목 레벨 1</h1>
<h2>제목 레벨 2</h2>

로 순서에 알맞게 사용하는 게 좋다.

 

 

숨김 제목

네이버의 모든 CSS를 제거하고 보면 

다음과 같이 주제별 캐스트라는 큰 제목요소를 확인할 수 있다

하지만 실제 네이버 화면에서는 찾을 수없다.

개발자 도구를 열어 확인해보니

class = "blind"로 실제 서비스되고 있는 화면상에서 보이지 않게 처리를 해둔 것을 확인할 수 있다. 

디자인 상 숨겨진 제목 요소를 콘텐츠의 특성에 알맞게 마크업하면 순차적으로 정보에 접근하는 스크린 리더를 사용할 떄 도움이됩니다. 화면에 제목 요소가 표시되어 있어 해당 카테고리가 어떤 정보를 가지고 있는지 확인할 수 있습니다.

 

 자주 사용하는 class명

이 처럼 숨김 제목에 자주 사용하는 class명은 sr-only( screen-only ), a11yHidden( Accessibility Hidden )등이 있다. 둘 다 요소를 화면에서 감추되, 스크린 리더에서 읽힐 수 있도록 하는 뜻을 내포하고 있다.

 

 

숨김 제목 정리

컨텐츠 블록은 적절한 제목을 가져 SEO( 검색 기능 최적화 )를 향상시키고 스크린 리더 사용자에게 올바른 정보를 제공해줄 수 있다.