우리가 서점에 가서 책의 목차를 보고 관심있는 주제가 있으면 구매하듯이
검색 엔진도 마찬가지로 사이트의 heading 이 얼마나 잘 정리되어 있는지 판단
화면 낭독기 사용자도 웹 문서에서 heading 만 따로 추려서 음성으로 받은 다음에 관심있는 영역으로 이동해서 해당 영역을 음성으로 읽음
Outline
간결하게 추려낸 주요 내용. 윤곽
heading 과 section 으로 구성
chrome 의 HeadingMap extension 으로 heading 이 얼마나 잘 구성되어 있는지 한 눈에 확인 가능
올바른 작성법은 1부터 순차적으로 작성해야함 ex)) h1 없이 h2 사용 x
Heading
문서의 개요를 형성하는 필수 아이템
사이트와 화면 낭독기에 개요를 적극적으로 드러내는 방법
Title vs Heading
<title> 요소는 문서의 제목이며 한번만 사용 가능
<h*> 요소는 섹션의 제목이며 여러 번 사용 가능
Sectioning
개요의 범위를 명시적으로 지정
<article> 기사 본문, 맥락 독립적으로 배포 가능
<aside> 배너와 같은 페이지의 주요 내용이 아닌 부수적 내용
<nav> 사이트의 주된 탐색 메뉴
<section> 주제별로 나누거나 묶음
※ 여기서 주의점
HTML5 의 Outline 알고리즘은 웹 개발자가 heading 의 수준을 부적절하게 마크업을 했더라도 그것을 보정해주는 기능이 들어가 있음 ( 하지만 의존하면 안됨. 명세와 다르게 동작하기때문 )
<h1>A
<article>
<h1>B
<section>
<h1>C위 코드는 HTML5 명세의 의도대로라면
h1 A, h2 B, h3 C 로 계층이 나타내어져야 하지만,
브라우저/화면 낭독기에는 모두 같은 depth, 즉, h1 A, h1 B, h1 C 로 나타남
결론
heading 을 반드시 사용하고, heading 과 section 을 1:1 로 매핑하기
HTML5 개요 알고리즘에 의존하지 않기
