[HTML5] HTML5 기초 : 추가된 TAG

Html5는 시맨틱 마크업(Semantic Markup)을 할 수 있도록 기존보다 좀더 의미가 담겨있는 새로운 태그들을 지원하고 있습니다. 예전에 세미나에서 들었던 이야기로는 이러한 태그들을 만들때 기존에 사용자들이(여기선 개발자나 퍼블리셔등이 되겠지요) 각 컨텐츠에 대해 어떠한 Class나 ID를 쓰는지 조사하고 적용했다는 소문이 있더군요.

---

section

- 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h_n와 함께 사용할 수 있습니다.

article

- 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠를 표시합니다.

aside

- 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠를 표시합니다.

hgroup

- 제목과 그에 관련된 부제목을 하나로 묶습니다.

header

- 헤더 부분으로 , 사이트 소개나 내비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역할을 하기도 합니다.

footer

- 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용합니다.

nav

- 사이트 안의 내비게이션 요소를 표시합니다.

figure, figcaption

- 그림이나 비디오 같은 멀티미디어 콘텐츠에 갭션을 붙이려고 할 때 사용합니다.

audio, video

- 멀티미디어 콘텐츠를 표시합니다. 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공합니다.

embed

- 플러그인 콘텐츠를 표시합니다.

mark

- 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 만듭니다.

progress

- 시간이 걸리는 작업과정을 막대로 표시합니다.

meter

- 측정값을 표시합니다.

time

- 날짜나 시간을 표시합니다.

ruby, rt, rp

- 루비 문자를 표현합니다.

canvas

- 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들 수 있습니다.

command

- 사용자 실행 명령어를 표시합니다.

details

- 추가적인 정보나 사용자가 요청하는 정보를 표시합니다.

datalist

- 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.

keygen

- 양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 Private key(프라이비트키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장 합니다.

output

- 수학적인 계산의 결과값을 표시합니다.

*위 내용은 HTML5+CSS3(고경희/이지스퍼블리싱) 참고 표입니다.

---

section, article, header, footer, nav는 조금이라도 Html5소식을 들었던 분이라면 들어 보셨을테고 나머지들도 꽤 있네요. 가끔 hgroup은 외국 블로그나 사이트를 보면 키워드나 주제문장같은것들이 상단에 모여있으니 많이 사용하겠구나 싶긴한데 우리나라 실정엔 어떻게 적용을 하게 될지 아직 잘 감이 안오네요. H_n의 위치 가지고도 많은 토론을 벌였던게 엊그제 같은데...

embed는 어랏 이건 새로 추가된게 아니지 않나 하는 의문을 가질 수 있는데요.

이유는 Html5이전 까지는 비표준 태그로 계약직 이었던 것이 Html5에서는 표준태그로 정식 채용됨에 따라 정규직이 되었다 뭐 이런 이야기네요. 

ruby, rt, rp는 이름이 이뻐서 나오기 전에 뭔지 궁금했었는데 글자 위에 주석을 다는 태그입니다. 자세한 설명은 나중에 예제나 세부 설명할때 할게요.