시맨틱 요소(Semantic Element)

   

Semantic적인 Element

• Semantic적인 Element가 새롭게 추가되었습니다.
• 의미 없는 <div> 태그의 사용보다 문서의 내용을 쉽게 이해할 수 있도록 의미를 가지는 새로운 태그 요소가 HTML5에 추가되었습니다.
• 페이지의 구조를 더 잘 나타내기 위해 새로운 태그 추가

   

Element	설명
Header	문서의 Header를 나타낼때 사용 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등을 포함시킬 때 사용
Footer	문서의 Footer를 나타낼때 사용 웹 페이지의 하단을 만들 때 사용하는 태그 작성자 정보나 저작권 정보, 관련 문서 링크 등 카피라이트 영역을 표현할 때 사용
Nav	문서내에 Navigation 요소가 있을때 사용 웹 페이지의 메뉴를 만들 때 사용하는 태그 사이트의 메뉴나 링크 같은 내비케이션 요소 포함시킬 때 사용 보통 <ul> 태그와 목록요소를 나타내는 <li> 태그를 함께 많이 사용합니다.
Section	실제 문서 내용으로 해당 중심 내용을 감싼 공간을 의미하는 태그 문서의 영역을 구성하며, 여러 중심 내용을 감싸는 공간을 의미하는 태그 문서구조를 구성하는 H1~H6 와 함께 사용
Article	하나의 글 또는 완결된 내용을 정의 문서 내용이 많을 경우 여러 개의 <article> 요소로 분할하는 태그 뉴스 기사나 블로그 article 과 같은 독립된 컨텐츠(Contents)를 표시할때 사용
Aside	웹 페이지 왼쪽이나 오른쪽에 부가적인 내용을 나타내는 영역 문서의 주영역 주변에 배치되어 퀵메뉴나 광고영역으로 주로 사용됩니다. 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용 부차적인 또는 관련 있는 내용을 페이지 한쪽에 표시할 때 사용 오른쪽의 광고 표시로 사용
Hgroup	각 Section 의 Header 를 나타낼때 사용 제목과 그에 관련된 부제목을 하나로 묶어주는 역할
Figure, Figcaption	그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용