html heading outline - part1

html 문서의 heading outline은 웹접근성과 웹표준과 관계가 있다.

heading outline을 따라가면 사이트의 구조가 어떻게 짜였는지 확인할 수 있다.

책으로 치면 문서 목차와 같은 역할을 하기도 하고, 제목과 부제목 등을 관련있는 컨텐츠끼리 묶는 역할을 한다고 보면 된다.

 

 

새로운 섹션을 지정할때 div로 구조를 나눌 수도 있지만, html 문서 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시한다. 크롬 확장프로그램에서 html5 outliner을 추가하여 사용하면 웹사이트의 문서적 흐름과 구조에 대하여 편하게 확인할 수 있다.

 

h1에서 h6까지 사용하여 문서의 제목을 지정해보았다.

html5 outliner를 사용하여 문서 흐름을 확인해보면 아래와 같이 문서의 흐름을 보여준다.

div로 따로 구역을 나누지 않았지만 그래도 heading title의 순서대로 목차가 나열이 되고, 그 밑의 heading title이 차례로 아래 목차로 들어가게 된다.

 

 

html5에서는 문서 아웃라인을 조금더 의미있게 정의하기 위해서 새로운 태그를 추가하였다.

이것은 다음 번에 태그에 대해 자세히 다뤄보자!

 

 

 

참고:

developer.mozilla.org/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

HTML 구획과 개요 사용하기 - 웹 개발자 안내서 | MDN