[HTML5 연재] 새로운 요소, 태그들

HTML5의 새로운 요소들

1999년 HTML 4.01이 표준이 된 이후 짧지 않은 시간을 거치면서, 인터넷은 상당히 많이 변화 했습니다.

오늘날 HTML 4.01의 몇 가지 요소들은 오래 되었거나, 혹은 더 이상 사용되지 않으며 그 중 몇 몇은 처음 의도 되었던 바와는 달리 사용되고 있습니다. 이러한 요소(태그)들은 HTML5에서 사라지거나 혹은 새롭게 다시 태어나게 됩니다.

현재 사용되고 있는 인터넷의 여러 필요에 좀 더 부응하기 위해 HTML5는 더 나은 구조, 더 나은 폼 처리, 향상된 그리기 기술, 간략하며 강력한 미디어 컨텐츠 표시 기술 모두를 포함하고 있습니다.

새로운 시맨틱^[각주:1]/구조적 요소(태그)들

HTML5는 더 나은 구조를 위해 다음과 같이 새로운 요소를 제공하고 있습니다:

태그	설명
<article>	특정 내용이나 기사, 혹은 글을 표시하기 위해 사용됩니다.
<aside>	본문 내용에 대한 추가적인 설명이나 혹은 Tip을 설명하기 위해서 사용하는 태그 입니다.
<bdi>	바깥쪽의 여러 텍스트와 다른 방향으로 서식이 지정된 글의 부분을 구분하기 위해 사용됩니다.
<command>	사용자가 동작시킬 수 있는 명령 버튼을 정의 합니다.
<details>	사용자가 보거나 감출 수 있는 추가적인 상세 사항을 정의 합니다.
<summary>	<details> 요소를 위한 제목을 정의합니다.
<figure>	부가적인 설명글(캡션)이 붙을 일러스트레이션, 다이어그램, 사진, 코드 목록과 같은 컨텐츠를 지정합니다.
<figcaption>	<figure> 요소에 대한 설명글을 정의합니다.
<footer>	문서나 특정 구역에 대한 하단부(푸터, Footer)를 정의합니다.
<header>	문서나 구역의 도입 부분, 혹은 상단 네비게이션 요소의 그룹을 지정합니다.
<hgroup>	문서의 제목부가 여러 단계로 나눠져 있는 경우 <h1>에서 <h6>까지의 요소들을 집합으로 묶습니다.
<mark>	의미적으로 중요한 부분을 강조하기 위해 사용합니다. 시각적 효과는 없지만, 내용상 다른 부분보다 중요한 부분임을 표시할때 사용할 수 있습니다. 시각적 효과는 CSS를 통해 mark { font-weight:bold; color:black; }... 와 같은 형태로 적용할 수 있습니다.
<meter>	특정 범위내에서 특정한 수치를 나타낼때 사용하는 태그 입니다. 지정된 값은 시각적으로 게이지바 (프로그래스바) 형태로 화면에 나타납니다. 현재 크롬, 오페라 웹브라우저만 이 태그를 지원하고 있습니다.
<nav>	네비게이션 링크 포함된 영역임을 나타낼때 사용합니다.
<progress>	작업의 진행률을 프로그래스바 형태로 나타냅니다. 역시 크롬과 오페라에서만 지원되고 있습니다.
<ruby>	텍스트위에 주석을 달때 사용하는 태그로서, 일본어나 중국어와 같은 동아시아 문자열을 표현할때 사용합니다.
<rt>	요소 하위에 사용되며, 텍스트 윗쪽에 달릴 실제 주석의 내용을 정의합니다.
<rp>	문자열 주석 태그를 지원하지 않는 웹브라우저에서 표시될 메시지를 정의합니다.
<section>	문서의 구역을 정의합니다.
<time>	날짜나 시간을 정의합니다.
<wbr>	줄 분리 지점을 정의합니다.

새로운 미디어 요소들

HTML5는 미디어 컨텐츠를 위한 새로운 요소들을 제공하고 있습니다.

태그	설명
<audio>	사운드 컨텐츠를 정의합니다.
<video>	비디오나 영상을 정의합니다.
<source>	<video>나 <audio> 태그 내부에 여러개의 미디어 자원을 지정합니다.
<embed>	외부 프로그램이나 상호 작용적인 컨텐츠를 위한 컨테이너를 정의합니다. (플러그인용)
<track>	<video>나 <audio> 요소에 대해 텍스트 형태의 트랙 정보나 자막을 지정해 줍니다.

새롭게 등장한 <canvas> 요소

태그	설명
<canvas>	스크립트를 사용해 실시간으로 그래픽을 그릴때 사용됩니다. (스크립트는 거의 대부분 자바스크립트가 사용됨)

새로운 양식(Form) 요소들

HTML5는 더 많은 기능을 위한 새로운 폼(Form) 요소들을 제공합니다.

태그	설명
<datalist>	입력 컨트롤을 위한 옵션들을 목록 형태로 사전 정의해 지정합니다.
<keygen>	웹브라우저가 암호화를 위한 공개키, 개인키를 생성할 수 있도록 해줍니다.
<output>	계산의 결과를 표현합니다.

사라진 요소들