HTML

HTML5 문서 개요 알고리즘 (Document Outline Algorithm)

by yoora · 2025-08-19

- 목차 -

HTML5 초안(2008)에는 웹 문서의 논리적 구조를 자동으로 생성하기 위한 문서 개요 알고리즘이 포함되었습니다.
이 알고리즘은 섹션 요소(<section>,<article>,<nav>,<aside>)와 헤딩요소 (<h1>~<h6>)를 기반으로 문서의 계층적 구조를 자동으로 파악하고, 사용자 에이전트(브라우저, 스크린 리더, 검색엔진)가 문서를 더 잘 이해하도록 설계되었습니다.

그러나 브라우저와 보조 기술에서 실제 지원되지 않아 활용도가 낮았고, 결국 2022년 WHATWG Living Standard에서 제거되었습니다.

현재는 개발자가 직접 헤딩 계층을 유지하는 전통적인 방식이 권장됩니다.

1. 배경과 목적

도입 배경

  • 시기
    • 2008년 HTML5 초안 발표 시 포함 -> 2024년 HTML5 권고안까지 유지
  • 목적
    • 문서 구조를 자동 계층화
    • 스크린 리더 탐색 개선
    • 검색 엔진 인덱싱 효율화
  • 한계
    • 실제 구현 사례가 없음 (Chrome, Firefox 등 브라우저 미지원)
    • 보조 기술(Assistive Technology)에서도 활용 불가
    • 개발자들 사이에서 사용 사례 부족 -> 2014년 이후 W3C사양에도 "구현없음" 경고가 명시되었고, 2022년 표준에서 완전히 삭제됨.

2. 알고리즘 동작 방식 (이론적 설명)

핵심 개념

  • 섹셔닝 콘텐츠(Sectioning Content)
    • <section>, <article>, <nav>, <aside>는 각각 독립 섹션을 생성.
  • 헤딩 요소(Heading Elements)
    • 섹션 내 첫 번째 헤딩(<h1>~<h6>)이 해당 섹션의 제목.
    • 중첩 구조에서는 자동으로 하위 수준으로 해석됨.
  • 개요 트리(Outline Tree)
    • 문서 전체를 루트로 하여, 섹션 -> 하위 섹션 -> 제목으로 트리 구조를 생성.
  • 예시HTML<body>
  <h1>웹페이지 주요 제목</h1>
  <section>
    <h1>섹션 1 제목</h1>
    <article>
      <h1>아티클 제목</h1>
    </article>
  </section>
  <section>
    <h1>섹션 2 제목</h1>
  </section>
</body>
    • 생성된 개요(이론적)
      • 웹페이지 주요 제목(<h1>)
      • 섹션 1 제목(<h2>)
      • 아티클 제목(<h3>)
      • 섹션 2 제목(<h2>)

      -> 이런식으로 자동 계층화를 의도했지만, 실제 구현은 없었습니다.

3. 현재 권장되는 개발 가이드

현재 표준

  • WHATWG Living Standard(2022 이후) : 개요 알고리즘 삭제
  • 실제 문서 구조 파악은 "헤딩 수준(<h1>~<h6>)"에 직접 의존

섹셔닝 콘텐츠의 역할

  • 여전히 의미론적 구분에 유용
  • 접근성과 SEO에 긍정적인 효과 있음
  • 단, 개요 알고리즘이 없으므로 반드시 헤딩 계층을 명시적으로 유지해야 함.

4. <h1> 사용에 대한 권장 사항

과거(알고리즘 존재 가정)

  • 여러 h1 사용 가능 -> 섹션별로 자동 하위 계층 처리

현재(알고리즘 제거 후)

  • 페이지당 하나의 h1 권장
    • 페이지 전체 주제를 표현
    • 스크린 리더와 검색 엔진 모두에 정확성 제공
  • 하위 제목은 h2, h3 순차 사용
  • 헤딩 수준 건너뛰기 금지(접근성 문제 발생 가능)
  • 권장 예시HTML<body>
  <h1>페이지 주요 제목</h1>
  <section>
    <h2>섹션 제목</h2>
    <p>내용...</p>
  </section>
  <article>
    <h2>아티클 제목</h2>
    <p>내용...</p>
  </article>
</body>

4. 결론

문서 개요 알고리즘은 HTML5에서 시도된 혁신적인 개념이었지만, 브라우저 미지원으로 실현되지 못하고 제거되었습니다.

따라서 현재는 섹셔닝 콘텐츠를 사용해 문서를 의미론적으로 나누되, 헤딩 계층은 직접 관리하고 h1은 페이지당 하나만 사용하는 것이 안정적입니다.

접근성, SEO, 유지보수를 고려할 때도 이 방식이 가장 효과적입니다.