문서 구조나 콘텐츠의 의미를 나타내는 새로운 요소가 다수 추가
섹션 관련 새 요소
Section 요소
표제와 그에 따른 콘텐츠를 그룹화. 문서의 아웃라인을 생성하고 정보의 계층 구조를 명시.
- section : 장이나 절 같은 표제와 개요를 동반하는 일반적인 섹션
- article : 독립적인 콘텐츠
- aside : 메인 콘텐츠와 연관성 떨어지고 없어도 문제가 없는 섹션
- nav : 내비게이션
문서 아웃라인
정보의 계층 구조를 가리킨다. 책의 차례와 같은 것. 제목, 장, 항, 절 등의 트리(계층 구조) 구조 = 아웃라인
작성 방법
표제 요소(h1 ~ h6)의 레벨
- 정보의 계층 구조에 맞추어 표제 레벨을 바꾸기
섹션 요소의 그릇 상태
- 섹션 요소로 그릇 구조 만들기. 종료 태그로 섹션의 끝을 명시. '명시적 아웃라인'
아웃라인 알고리즘
아웃라인을 판별하는 구조. HTML5에서는 섹션 요소로 만들어진 아웃라인 쪽을 우선한다. (없으면 표제 레벨로 구분)
섹션 요소 안의 표제 레벨 취급
"섹션 요소로 정확히 아웃라인을 작성한 경우, 그 안 표제 레벨의 문법적인 부분을 따지지 않는다." 즉, 섹션마다 h1을 쓸 수 있다. 섹션이 다르면 같은 레벨의 표제를 사용해도 상관없다.
4 개의 섹션 요소
모두 아웃라인을 생성한다는 공통점
section
- 일반적인 섹션. 섹션 요소를 사용할 때는 거의 예외없이 표제가 필요하다. div의 대용이 아니므로 레이아웃이나 스타일 목적이라면 div를 사용해야 한다.
article
- 단독으로 전송 가능한 '독립적인 섹션' = 문서에서 이 섹션만 빼내도 독립한 기사로 성립. RSS 전송이 가능한가?
레이아웃에서 메인 콘텐츠 영역과 아티클 요소가 되는 영역은 관계없다. 어디까지나 그 섹션이 독립되어 있는지를 판단 기준으로 삼을 것.
aside
- 메인 콘텐츠와 관련성이 적은 보충 콘텐츠. 표제는 필수가 아니다.
nav
- 내비게이션. 글로벌, 하단용 로컬, 페이지 내 점프용 링크, 다음으로-앞으로 등의 페이지 내비게이션, 브레드스크럼 등
섹션 관련 기타 새로운 요소
header / footer
- 개별 섹션에 각각 이용할 수 있어서 페이지 내에 다수 존재해도 상관없다.
main
- 웹 문서나 어플리케이션의 '메인 콘텐츠 영역'. 페이지 내에 1개. section, article, aside, nav, header, footer 안에 사용할 수 없다.
figure, figcaption
- 삽화, 예제, 해설 음성, 동영상, 프로그램 코드 등 본문에 참조되는 독립된 콘텐츠
- 본문 내용을 설명하는 데 필요한지 + 본문에서 분리해 별도 페이지 표시를 해도 의미가 통하는지
Akemi Kusano, 30일 레슨으로 쉽게 배우는 HTML5 & CSS3 웹 표준 디자인 강좌, 13장
댓글