HTML5에 추가된 요소들

자.. HTML5의 두번째 시간을 시작해 보도록 하겠습니다. 
먼저 HTML5의 예제를 한번 보도록 하죠.. 

HTML5 예제
 
아마도 파이어폭스, 사파리, 크롬등의 브라우저에서 보면 곰 한마리가 나올겁니다. 
반면에 IE에서 살펴보면 video 태그를 지원하지 않는다는 텍스트가 나타납니다. 

아직 IE에서는 HTML5를 지원하지 않기 때문에 다른 브라우저를 설치하셔서 꼭 확인해보시기 바랍니다. 

다른 브라우저를 설치하고 난 다음에 이런 생각을 할 겁니다. 
뭐야~ 기존에 다 되던거 아닌가? 

그러나 기존에 embed 태그나 object 태그로 윈도우 미디어플레이어나 플래시로 재생하던 것과는 차이가 있습니다. 
바로 표준 HTML 규격으로 외부의 플러그인 설치 없이 브라우저만 가지고 동영상을 재생할 수 있다는 것이죠.
쉽게 이야기 하면 동영상을 재생하기 위해 "OOO을 설치하시겠습니까?" 하는 문구도 더 이상 볼 필요도 없다는 것이죠.

기존의 HTML을 살펴보면 처음 만든 의도와 다르게 사용되는 태그가 많아졌습니다. 
또 사용하지 않는 태그도 많아졌구요.. 

HTML5에서는 이런 태그들을 제거하고 새롭게 고쳐서 문서의 구조를 표현하는 태그, 비디오/오디오와 같은 멀티미디어 지원 태그, 폼에서 사용할 수 있는 속성들, 그리고 드로잉을 위한 태그를 추가했습니다.

참.. 요즘 보니 HTML5를 지원하겠다는 서비스들이 점차 늘어나고 있습니다. 
대표적인 동영상 사이트인 Youtube와 AOL과 같은 곳에서도 HTML5를 지원하겠다고 발표했네요.

그럼 새로운 HTML5의 요소들을 정리하도록 할께요.
세부 사항 중 중요한 것들은 추후 다시 한번 언급하도록 하겠습니다. 

신규 Markup 요소들

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both

미디어와 관련된 요소들

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<embed>	For embedded content, such as a plug-in

Canvas 요소

Tag	Description
<canvas>	For making graphics with a script

Form 관련 요소들

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

input 태그의 type 속성값들

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

많은 것 같지만 HTML을 생각해보면 그리 어렵지 않게 접근할 수 있을 겁니다. 
2011/01/18 - [프로그래밍] - HTML5에 대하여
2011/01/20 - [XML Developer/HTML5] - HTML5에 추가된 요소들
2011/02/02 - [XML Developer/HTML5] - HTML5 video 태그
2011/02/16 - [XML Developer/HTML5] - HTML5 audio 태그