HTML5 시맨틱 태그

• 시맨틱 태그
  • 태그를 통해서 의미를 전달. 소스를 보면 코드가 한눈에 쏙!
• section
  • 문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌때 사용.
  • 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조 갖지 않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향 안줌.
  • 신문기사와 같은 배포형은 section이 아닌 article 사용
  • section에 스타일이나 스크립트를 지정하려 한다면 div를 사용.
• article
  • 문서내의 독립적인 글, 블로그 글이나 뉴스 본문등을 구성하는 섹션.
  • article 안에서 header, footer와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관없음
  • article요소가 중첩될경우 중첩된 article요소는 서로 상호관련이 있어야 한다.
    • ex) 블로그 글을 나타내는 article요소 내부에 블로그 방문자 댓글이나 의견을 article요소로 넣을 수 있다.
• aside
  • 섹션의 내용과 관련없진 않지만 분리되어도 문제없는 섹션. 주로 사이드바 형태로 표현.
  • aside태그는 본문 내용에 대한 추가적인 설명할때 사용하는 태그. 본문과 별도로 추가적인 언급을 할때 사용.
• header
  • 머릿말 태그, 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정.
• footer
  • 페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분.
• menu
  • 페이지 내 기능을 하는 버튼/링크의 모음(대표적으로 툴바)을 나타낸다.
  • type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.
• nav
  • 외부 페이지로 연결되는 링크의 모음