이 게시물은 2017년 11월 8일 수정판입니다.

이 문서는 현재 작성중에 있습니다.

이야기에 앞서

이 카드에서는 HTML5 문서에서 목차를 만들고 구조화 하는 방법에 대해 설명합니다. Document Outline이라고 부르는 이 부분은 보통 여타 사이트에서 상당히 난해하게 설명하는 감이 있습니다. HTML 문서 작성의 핵심이면서도 너무 어려운 말을 많이 써서 도통 감이 잡히지 않았던 분들은 이 카드를 통해 웹 문서를 구조적이고 시멘틱하게 작성할 수 있기를 바랍니다.

문서가 목차를 가져야 할 이유

요새는 웹 사이트 자체가 눈길을 잡아끄는 화려함과 현란한 효과 때문에 문서(Document)라기 보다는 영상 매체라고 착각하기 쉽지만, 웹 사이트는 엄연히 문서이고, 그 태생 자체도 특정 기기나 플랫폼에 국한되지 않고 학술적인 문서를 교환하기 위함이었습니다. 그리고 문서에는 대부분 목차가 존재합니다.

인터넷이 핵 전쟁에서도 한 서버의 파괴로 인해 전체 네트워크가 마비되지 않기 위한 용도로 개발되었다면, 웹 문서에 사용되는 HTML은 어떠한 기기에서도 동일한 구조를 통해 정보를 전달하기 위한 문서 포맷이라고 생각할 수 있습니다.

우리가 목차를 만들고 개요를 작성하는 가장 큰 이유는, 구독자가 해당 페이지의 정보를 한 눈에 일목요연하게 파악할 수 있도록 하기 위함입니다. 물론 우리는 문서 내에 li나 a 태그등을 사용해서 메뉴나 별도의 공간을 할애해서 목차를 구성하지만, 사지가 멀쩡한 인간으로 국한됩니다.

만일 HTML 표준에서 제공하는 문서 구조를 사용한다면, 우리는 특별한 코딩 없이 검색엔진 로봇, 문서 낭독기(Screen Reader), 시각장애인, 케이블 TV나 자동차 네비게이션을 비롯한 HTML을 지원하는 모든 플랫폼에서 목차를 생성하고, 구독자는 디자인적으로 구현된 UI가 완전히 망가진 상태(예를들어, CSS 같은 스타일용 파일이 유실됐거나 기기에서 읽을 수 없는 경우)에서도 이러한 구조적 개요를 통해 원하는 정보에 쉽게 접근 할 수 있습니다.

물론 현재는 HTML 문서의 목차를 구독자가 곧바로 사용할 수 있도록 UI로 제공하는 플랫폼은 많지 않습니다. 하지만 저는 여러분이 당장의 실용성 보다는 당위성 자체에 촛점을 두고 기술을 습관화 하길 바랍니다. 참고로 여기를 클릭하면 문서의 목차를 UI로 표현해 주는 자바스크립트 플러그인을 찾을 수 있습니다.

해당 플러그인은 Bootstrap의 스크롤 스파이 JS와 함께 사용하여, 이후에 서술 할 암시적 섹션만을 목차로 만들기 때문에 완전한 목차 UI라고는 할 수 없지만 문서 내에서 헤딩 태그(h1, h2, h3 따위)를 기반으로 목차를 생성합니다.

이 사이트의 우측 사이드바에서 이러한 문서 목차를 표현해 주고 있으며, 일일이 문서마다 별도의 목차 네비게이션을 만들 필요없이 자동으로 헤딩 태그를 기반으로 리스트화 하고 있습니다.

위에서 소개하고 있는 JS 스크립트는 이후에 서술한 암시적 섹션만을 목차로 생성합니다. section, article 등의 명시적 섹션은 무시되므로 완전한 목차 생성 스크립트는 아니라는 점에 주의하세요. 이 말이 어렵다면 무시해도 좋습니다.

목차를 구성하는 방법

여기서 말하는 목차란, 제목으로 구분되는 문서의 구조를 의미합니다. 이 구조를 Outline이라 부르며, 이것은 단계가 있는 리스트 형식으로 표현되기 때문에 “개요”라는 말 보다는 목차로 합니다.

제목만으로 구성하는 암시적 섹션

문서 목차는 h1부터 h6에 이르는 헤딩 태그(Heading Tag)에 의해 만들어집니다. 이렇게 만들어진 목차는 내부적으로 생성되기 때문에 HTML 문서에서는 알 길이 없고, HTML5 Outliner와 같은 사이트 혹은 애플리케이션에서 확인할 수 있습니다.

가장 최상위 제목인 h1을 시작으로, 등급에 따라 단계(Level)별로 정리됩니다. 우리가 A라를 제목을 가진 헤딩 태그를 사용하면 자동으로 내부 목차가 생성됨과 동시에 섹션(Section)이라는 영역이 생깁니다. 이 영역에 해당 제목과 관련있는 내용들을 적게되는 것이죠.

이때 생성되는 섹션은 우리가 section 태그를 사용해서 만들어진 것이 아닌, 문서 규칙에 따라 임의로 만들어졌기 때문에 이것을 암시적 섹션이라고 합니다.

암시적 섹션은 헤딩 태그의 위계 혹은 중요도에 따라 아래와 같이 목차를 생성합니다.

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h2>Level 2 Heading</h2>
<h2>Level 3 Heading</h2>

작성한 제목(헤딩 태그) 이후에 나타나는 같거나 높은 등급의 제목은 새로운 섹션이 시작됨을 암시하며, 더 낮은 등급의 제목은 이전 섹션의 서브섹션이 시작됨을 암시합니다. 이해가 잘 가지 않는다면 아래 이미지를 참고합니다.

이렇게 암시적 섹션을 많이 생성하게 되면, 내용이 많은 문서에서는 h1부터 h6까지의 헤딩 태그가 뒤죽박죽으로 보여서 나중에 편집하기가 곤란해 집니다. 왜냐하면 이 헤딩 태그들은 들여쓰기를 할 필요가 없는 것들이기 때문에 단락이 명확히 눈에 띄지 않죠. 그래서 W3C는 암시적 섹션 보다는 명시적 섹션을 사용하길 권장합니다.