h1은 '제목'이 아니라 '헤딩'입니다
많은 개발자가 <h1>을 문서 전체의 '제목(title)'으로 오해하지만, 사실 h1은 헤딩(heading) 요소입니다. HTML5에서는 각 섹셔닝(sectioning) 요소에 독립적인 헤딩 요소를 부여할 수 있으며, 이 때문에 h1이 반드시 페이지 전체의 유일한 제목일 필요는 없습니다.
즉, h1은 해당 섹션의 대표 헤딩 역할을 하며, 각각의 <article>이나 <section>은 자신만의 고유한 제목을 가질 수 있습니다. 다만 <h1>은 문서 내에서 가장 중요한 헤딩을 정의하는 요소이며, 문서에서 처음 등장하는 <h1>은 전체 문서를 대표하는 라벨로 간주됩니다.
섹션마다 하나의 h1을 사용하세요
HTML5에서는 문서가 필요로 하는 만큼 <h1> 태그를 자유롭게 사용할 수 있습니다. 핵심 규칙은 다음과 같습니다.
- 하나의 섹셔닝 루트 또는 콘텐츠 섹션당 한 세트의 <h1> 태그를 사용합니다.
- <body> 여는 태그와 첫 번째 콘텐츠 섹션 사이에는 반드시 h1 수준의 헤딩이 존재해야 하며, 이것이 전체 문서의 라벨이 됩니다.
여기서 섹셔닝 루트란 <body>, <article>, <section>, <nav>, <aside> 등과 같이 독립적인 아웃라인을 형성하는 요소를 의미합니다. 각 섹션 안에서 h1~h6 계층 구조를 구성하면 검색 엔진과 스크린 리더가 문서의 논리적 구조를 더 잘 이해할 수 있어 접근성과 SEO 측면에서도 유리합니다.
예제 코드
아래는 <body> 직후에 문서 대표 h1을 배치하고, 하위 섹션들은 h2로 계층화한 기본적인 마크업 예시입니다.
<body> <h1>Heading 1</h1> <p>My content</p> <h2>Heading of a subsection</h2> <p>My content</p> <h2>Another subsection</h2> <p>content</p> </body>
정리
- h1은 페이지의 '제목'이 아니라 가장 중요한 헤딩입니다.
- 각 article, section 등 섹셔닝 요소마다 고유한 헤딩(필요하면 h1)을 줄 수 있습니다.
- 문서 최상위에는 반드시 하나의 대표 h1을 배치해 전체 문서를 라벨링하세요.
- h1→h2→h3 순으로 논리적 계층을 유지하면 문서 구조가 명확해집니다.