기존의 HTML에서는(HTML5 이전) 레이아웃의 구조를 상세하게 기술하는 태그가 부족했었습니다.
그래서 div를 사용하고 class를 나누었었기 때문에 매우 복잡한 구조가 됬었다.

HTML5에서는 "섹션" 요소들이 새로운 요소로 추가되었습니다.
문서 구조에 적합하게 섹션 요소들을 사용할 수 있게 된 것이죠. 


 HTML5 부터 도입된 섹션 요소

section
 범용적인 섹션을 나타낸다. 일반적인 문서나 애플리케이션의 섹션을 말한다.
 문서의 구조(책과 부, 장, 절)를 나타내기 위해 h1 ~ 의 요소들과 함께 사용된다.
 아웃라인(outline)과 상관없는 범위를 지정할때는 div 요소를 사용한다.
 (스타일링이나 스크립트를 위해서 범위를 나눌 필요가 있을때는 div 요소를 사용한다.) 

article
 문서내의 독립적인 글. 블로그 글이나 뉴스 본문 등이 이에 해당된다.
 블로그 본문 등 다른 페이지의 다른 부분으로부터 독립된 섹션을 나타낸다.
 여러개를 겹쳐 사용할 수 있다.
 안쪽의 article은 바깥쪽의 article과 밀접한 관계가 있다고 판단되어 진다.
 (article 안에 article 을 사용할 경우 하위 article이 상위 article에 관련된 내용이어야 한다.)
  - 블로그 본문을 article 요소로 나타내고, 댓글을 위한 하위 article 요소를 나타내는 것 등 

aside
 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용한다.
 즉, 섹션의 내용과 전혀 관련없지는 않지만 내용에서 분리되어도 문제 없는 섹션이다.
 블로그, 사이트의 사이드 바 등에 일반적으로 사용된다.
 섹션의 내용에 대한 보충 설명에는 적합하지 않다.
 또, 이를 문서의 일부분으로 간주한다. 

nav
 문서 내의 네비게이션 요소들을 표시하기 위한 영역이다.
 웹 페이지/웹 애플리케이션/웹 사이트와 관련된 네비게이션 메뉴를 나타낸다. 
 네비게이션 요소 내부를 어떻게 마크업해야하는가는 규정되어있지 않다.
 ul 요소, li 요소를 이용하여 메뉴를 표시하는 것이 적절하다.  





 새로 도입된 섹션 요소의 사용 예제

여기서 섹션 요소라고 하는 것은 article, aside, nav, section 등을 모두 지칭하는 말입니다.
특징을 가지고 영역을 나눌 수 있는 요소들이라고 생각하시면 됩니다.

section 요소는 여러부분에서 공통적으로 사용됩니다. 
아래는 article, aside, nav 요소에 대한 하나씩의 예제입니다.

nav의 사용



article과 section의 사용



aside와 section, nav의 사용


일반적으로 섹션 요소는 이런방식으로 사용되지만, 마크업을 하는 방법에는 정답이 없습니다.






Posted by croute

댓글을 달아 주세요

  1. BlogIcon 이니나 2012.02.13 14:02  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다

  2. agapeuni 2013.01.28 00:09  댓글주소  수정/삭제  댓글쓰기

    좋은글 출처를 표시하고 블로그에 담아갑니다. ^^