HTML 개요 알고리즘 이해

• headingmap
• 헤딩
• 섹셔닝
• 명시적/암시적 섹션
• 어색한 섹션

SECTIONING ROOT

• 브라우저 제조사가 오랜 시간 HTML5 알고리즘을 구현하지 않았기 때문에 이 개념을 실무에 사용하는 것을 권장하지 않음.
  • body
  • blockquote
  • details
  • dialog
  • figure
  • fieldset
  • td
• HTML5에서 새롭게 추가된 명세
• 독립적인 개요를 생성하는 개요 컨테이너
• 섹셔닝 루트 외부에서 내부 개요에 접근 불가
• 문맥 아닌 콘텐츠를 전체 개요에서 격리하는 역할
  • 해당 태그 안에 헤딩을 넣더라도 개요로 취급되지 않는 영역

Sectioning Content

• article: 기사, 본문, 맥락 독립적으로 배포 가능
• aside: 페이지의 주요 내용이 아닌
• nav: 사이트의 주된 탐색 메뉴
• section: 주제별로 나누거나 묶는
• HTML5에서 새롭게 추가된 명세
• 명시적 개요를 생성하는 개요 컨테이너
• 적절한 수준의 헤딩을 자식 요소로 사용하여야 한다
• HTML5 명세 알고리즘에 의존하면 안된다.

명시적 섹션

• 헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션.

암시적 섹션

• 섹셔닝 콘텐츠를 사용하지 않고 헤딩만을 사용하여 암시적으로 개요가 생성된 섹션.

어색한 섹션

• h1을 건너뛰고 h2부터 출발한다거나 헤딩이 누락된 섹션.

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님