일반적으로 웹 페이지 혹은 웹 애플리케이션을 제작할 때는 페이지에 담긴 내용을 효과적으로 전달할 수 있도록 그 중요도에 따라 전체적인 내용의 윤곽(outline)을 그리는 일부터 시작된다.
그런데 HTML5에선 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들이 소개되었을 뿐만 아니라 웹 브라우저가 문서를 읽고 DOM tree를 해석하는 outline algorithm에도 변화가 있어서, 이 바뀐 점을 올바로 이해하고 적용하는 것이 문서 전체의 윤곽을 잡는데 아주 중요한 일이 되었다.
웹 문서는 보통 DOM tree 속 여러 nodes로 구성되어 있는데, 이것들은 또 sectioning content(article, aside, nav, section)와 sectioning root(blockquote, body, details, dialog, fieldset, figure, td) 요소로 나뉘어진다. 이 각각의 section은 하나의 해당 heading 요소를 가질 수 있으며, 그 안에는 또 다른 section들이 중첩되서 포함될 수가 있다. 그래서, 이들 각자의 section과 heading은 문서의 outline 기준을 잡는 결정적인 요소가 된다. (참고로, 여기서 말하는 section은 <section> 요소를 말하는 것이 아니고 문서 상 그 내용을 구분 짓는 한 단위를 뜻하며 보통 heading을 포함하고 있다. 그리고 sectioning root 요소는 상위 요소의 문서 윤곽에 영향을 끼치지 않는다.)
물론, headings 요소로 h1-h6 그리고 hgroup이 사용되고, sectioning content 안의 첫 번째 heading 요소가 해당 section의 heading이 된다. 그래서 다음과 같은 문서의 구조를 가진 경우를 예로 들면,
AAABBBCCCABCDEFGDDDEEEHIJKLMN
다음과 같은 구조를 갖게 된다:
주목할 것은, 마지막 <section> 요소로 앞선 암시적 section 구분을 마치면서, 뒤에 있는 “HIJKLMN” 문단이 최상위 단계로 승격하게 된다.
sections는 어떠한 등급의 heading을 써도 무관하지만, 동일 수준에 위치한 section에서 사용된 heading 등급을 써야 할 경우가 아니라면, h1 요소를 쓰도록 강하게 권고하고 있다.
그래서, 나중에 section 내용을 옮길 경우가 생기더라도 해당 section의 heading으로 어떤 등급을 써야 할지 고민할 필요가 없어져서 관리가 훨씬 수월해진 것이다.
그럼, 여기서 <hgroup>의 사용 용도는 무엇일까.
물론, h1-h6 요소를 한데 묶는 목적으로 쓰이지만, 그 사용 예를 들자면 제목과 부제목 혹은 로고와 그 밑의 슬로건 정도로 쓰인 heading 요소를 묶는 데 사용될 수 있겠다. 중요한 것은, document outline 관점에서 살펴봤을 때, <hgroup>으로 묶인 heading들 중 가장 최상위 등급의 heading만이 해당 section의 heading을 결정지으면서 문서 outline에 영향을 끼친다는 점이다.
좀 더 자세한 내용은 The hgroup element 소개 글에 나와 있다.
이렇게 해서, 자기가 작성한 HTML5 문서의 전체적 윤곽은 HTML5 Outliner를 써서 한눈에 확인할 수 있다. (<nav> 요소를 썼을 때 보이는 “Untitled Section”은 버그로 무시해도 됨.)
어떤 문서든 의미에 맞는 요소를 적재적소에 쓰는 것이 훌륭한 HTML5 문서 구조를 이루는 기본이 되겠다.
추가 참고 문서 – HTML5 문서의 섹션과 윤곽 – HTML | MDN
내용 추가 – HTML5 outliner (h5o) 프로젝트 페이지에 가면 HTML5 문서의 윤곽을 표시해주는 Google Chrome extension과 웹 브라우저의 책갈피에 두고 사용할 수 있는 Bookmarklet을 확인해서 내려받을 수 있다.
내용 갱신 (2014. 1. 22) : Sectioning elements에서 사용되는 heading의 rank로 전엔 어떠한 rank를 써도 무방해서, 가령 다른 문서로의 부분 이식이 쉬운 이점을 살려 되도록 h1을 써주도록 권장했으나, 현 브라우저의 HTML5 document outline 지원 정도가 더뎌지면서, 대신 해당 섹션의 중첩도에 어울리는 것을 골라 사용하도록 하였다. 그리고 hgroup element는 spec에서 사라졌으며 대신 이것을 대치할 새로운 용법이 논의되고 있다. 자세한 변경 내용은 HTML5 Doctor 사이트의 Document Outlines에 관한 문서에서 확인할 수 있다.
“HTML5의 새로운 문서 Outline 알고리듬”에 달린 2개의 댓글
글 잘 읽었습니다. 항상 느끼는거지만 미남이님의 글은 흐름이 자연스러워서 참 잘 읽히네요. 😀
HTML4에서는 마크업의 일부를 모듈화할 때 붙여넣을 대상마다 헤딩의 단계가 제각각이어서 h2냐 h3이냐를 계산해주는 삽질을 하거나 그냥 heading이라는 class를 부여해서 때우거나 하는 등 매번 골치였어요.
HTML5 Outliner는 HTML5로 마크업을 할 때 항상 이용하게 될 툴이 될 것 같군요. “마크업을 한다면 필수!”라고 말해도 지나치지 않겠네요.
낯익은 아바타군요. 반갑습니다. 🙂
말씀하신 것처럼 앞으로 HTML5로 문서를 작성할 땐 그 윤곽 구조를 이해하면 올바른 element를 골라서 배치하는 것이 전보다 훨씬 쉽고 자연스러운 일이 될 것 같습니다.