<구조화 마크업>

header 헤더를 의미

헤더와 네비는 분리하여 사용합니다.

hgroup 문서를 하나의 그룹으로 묶어줍니다.

제목과 부제목의 묶음. 제목과 그와 관련된 부제목을 묶어줍니다. 

이렇게 함으로써 문서의 중요한 뼈대를 쉽게 구성할 수 있습니다.

nav 네비게이션을 의미. 문서의 어느 위치든 배치할 수 있습니다.

aside 사이드에 위치하는 공간을 의미.

본문 외 참고글. 위젯 영역 등에서 사용합니다. 웹페이지의 본문 내용을 구성하고 남는 내용으로 사이드바를 구성합니다.

section 여러 중심 내용을 감싸는 공간을 의미

문서의 영역을 구성. 여러 article을 포함할 수 있습니다.

제목을 붙여서 콘텐츠 그룹을 사용하는 아티클 태그와는 달리, 섹션 태그를 사용한 콘텐츠는 웹상에서 배포할 수 없습니다.

article 글자가 많이 들어가는 부분을 의미. 웹상의 실제 내용.

독립적인 콘텐츠를 표시. 아티클 태그를 사용한 콘텐츠는 웹상에서 다른 곳에로 배포되거나 재사용될 수 있습니다. 보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 웹 콘텐츠의 독립적인 항목 등이 모두 여기에 해당될 수 있습니다.

footer 바닥글. 푸터를 의미. 푸터 태그 안에는 다른 여러 요소들이 포함될 수 있습니다.

<특정 의미 기반 태그>

h1~h6 제목

figure, figcaption 그림이나 도표, 소스 코드 등에 설명글을 붙일 수 있습니다.

mark 글씨에 형광펜으로 칠한 효과를 만들어 줍니다. 텍스트에 강조 표시.

time 날짜나 시간을 표시해 줍니다.

문서가 작성된 시간을 기록해주는 것입니다. 예를 들어 <article>..........<time datetime="2012-1-1"></article> 이라고 한다면 article태그 내에 있는 내용들은 article태그 내에 있는 time태그의 datetime에 저장된 시간에 작성이 됐다고 기록이 남게됩니다.

(http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040205&docId=143155004&qb=7Iuc66mY7YuxIO2DnOq3uA==&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=Rf92fU5Y7udssum047VsssssssN-492103&sid=US91YXJvLDgAACN@HLE)

address 주소를 표시하기 위한 요소가 아니라 제작자 이름이나 웹 페이지 주소.

메일 주소 등의 연락처 정보를 표시하기 위한 것입니다.

canvas 그래픽을 표시합니다.

i HTML4에서의 용도와 달리 외국어나 분류학적인 용어.

대본에서의 무대 지문, 머릿 속 생각 등 다른 텍스트와 구별되는 텍스트를 표시할 때 사용됩니다. 트위터 부트스트랩에서는 i 태그를 활용하여 아이콘을 표시하고 있습니다.

b html4의 용도와 달리 제품 소개 페이지에서의 제품명처럼 특별히 중요하지 않지만 진하게 표시해야할 텍스트를 표시할 때 사용합니다. (소개는 이렇지만 별반 다르지 않아보입니다.)

small HTML4의 용도와 달리 주변의 텍스트보다 포커르를 받지 못하는 텍스트를 표시할 때 사용합니다.

hr 주제가 완전히 달라지는 단락과 단락 사이에 사용됩니다.

※ 이 외에도 많은 시멘틱 태그가 있지만 일단 생략하겠습니다.

시멘틱은 웹이 아닌 타 어플리케이션과 구분되는 가장 큰 특징입니다. 개발자들은 보통 시멘틱 요소를 무시하거나 멋대로 사용하는 경향이 있습니다. 하지만 이런 시멘틱 요소들이 잘 배합되었을 때 웹 서비스 개발 프로젝트에서 보다 더 큰 효과를 얻을 것입니다. 웹은 텍스트로 이루어졌고, 각 텍스트는 의미를 가지고 있습니다. 최종적으로는 브라우저 내의 콘텐트라는 것은 순수하게 텍스트를 의미합니다.웹 사이트와 웹 어플리케이션은 텍스트를 기반으로 만들어진 시스템입니다. 텍스트를 통해 웹은 연결되고, 검색되고, 융합 가능한 것입니다. 오픈된 환경에서의 웹 콘텐트는 검색엔진이나 접근 가능한 툴에 의해 모아지고 뭉쳐지게 됩니다. 이런 좋은 혜택은 공짜로 얻게 되는 것이 아닙니다.자동화된 툴은 콘텐츠의 내용을 완전히 이해하지는 못합니다. 이에 올바른 시멘틱 요소를 콘텐트에 맞게 사용하는 것이 이러한 써드파티들이 여러분의 웹을 잘 이해하는 데에 도움이 될 것입니다. 이를 위해 HTML5에서는 몇몇의 새로운 툴(태그)을 제공함으로써 개발자들이 쉽게 콘텐트를 의미 있게 구상할 수 있게 합니다.

시멘틱 태그는 모두 div 태그와 같은 기능을 수행합니다. 시멘틱 웹은 우리가 눈으로 레이아웃을 보는 것과 달리 기계적으로 검색 엔진이 해당 태그가 어떤 기능을 하는지 분별하기 위해 특정한 태그에 의미를 부여하여 만든 웹 페이지입니다.

<div id=header> 라고 div로 해당 영역을 설명할 수도 있습니다. 시멘틱 태그로도 나타내지 못할 정도의 복잡한 레이아웃이라면 div 로 나타내는 것도 나쁘진 않을 것입니다.

하지만 이런 시멘틱 태그로도 충분히 나타낼 수 있는 구조라면 사람의 눈으로도 훨씬 의미를 구분하기 쉬운 시멘틱 태그를 사용하는 것이 효율적일 수도 있을 것입니다.

시멘틱 웹과 관련된 내용은 위키피디아의 시멘틱 웹 페이지 http://goo.gl/CNceJ 를 참고해보세요.

(회색 박스로 칠해진 부분의 글귀는 확인이 필요할 것 같습니다.)

http://html5test.com/