강의를 봅시다.
Outline
웹 문서의 개요는 헤딩과 섹션으로 구별된다.
웹 브라우저에서 Chrome HeadingMap Extension을 이용하면 해당 브라우저가
헤딩이 얼마나 잘 구성되어 있는지 확인할 수 있다.
OutLine의 4가지 키워드
- 헤딩
- 섹셔닝
- 명시적/암시적 섹션
- 어색한 섹션
Title vs Heading
Title은 문서에서 한 번만 사용할 수 있다.
Heading은 문서에서 여러 번 사용할 수 있다.
Heading
문서 개요를 형성하는 기본(필수) 아이템
웹 브라우저와 화면낭독기에 문서 개요를 드러내는 방법
헤딩이 없으면 문서의 개요도 없게 된다.
Sectioning Content
HTML5에서 새롭게 추가된 명세로, 명시적 개요를 생성하는 개요 컨테이너다.
적절한 수준의 헤딩을 자식 요소로 사용해야 함.
- article / 기사, 본문, 맥락 독립적으로 배포 가능
- aside / 페이지의 주요 내용이 아닌
- nav / 사이트의 주된 메뉴 탐색
- section / 주제별로 나누거나 묶는
마크업을 할 때는 h1, h2, h3를 순차적으로 사용하는 것이 좋다.
예시)
h1
article
h2
section
h3
명시적 섹선
헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션
암시적 섹션
섹셔닝 콘텐츠(article, aside, nav, section)를 사용하지 않고 헤딩만을 사용하여 암시적으로 개요가 생성된 섹션
명시적 섹션 예시)
h1
article
h2
section
h3
암시적 섹션 예시)
h1
h2
h3
명시적 섹션을 이용하자
어색한 섹션
최상위 헤딩이 없는 곳.
요약
- 헤딩을 사용하고 헤딩과 섹션을 1:1로 맵핑하기
- HTML5 개요 알고리즘에 의존하지 않기
느낀점
지금까지 section, nav, footer와 같은 태그를 사용해 본 적이 없다.
그냥 모두 div로 묶어서 사용했는데,
이제는 의미를 알고 있으니
한 번 헤딩 태그와 섹션 태그를 적절하게 사용해보는 연습을 하면 좋을 것 같다.
이런 것도 몰랐다니.
매우 기초적인 내용이지만 매우 중요했다.