HTML 요소와 구조

HTML5에서는 눈에는 보이지 않지만 문서의 구조를 나누는 요소들이 존재합니다. 이를 활용하여 마치 책의 목차와 같은 순서를 만들 수 있어 한 눈에 구조를 파악할 수 있게 됩니다.

섹션화 콘텐츠(sectioning contents)

해당하는 요소 : <article>, <aside>, <section>, <nav>
헤더와 푸터 범위내에서 콘텐츠를 그룹화하는 모든 섹션형 태그, 모든 섹션형 콘텐츠는 헤더와 아웃라인을 가지게 된다. 구조를 나누는 의미 요소

섹션 제목

섹션에는 각각 하나의 제목을 지정할 수 있으며 섹션 내부에 제목이 2개 이상이 있을 경우, 암묵적으로 해당 섹션이 나누어 지거나 하위 섹션을 만든다. HTML5에서 크게 바뀐것 중 하나가 섹션이 다르면 같은 수준의 제목을 사용할 수 있다는 것이다.

아웃라인(outline) : 개요, 윤곽-간결하게 추려낸 내용

헤딩: 아웃라인을 형성하는 필수 요소 구형 웹브라우저와 스크린 리더기에 문서의 개요를 전달할수 있음
문서 구조는 눈에 보이지 않기 때문에 까다롭게 느껴질 수 있는데 http://gsnedders.html5.org/outliner 웹 서비스를 이용하면 문서구조를 간편히 확인할 수 있다.

섹션화 루트(sectioning roots)

해당하는 요소 : <blockquote>, <fieldset>, <td>, <figure>, <details>, <body>
문서 구조에서 각기 영역을 갖지만 안에 들어있는 헤딩과 섹션영역은 문서 구조에 잡히지 않는다.

※ 아웃라인을 의식한 마크업

아웃라인 (1)