구조 시각화

(구조적 의미 패턴의 예제와 같은 코드임)

구조적 의미 패턴의 예제

이 제목은 해당 섹션의 주제를 나타낸다.

이 문단은 제목의 주제를 소개한다.

이 문단은 제목의 주제를 계속 설명한다.

문서 안의 모든 것은 관련이 있다. 블록 구조는 관계의 순서와 밀접도를 나타낸다. 내용을 더 많은 요소로 감쌀수록, 그 내용은 상위 요소나 대등 요소에 밀접하게 연결된다.

  • 이것은 무순서 리스트다.
  • 리스트 항목은 div 안의 항목에 비해 더 관계가 밀접하다.
  • 무순서 리스트 항목의 순서는 중요도와 무관하다.

새 구조 요소

article기사나 그밖의 완전한 본문 내용
aside두 번째 내용(예: 사이드 바)
footer푸터 영역
header헤더 영역
nav내비게이션 영역
section페이지의 논리 영역

푸터에는 보통 작성자 등 섹션에 관한 정보가 들어간다