티스토리 툴바

http://www.findmebyip.com/litmus/

ie는 답없다...

저작자 표시 비영리 동일 조건 변경 허락

'Web story > html5' 카테고리의 다른 글

html5 브라우저별 호환 비교  (0) 2011/09/30
html5 치트시트  (0) 2011/03/09
HTML 5 reference  (2) 2011/02/11
W3C Introduces an HTML5 Logo  (0) 2011/01/20
xhtml5의 기본 샘플 예  (0) 2011/01/18
다중언어 마크업(polyglot markup)  (0) 2010/12/30


저작자 표시 비영리 동일 조건 변경 허락

'Web story > html5' 카테고리의 다른 글

html5 브라우저별 호환 비교  (0) 2011/09/30
html5 치트시트  (0) 2011/03/09
HTML 5 reference  (2) 2011/02/11
W3C Introduces an HTML5 Logo  (0) 2011/01/20
xhtml5의 기본 샘플 예  (0) 2011/01/18
다중언어 마크업(polyglot markup)  (0) 2010/12/30

Elements

  • <!DOCTYPE>
  • a
  • abbr
  • acronymNot Support in HTML5
  • address
  • appletNot Support in HTML5
  • area
  • articleNew Element
  • asideNew Element
  • audioNew Element
  • b
  • base
  • basefontNot Support in HTML5
  • bdo
  • bigNot Support in HTML5
  • blockquote
  • body
  • br
  • button
  • canvasNew Element
  • caption
  • centerNot Support in HTML5
  • cite
  • code
  • col
  • colgroup
  • commandNew Element
  • datalistNew Element
  • dd
  • del
  • detailsNew Element
  • dfn
  • dirNot Support in HTML5
  • div
  • dl
  • dt
  • em
  • embedNew Element
  • fieldset
  • figcaptionNew Element
  • figureNew Element
  • fontNot Support in HTML5
  • footerNew Element
  • form
  • framNot Support in HTML5
  • frameseNot Support in HTML5
  • h1 ~ h6
  • head
  • headerNew Element
  • hgroupNew Element
  • hr
  • html
  • i
  • iframe
  • img
  • input
  • ins
  • keygenNew Element
  • kbd
  • label
  • legend
  • li
  • link
  • map
  • markNew Element
  • menuNew Element
  • metaNew Attribute
  • meterNew Element
  • navNew Element
  • noframesNot Support in HTML5
  • noscript
  • object
  • ol
  • optgroup
  • option
  • outputNew Element
  • p
  • param
  • pre
  • progressNew Element
  • q
  • rpNew Element
  • rtNew Element
  • rubyNew Element
  • s
  • samp
  • script
  • sectionNew Element
  • selectNew Attribute
  • small
  • sourceNew Element
  • span
  • strikeNot Support in HTML5
  • strong
  • style
  • sub
  • summaryNew Element
  • sup
  • table
  • tbody
  • td
  • textarea
  • tfoot
  • th
  • thead
  • timeNew Element
  • title
  • tr
  • ttNot Support in HTML5
  • uNot Support in HTML5
  • ul
  • var
  • videoNew Element
  • wbrNew Element
  • xmpNot Support in HTML5

New Elements

  • article
  • aside
  • command
  • details
  • summary
  • figure
  • figcaption
  • footer
  • header
  • hgroup
  • mark
  • meter
  • nav
  • progress
  • ruby
  • rt
  • rp
  • section
  • time
  • wbr

New Media Elements

  • audio
  • video
  • source
  • embed

The Canvas Element

  • canvas

New Form Elements

  • datalist
  • keygen
  • output


출처 : http://www.clearboth.org/wiki/doku.php?id=study:html5:reference_guide:temp&utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+Clearboth+(ClearBoth)

저작자 표시 비영리 동일 조건 변경 허락

'Web story > html5' 카테고리의 다른 글

html5 브라우저별 호환 비교  (0) 2011/09/30
html5 치트시트  (0) 2011/03/09
HTML 5 reference  (2) 2011/02/11
W3C Introduces an HTML5 Logo  (0) 2011/01/20
xhtml5의 기본 샘플 예  (0) 2011/01/18
다중언어 마크업(polyglot markup)  (0) 2010/12/30

HTML5 W3C unveiled today an HTML5 logo, a striking visual identity for the open web platform. W3C encourages early adopters to use HTML5 and to provide feedback to the W3C HTML Working Group as part of the standardization process. Now there is a logo for those who have taken up parts of HTML5 into their sites, and for anyone who wishes to tell the world they are using or referring to HTML5, CSS, SVG, WOFF, and other technologies used to build modern Web applications. The logo home page includes a badge builder (which generates code for displaying the logo), a gallery of sites using the logo, links for buying an HTML5 T-shirt, instructions for getting free stickers, and more. The logo is available under "Creative Commons 3.0 By" so it can be adapted by designers to meet their needs. See also the HTML5 logo FAQ and learn more about HTML5.


대충 번역기 돌려본결과...

W3C는 오늘 HTML5 로고, 개방형  플랫폼 눈에 띄는 시각적인 신원 공개했다.W3C는 HTML5를 사용할 수있는 표준화 프로세스의 일부로 W3C의 HTML을 작업그룹 피드백을 제공하는 얼리 어댑터 권장합니다. 지금하고, 자신의 사이트HTML5의 일부분 찍은 이들에 대한 로고 있습니다 CSS는 그들이 사용되거나HTML5 참조 세상 얘기하고자 사람,는 SVG, WOFF, 그리고 현대적인 웹 애플 리케이션을 빌드하는 데 사용되는 다른 기술 . 로고  페이지가 배지 빌더 (로고 표시하는 코드를 생성하는) 로고 사용하여 사이트 갤러리를 포함, 무료 스티커 받고 자세한 내용은 지침 HTML5 티셔츠 구입 링크되어 있습니다. 로고 너무 그것자신의 요구 충족 디자이너 적용할 수 있습니다 "으로 크리에이 티브 커먼즈3.0"하에 있습니다. 또한 HTML5 로고 FAQ를 참조 하시고 HTML5에 대한 자세한 내용.


... 이 죽일놈에 영어...

출처 : w3c

저작자 표시 비영리 동일 조건 변경 허락

'Web story > html5' 카테고리의 다른 글

html5 치트시트  (0) 2011/03/09
HTML 5 reference  (2) 2011/02/11
W3C Introduces an HTML5 Logo  (0) 2011/01/20
xhtml5의 기본 샘플 예  (0) 2011/01/18
다중언어 마크업(polyglot markup)  (0) 2010/12/30
Tron 트레일러로 HTML 5의 가능성을 알아본다.  (0) 2010/12/14

html5와 같이 xhtml5도 크게 다른것이 없군요

출처는 http://en.wikipedia.org/wiki/XHTML#XHTML5

전 좀더 유동적인 확장성을 위해 xhtml5를 선택해야겠네요


Example 1.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>XHTML 5 Example</title>
 <script type="text/javascript">
 //<![CDATA[
 function loadpdf() {
    document.getElementById("pdf-object").src="http://www.w3.org/TR/xhtml1/xhtml1.pdf";
 }
 //]]>
 </script>
 </head>
 <body onload="loadpdf()">
 <p>This is an example of an
 <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.0 Strict document.<br />
 <img id="validation-icon"
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Strict" /><br />
 <object id="pdf-object"
    name="pdf-object"
    type="application/pdf"
    data="http://www.w3.org/TR/xhtml1/xhtml1.pdf"
    width="100%"
    height="500">
 </object>
 </p>
 </body>
</html>

Example 2.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <title>XHTML 5 Example</title>
 <script type="application/javascript">
 <![CDATA[
 function loadpdf() {
    document.getElementById("pdf-object").src="http://www.w3.org/TR/xhtml1/xhtml1.pdf";
 }
 ]]>
 </script>
 </head>
 <body onload="loadpdf()">
 <p>This is an example of an
 <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.0 Strict document.<br/>
 <img id="validation-icon"
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Strict"/><br/>
 <object id="pdf-object"
    type="application/pdf"
    data="http://www.w3.org/TR/xhtml1/xhtml1.pdf"
    width="100%"
    height="500"/>
 </p>
 </body>
</html>

저작자 표시 비영리 동일 조건 변경 허락

[신현석님 블로그 내용입니다]

XHTML2가 중단되고 HTML5가 급성장하고 있다. 하지만 나를 포함한 주변의 몇몇 XHTML의 강한 문법 규칙을 옹호하는 사람들은 HTML5의 너무 관대한 문법 규칙이 웹을 더 망치는 것이 아닌가 우려하고 있다. 물론 관대한 문법 규칙이 필요한 경우도 많고 각각의 장단점은 비교적 명확하다. 그리고 정말 강한 문법 규칙을 적용하려면 HTML5 스펙에 표시된 것과 같이 XHTML5를 사용하면 된다. 이렇게 만들어진 HTML이기도 하고 XML이기도 한 문서를 다중언어 마크업이라고 한다. 아직 초안이지만 특징을 살펴보았다.

전체내용 보기 : http://hyeonseok.com/soojung/webstandards/2010/12/28/621.html

저작자 표시 비영리 동일 조건 변경 허락



어떤 팬이 영화 Tron을 기념하고자 만든 트레일러에 HTML 5, JavaScript, 그리고 CSS 등을 이용해 웹 브라우저 안에서 여러 흥미로운 효과를 더해주는 모습을 보여주었습니다. 무엇보다 주목이 되는 것은 동영상을 재생하면서도 동시에 색상 / 크기 / 각도 / 동영상의 넓이 / 기울어진 정도 등 여러 부분을 바꿀 수 있는 것이 특징입니다. 아래 팬이 만든(HTML 5를 사용한 효과를 더하지 않은) Tron의 트레일러 영상을 감상하시고, 관심있는 분은 소스 페이지에서 직접 여러 효과를 더할 수도 있습니다....

출처 : http://kr.engadget.com/2010/12/09/tron-html-5/
저작자 표시 비영리 동일 조건 변경 허락

에이콘에서 html5 도서가 나왔네요

음.. 구입할가 말까 고민중입니다



http://www.acornpub.co.kr/book/html5-by-google-advocate

저작자 표시 비영리 동일 조건 변경 허락

드디어 나오나요

미리미리 공부해놔야 할듯합니다~


http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/

저작자 표시 비영리 동일 조건 변경 허락



http://www.yes24.com/24/goods/4201443


html5 관련 도서가 나왔네요

가뭄에 콩나듯 하나씩 나오나 봅니다

저작자 표시 비영리 동일 조건 변경 허락

실전 HTML5 가이드 pdf 파일입니다

 

출처 : http://html5.creation.net/html5-guide.pdf

저작자 표시 비영리 동일 조건 변경 허락

참석은 못했지만 필요한 자료들이네요

작성과 배포하신분들께 감사의 말씀 전합니다

CSS3 실전 예제 : http://naradesign.net/ouif/css3/presentation.html

HTML5 마크업 : http://dl.dropbox.com/u/444339/blog/HTML5Markup.pdf

 

기타 관련 자료 : http://channy.creation.net/blog/803

저작자 표시 비영리 동일 조건 변경 허락

http://www.focus.com/images/view/11905/

저작자 표시 비영리 동일 조건 변경 허락

국내 웹 종사자들에게 새로운 웹 표준인 HTML5을 소개하기 위한 행사입니다

참여하실분들은 아래 url에서 확인해보세요~

http://webappscon.com/html5/

저작자 표시 비영리 동일 조건 변경 허락

HTML 5에 추가된 새로운 요소

http://www.ibm.com/developerworks/kr/library/x-html5/

HTML5에서 삭제된 태그 HTML5에서 생성된 태그
태그 설명 버전 속성들
<!— —> 주석 – Comment 4 / 5 없음
<!DOCTYPE> 문서 타입 – document type 4 / 5 없음
<a> 하이퍼링크 – hyperlink 4 / 5 href | hreflang | media | ping | rel | target | type
<abbr> 약어, 약자 – abbreviation 4 / 5 Global Attributes
<acronym> 두문자어 – abbreviation 4 -
<address> 주소 요소 – address element 4 / 5 Global Attributes
<applet> 애플릿 – applet 4 -
<area> 이미지맵 범위 – area inside in image map 4 / 5 alt | coords | href | hreflang | media | ping | rel | shape | target | type
<article> 구역, 섹션 – article 5 Global Attributes
<aside> outside the main flow of the narrative 5 Global Attributes
<sound> 사운드 콘텐츠 – sound content 5 autobuffer | autoplay | controls | loop | src
<b> 텍스트 진하게 – bold text 4 / 5 Global Attributes
<base> 페이지 내 모든 링크의 기본 링크 – base URL for all the page links 4 / 5 href | target
<basefont> 문서 내 기본 폰트 – base font for the document 4 -
<bb> 유저 에이젼트 호출 – invoked user agent 5 type
<bdo> 텍스트 출력 방향 – direction of text display 4 / 5 dir
<big> 큰 텍스트 – big text 4 -
<blockquote> 긴 인용문 – long quotation 4 / 5 cite
<body> body 엘리먼트 – body element 4 / 5 Global Attributes
<br> 한 줄 바꿈 – insert a single line break 4 / 5 Global Attributes
<button> 버튼 – push button 4 /5 autofocus | disabled | form | formaction | formenctype | formmethod | formnovalite | formtarget | name | type | value
<canvas> 그래픽 범위 – canvas area 5 width | height
<caption> 테이블 제목 – table caption 4 / 5 Global Attributes
<center> 텍스트 중앙 정렬 – centerd text 4 -
<cite> 인용 – citation 4 / 5 Global Attributes
<code> 컴퓨터 코드 텍스트 – computer code text 4 / 5 Global Attributes
<col> 테이블 컬럼 속성 – attributes for table columns 4 / 5 span
<colgroup> 테이블 컬럼 그룹 – groups of table columns 4 / 5 span
<command> 명령 버튼 – command button 5 checked | default | disabled | hidden | icon | label | radiogroup | type
<datagrid> 트리, 리스트, 테이블의 데이터 – data in a tree, list or tabular 5 disabled
<datalist> 드롭다운 리스트 – dropdown list 5 Global Attributes
<dd> 정의 설명 – definition description 4 / 5 Global Attributes
<del> 삭제된 텍스트 – deleted text 4 / 5 cite | datetime
<details> 요소의 세부 항목 – details of an element 5 open
<dialog> 대화 (회화) – dialog (conversation) 5 Global Attributes
<dir> 디렉토리 리스트 – directory list 4 -
<div> 문서 섹션 – setion in a document 4 / 5 Global Attributes
<dfn> 용어 정의 – definition term 4 / 5 title
<dl> 정의 목록 – definition list 4 / 5 Global Attributes
<dt> 용어 정의 – definition term 4 / 5 Global Attributes
<em> 텍스트 강조 – emphasized text 4 / 5 Global Attributes
<embed> 외부 인터렉션 콘텐츠 또는 플러그인 – external interactive content or plugin 5 height | src | type | width
<fieldset> 필드셋 – fieldset 4 / 5 disabled | form | name
<figure> 미디어 콘텐츠 그룹과 그것들의 제목 – group of media content, and their caption 5 Global Attributes
<font> 텍스트 폰트, 사이즈, 색상 – text font, size, and color 4 -
<footer> 섹션 또는 페이지 풋터 – footer for a section or page 5 Global Attributes
<form> 서식(폼) – form 4 / 5 action | data | replace | accept | accept-charset | enctype | method | target
<frame> 서브 윈도우 – sub window 4 -
<frameset> 프레임 세트 – set of frames 4 -
<h1> ~ <h4> 헤드 요소 – header 1 to header 6 4 / 5 Global Attributes
<head> 문서에 대한 정보 – information about ther document 4 / 5 -
<header> 세션 또는 페이지의 헤더 5 Global Attributes
<hgroup> 헤딩 섹션 – heading section 5 Global Attributes
<hr> 수평 선 – horizontal rule 4 / 5 Global Attributes
<html> html 문서 – html document 4 / 5 manifest
<i> 텍스트 기울기 – italic text 4 / 5 Global Attributes
<iframe> 내부 서브 윈도우(프레임) – inline sub window(frame) 4 / 5 src | name | sandbox | seamless | width | height
<iframe> 내부 서브 윈도우(프레임) – inline sub window(frame) 4 / 5 src | name | sandbox | seamless | width | height
<img> 이미지 – image 4 / 5 alt | src | height | ismap | usemap | width
<input> 입력 필드 – input field 4 / 5 accept | alt | autocomplete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalite | formtarget | height | list | max | maxlength | min | multiple | name | patter | placeholder | readonly | required | size | src | step | type | value | width
<ins> 삽입된 텍스트 – inserted text 4 / 5 cite | datetime
<isindex> 한 줄 입력 필드 – single-line input field 4 -
<kbd> 키보드 텍스트 – keyboard text 4 / 5 Global Attributes
<label> 폼 콘트롤에 대한 라벨 – label for a form control 4 / 5 for
<legend> 필드셋 타이틀 – fieldset title 4 / 5 Global Attributes
<li> 리스트 아이템 – list item 4 / 5 value
<link> 참조 리소스 – resource reference 4 / 5 href | rel | media | hreflang | type |sizes
<mark> 기호 텍스트 – marked text 5 Global Attributes
<map> 이미지 맵 – image map 4 / 5 id
<menu> 메뉴 리스트 – menu list 4 / 5 id
<meta> 메타 정보 – meta information 4 / 5 charset | content | http-equiv | name
<meter> 정의 된 범위내에서의 측정 – measurement within a predefined range 5 Global Attributes
<nav> 내비게이션 링크들 – navigation links 5 Global Attributes
<noframes> 노 프레임 섹션 – noframe section 4 -
<noscript> 노 스크립트 섹션 – noscript section 4 / 5 -
<object> 오브젝트 임베디드 – embeded object 4 / 5 data | height | type | usemap | width | object
<ol> 순서 리스트 – ordered list 4 / 5 start | reversed
<optgroup> 옵션 그룹 – option group 4 / 5 disabled | label
<option> 드롭-다운 리스트의 옵션 – option in a drop-down list 4 / 5 disabled | label | selected | value
<output> 출력의 몇가지 형식들 – some types of output 5 form
<p> 단락 – paragraph 5 Global Attributes
<param> 오브젝트 파라미터 – parameter for an object 4 / 5 name | value
<pre> 설정된 텍스트 – preformatted text 4 / 5 Global Attributes
<progress> 어떠한 작업의 진행 사항 – progress of a task of any kind 4 / 5 Global Attributes
<q> 짧은 인용문 – short quotation 4 / 5 cite
<ruby> 루비 주석 – ruby annotations 5 Global Attributes
<rp> 루비 텍스트 주위로 괄호를 생성 – provide parentheses around a ruby text 5 Global Attributes
<rt> 루비 텍스트 콤포넌트 – ruby text component 5 Global Attributes
<s> 중간라인 텍스트 – strikethrough text 4 -
<samp> 샘플 컴퓨터 코드 – sample computer code 4 / 5 Global Attributes
<script> 스크립트 – script 4 / 5 async | type | defer | src | charset
<section> 섹션 – section 5 cite
<select> 선택 가능한 리스트 – selectable list 4 / 5 autofocus | data | disabled | form | multiple | name
<small> 작은 텍스트 – small text 4 / 5 Global Attributes
<source> 미디어 리소스 – media resources 5 media | src | type
<span> 내부 섹션 – inline section 4 / 5 Global Attributes
<strike> 중간라인 텍스트 – strikethrough text 4 -
<strong> 굵은 글씨 – strong text 4 / 5 Global Attributes
<style> 스타일 선언 – style definition 4 / 5 media | type | scoped
<sub> 아래 첨자 – subscripted text 4 / 5 Global Attributes
<sup> 위 첨자 – superscripted text 4 / 5 Global Attributes
<table> 테이블 – table 4 / 5 Global Attributes
<tbody> 테이블 body – table body 4 / 5 Global Attributes
<td> 테이블 쉘 – table cell 4 / 5 colspan | rowspan | headers
<textarea> 텍스트 text area 4 / 5 autofocus | cols | disabeld | form | name | readonly | required | rows | maxlength | placeholder | wrap
<tfoot> 테이블 풋터 – table footer 4 / 5 Global Attributes
<th> 테이블 헤더 – table header 4 / 5 colspan | rowspan | scope
<thead> 테이블 헤더 – table header 4 / 5 Global Attributes
<time> 날자 시간 – date / time 4 / 5 Global Attributes
<title> 문서 타이틀 – document title 4 / 5 -
<tr> 테이블 행 – table row 4 / 5 Global Attributes
<tt> 텔레 타이프 텍스트 – teletype text 4 -
<u> 텍스트 밑줄 – underlined text 4 -
<ul> 비정렬 리스트 – unordered list 4 Global Attributes
<var> 변수 – variable 4 / 5 Global Attributes
<video> 비디오 – video 5 src | poster | autobuffer | autoplay | loop | controls | width | height
<xmp> preformatted text 4 -

 

출처: http://cafe.naver.com/javachobostudy

저작자 표시 비영리 동일 조건 변경 허락

웹브라우저별 HTML5와 CSS3를 얼마나 지원해주는지 보여줍니다
언능 모두 지원되길 바랍니다
그나저나 익스는... 그저 한숨만

http://a.deveria.com/caniuse/

저작자 표시 비영리 동일 조건 변경 허락

http://www.zdnet.co.kr/Contents/2009/11/16/zdnet20091116182745.htm

국내도입이 시급하군요
망할 엑티브..
저작자 표시 비영리 동일 조건 변경 허락

html5 validator

Web story/html5 2009/10/28 14:50
html5 validator를 확인할 수 있는 페이지입니다
html5 작업하시는분들 유용하겠네요~

http://html5.validator.nu/
저작자 표시 비영리 동일 조건 변경 허락

개인 홈페이지를 만들어 보았던 사람들 중에 HTML을 공부해 보지 않았던 사람은 아마 없을 것이다. HTML은 정보(콘텐츠)와 의미(마크업)를 함께 손 쉬운 텍스트로 편집할 수 있어 쉽게 배우고 쓸 수 있었다. 글꼴을 굵게 하려면 <b>굵게</b>,

제목

을 표시하고 싶으면 <h1>제목</h1>이라고 적기만 하면 된다. HTML의 이런 단순함은 웹 상에 사람이 참여하는 토대를 낳게 하기에 충분했다.

하지만 이러한 장점에도 불구하고 90년대 후반 웹 브라우저 업체의 점유율 전쟁 중에 상용 비표준 태그들이 남발되면서 HTML의 기본 정신을 훼손했는가 하면 웹 표준 기구인 W3C도 기계도 이해할 수 있는 완벽한 형태인 XML 전향을 기반으로 XHTML로의 전환을 꾀하였다. 따라서 HTML은 4.01 버전을 끝으로 더 이상 업그레이드 되지 않는 낡은 표준으로 남았다.

2000년대 초반 인터넷 익스플로러가 넷스케이프를 물리치고 웹 브라우저 왕좌에 오르고 난 후 웹 디자인 업계는 안정되는 것 처럼 보였다. 사실 상 웹 프론트 기술은 더 이상의 혁신은 일어 나지 않았고 HTML은 단순 기술로 남아 있었다. 최근 들어 구조와 표현을 분리하는 웹 표준 기반 웹디자인이 부각되면서 CSS 기반 기술이 뜨고 있기는 하지만 여전히 HTML은 하급 기술이다.

웹 애플리케이션 전성 시대
그러나 변화는 일어 나고 있었다. 혁신의 단초를 제공하게 된 것은 웹2.0이다. 특히, 블로그나 위키피디아와 같은 사용자 생산 콘텐츠를 담기 위해 '플랫폼 웹'이 지향하는 소프트웨어형 서비스가 늘어나고 있다. 웹을 기존의 문서 형식의 정보의 제공이라는 틀에서 벗어나 데스크톱 소프트웨어와 같은 기능을 제공하고 상호 연결성을 기초로 협업 작업 및 공유 기능을 첨가한 사용자 기반 웹 애플리케이션이 뜨고 있는 것이다. 이에 대한 대표적인 성공 사례가 Ajax를 기반한 구글 맵스와 지메일이다.

특히 자신들의 데이터를 XML이라는 표준 포맷으로 전달해 주는 '오픈 API'라는 기술을 제공하면서 전문 개발자 뿐만 아니라 전문 사용자까지 웹 플랫폼에 끌어 들임으로서 사람들이 사용하기 쉽고 편한 기술의 우수성을 다시 한번 입증해 주고 있다. 오픈 API를 이용하면 자신의 블로그나 홈페이지에 네이버나 다음의 검색 결과나 구글 맵의 위성 지도, 이베이의 중고 상품 목록 같은 것을 쉽게 추가할 수 있다.

뿐만 아니라 다양한 소프트웨 플랫폼 벤더들은 공개 표준 기술을 웹 애플리케이션에 접목하는 시도를 계속 하고 있다. XML과 (X)HTML, CSS, 자바 스크립트 같은 웹 표준 기술들을 웹 애플리케이션을 만드는 데 사용하기 시작한 것이다. 대표적으로 모질라의 파이어폭스 확장 기능, 야후! 위젯, 마이크로소프트의 실버라이트(Silverlight), 어도비의 플렉스(Flex) 및 AIR 등이 여기에 속한다. 애플의 경우, Mac OS의 대시보드 위젯을 시작으로 사파리에서 구동 가능한 웹 애플리케이션을 최근 출시한 아이폰(iPhone)에서도 실행 할 수 있도록 하고 있다.

이들 응용 소프트웨어의 대표적인 특징은 XML 혹은 (X)HTML로 사용자 인터페이스를 만들며 CSS로 디자인 및 스타일을 정의하고 자바 스크립트로 기능을 제어 하는 전형적인 웹 기술의 성공을 벤치마킹했다는 데 있다.

HTML5의 탄생
이런 와중에 웹 사이트를 이용하는 기본 도구인 웹 브라우저 업계의 변화 역시 시작 되었다. 깨질것 같지 않았던 인터넷 익스플로러의 아성이 2004년 한 오픈 소스 웹 브라우저에 의해 금이 가기 시작한 것이다. 현재 모질라 파이어폭스의 세계 점유율은 약 15%, 유럽의 경우 30%가 넘어섰다. 또한, 오페라 브라우저 역시 구글과의 제휴로 무료 배포를 시작 했고 애플도 새로운 Mac OS와 사파리 브라우저를 선 보이면서 자신들의 영역을 구축 했다. 이로서 지금 웹 브라우저 업계는 제 2의 브라우저 전쟁에 돌입한 상태다.

사실 상 앞서 말한 웹 애플리케이션의 변화에는 이러한 마이너 웹 브라우저 업체의 혁신에 힘입은 바 크다. 하지만, 웹 표준화 기구인 W3C는 이러한 변화를 수용할 준비를 하고 있지 못했다. 2004년 W3C의 한 워크샵에서 부터 생긴 의견 차이 때문에 모질라, 애플, 오페라 등은 W3C 밖에서 새로운 버전의 HTML 표준을 준비하기 시작했다. W3C의 비대한 조직과 시맨틱 웹과 상호 운용이라는 너무 거대한 이상 때문에 현실 웹의 변화에는 거의 관심 없는 상태였다.

이들은 WHATWG라는 공개 그룹을 형성하여 자신들이 만드는 새로운 표준안에 누구나 참여할 수 있도록 개방 하였다. W3C의 회원사 중심 표준안이 아닌 업계가 진정 원하는 바를 만들기 위해서 였다. 이들은 오랜 공개 토론을 거쳐 Web Form 2.0과 Web Applications 1.0이라는 표준안을 만들어 냈다.

이들 표준안의 철학은 아직 전 세계 웹 사이트의 90%가 넘는 언어인 HTML을 혁신하자는 것이다. 웹 브라우저 업체 입장에서 W3C가 요구하는 새로운 웹 표준은 기존 웹 브라우저를 새로 작성해야 할 정도로 어려운 작업이라는 측면도 있지만 기존 HTML이 가진 가치를 끌어 올려 최대의 효과를 거두자는 데 있다. 즉, 손 쉬운 HTML의 장점은 그대로 살리면서 브라우저 업체간 불명확했던 처리 방식을 재정의하고 CSS와의 상호 관계를 최대한 맞추면서 웹 애플리케이션 개발에 손 쉬운 각종 기능들을 추가하는 것이다.

HTML5, 무엇이 달라지나?
WHATWG 활동의 성공은 즉각 W3C에 영향을 주기 시작했다. 작년 10월 웹의 창시자이자 W3C를 이끌고 있는 팀 버너스 리(Tim Berners-Lee)는 'Reinventing HTML'이라는 글에서 XHTML의 전환 실패와 더불어 새 HTML 작업을 시작할 것을 천명하였다. 이에 제 3지대에서 활동하고 있던 WHATWG의 멤버들은 W3C의 결정에 환영하면서 올해 3월 새로운 HTML 워킹 그룹에 합류하기 시작했다.

이 워킹 그룹 활동에는 몇 가지 고무스러운 점이 있다. 먼저 전직 IE 개발자 이며 최근 마이크로소프트의 IE7 이후의 개발을 총책임을 맡은 크리스 윌슨(Chris Wilson)이 워킹 그룹 의장이 되었다는 점이다. 또한, WHATWG의 표준 작업을 사실상 주도한 이안 힉슨(Ian Hickson)이 첫 표준 초안의 편집자가 된 것이다. 이안은 넷스케이프와 오페라를 거쳐 지금은 구글에서 풀타임 표준 작성가로 활동 중인 젊은 인재이다. 뿐만 아니라 초빙 전문가(Invited Expert)라는 제도를 활용해서 W3C에서는 유래가 없는 500여명의 비회원사 전문가들이 참여하는 통로를 열었다. 이러한 과감한 변화를 통해 W3C의 새 HTML 워킹 그룹은 새 표준의 이름을 'HTML5'라고 명명 하고 WHATWG가 작업하던 대부분의 표준안을 그대로 수용하기에 이른다.

HTML5에서 크게 달라지는 점은 크게 세 가지 이다. 먼저 웹 브라우저 마다 기존의 HTML을 해석하는 방식의 차이에서 오는 혼란을 없애기 위해 구현 방식을 상세하게 기술한 점이다. 기존 HTML의 하위 호환성은 제공하면서 <!doctype html>라는 새로운 DOCTYPE을 가진 경우 각 요소와 속성에 대한 웹 브라우저의 동작 방식이 명확하게 정의했다. 전체 표준안의 상당 부분이 여기에 해당한다.

두 번째는 새로운 HTML 요소를 대거 도입하고 콘텐츠 구조에 불필요한 요소와 속성들을 제거 했다. 웹 문서를 구조적으로 제공 가능한 <header>, <nav>, <footer> 같은 태그 등을 포함하였고 시간, 측정 단위 등 의미를 살린 <time>, <m> 태그 등이 추가 되었다. 대표적인 스타일 요소인 <font>, <strike>와 align이나 background, bgcolor 같은 속성은 더 이상 사용할 수 없다.

HTML5에서 달라지는 가장 대표적인 특징은 웹 애플리케이션 개발용 스펙들이다. 가장 대표적인 것이 Web Form에서 다양한 속성들을 추가한 것이다. <input> 태그에 datetime 속성을 넣어주면 웹 브라우저가 자동으로 달력을 표시해 준다. 또한 IE에서만 사용 가능 했던 contenteditable 속성이 표준화 되어 모든 HTML 요소를 사용자가 직접 편집할 수 있게 된다. 특히 innerHTML, embed 같이 많이 사용하면서도 비 표준 영역에 있었던 것들이 대거 포함 된다.

뿐만 아니라 HTML 요소의 드래그앤 드롭, 오디오 비디오 표시, 벡터 그래픽 표시를 위한 각종 요소들을 새로 도입 했다. 그러면서도 <b>, <i> 같은 대표적인 HTML 요소는 없애지 않고 각각 제품명 키워드 같은 강조 요소와 동식물 학명 같은 이탤릭체에 사용하도록 재정의 했다. HTML4와 HTML5 차이점 및 변경 사항은 W3C 기술 노트 번역본 을 참고하면 된다.

HTML5의 미래
많은 사람들이 HTML5에 대해서 회의적인 시각을 가지고 있는 것을 자주 본다. 그 대표적인 이유가 W3C 표준안이 되었다 하더라도 웹 브라우저에 적용되는 시기는 매우 오랜 기간이 걸릴 것이라는 이유에서다. 그래서인지 이러한 표준안의 변화에 관심 가지는 국내 인터넷 업체나 사람들은 거의 없는 실정이다.

하지만 현실은 그렇지 않다. 이미 HTML5의 많은 기능들이 파이어폭스 2.0과 오페라 9.0에 탑재되어 있으며 올해 안으로 출시될 파이어폭스 3.0에도 많은 기능을 포함하고 있다. 오페라와 사파리의 신 버전에도 관련 구현 작업이 진행 되고 있으며 무엇보다도 마이크로소프트가 참여하고 있기 때문에 차세대 IE8에서 HTML5의 기능 탑재는 기정 사실화 되고 있다. 우리가 신 기능이 탑재된 브라우저를 볼 날이 이제 머지 않았음을 보여 주는 대목이라 하겠다.

W3C의 첫 표준 초안(Working Draft)는 올해 8월을 목표로 막바지 작업을 진행 하고 있고 늦어도 2010년 하반기에는 표준 권고안(Recommendation)으로 만들 예정이다. 웹 브라우저 벤더가 모두 참여한 상태에서 과거의 관례를 살펴 본다면 표준 초안이 만들어 지면 구현이 이미 시작된다고 보면 맞다. 따라서 향후 1~2년 내에 HTML5 표준안을 탑재한 브라우저들을 실제로 보게 될 것이다.

이러한 변화에도 불구하고 현재 국내에는 Ajax, 마이크로소프트 실버라이트, 어도비 AIR 등 각종 리치 인터넷 기술이 웹 애플리케이션의 미래인 듯 포장되고 있는 감이 없지 않다. SW 플랫폼을 기반한 리치 인터넷이 차세대 웹의 전부인양 상용 벤더들의 홍보가 과도하게 진행 되고 있다. 하지만 우리가 우를 범해서는 안되는 것이 웹은 정보 전달의 수단으로 기본에 충실하면서 애플리케이션 기능을 제공할 수 있어야 한다는 점이다. 사용자 경험은 담보로 기존 웹의 장점들을 낡은 기술로 치부해서는 안 된다.

이는 브라우저 벤더들의 몫만이 아니다. 누구나 정보와 기능 모두를 제공할 수 있도록 웹의 콘텐츠를 만들고 생산하는 모든 저작자들과 리치 웹 서비스를 만드는 사람들의 책임이다. HTML5가 중요한 것은 이러한 표준 웹의 근본적인 변화가 시도되고 있기 때문이다. 지금이야 말로 우리가 함께 만들어 왔던 웹의 미래를 직면하게 되는 순간이다.@