타이틀이미지

HTML5의 역사

W3C(World wide Web Consoium)는 HTML4.01 버전 이후 HTML은 더 이상 마크업 언어로 개발하지 않고, 구조와 표현을 분리하는 형태로써의 의미적인 구조적 언어인 XML(Extensible Mark-up Language)을 지향 한 XHTML1.0을 발표하고, 2.0의 개발에 박차를 가했습니다.

쿼크모드(Quirks Mode)에 독타입(DOCTYPE)을 지정하고 'Content-Type' 헤더를 보내는 MIME 방식만으로 비표준에서 표현 형태의 의미를 부여하는 식의 XHTML1.0은 전세계에 10여년 동안 만들어진 웹페이지들을 표준화(?)했지만 웹을 하나의 애플리케이션(Applecation)으로 동장하게 만드는 웹애플리케이션이나 XHTML의 구조적 한계를 넘지 못해서 웹에서 애플리케이션을 동작하기 위해서는 Active-X나 Flash Player 등의 별도의 써드파티 프로그램들을 설치해야하는 불편함이 있었습니다.

이런 불편함과 구조적 제한을 가진 XHTML은 개발자들로 부터 외면당하기 시작했고, 결국 기존 HTML의 현식과 문서의 유연함을 유지하면서 별도의 Plug-in 없이 애플리케이션이나 동영상을 지원하는 HTML을 개발하기 위해 이안 힉스가 이끄는 WHATWG(Web Hypertext Application Technology Working Group)이 만들어졌습니다.

이로서 W3C는 XHTML2.0을 WHATWG는 HTML5를 개별적으로 개발하는 형태를 띠게 되었습니다. 하지만 W3C 역시 HTML5의 중요성을 모르는 바가 아니었으므로 추후 XHTML2.0의 개발을 중단하고 HTML5에 전념하게 됩니다. 결국, 2006년 W3C의 수장인 팀 버너스리가 향후 HTML의 진화를 위해서는 WHATWG과 함께해야 한다고 발표하며 2009년 XHTML2.0은 종료되었습니다.

HTML5의 발전

HTML5는 흔히들 차세대 언어라고 합니다. W3C에서도 2014년에 확정된 권고안을 발표하겠다고 일정에 맞춰 개발이 진행중이구요. 이는 현재 굳이 HTML5를 몰라도 되는게 아닌가?라는 의구심이 들만도 한데요. 실은 HTML5는 웹에서 보다도 스마트 폰의 앱(애플리케이션)을 제작하는 환경으로 이미 다양하게 제작되어지고 있습니다.

웹에서는 새로 제작되어지는 페이지의 XHTML1.0이겠지만 상당수는 HTML5로 제작되어 지고 있습니다. 역시 웹 페이지에서 다양한 애플리케이션의 활용이라는 부분은 별도의 써드파티 프로그램 없이 제작할 수 있다는 점은 매력적이기 때문입니다.

이런점으로 미루어 볼 때 HTML5를 미리 준비한다는 것은 매우 중요하다고 하겠습니다. 하지만 이런 매력적인 녀석이라고 할지라도 기본적인 HTML4.01 Tag 나 XHTML 의 구조적 문법, CSS(Casecade Style Sheet)1.0/2.0의 준비없이 대비하는 것은 바람직하지 않습니다.

HTML5 는 CSS 3.0 으로 구조와 표현을 분리하게 됩니다. 기초를 무시하지 말고 HTML 의 Tag 와 CSS 1.0/2.0 을 잘 모르는 분들은 공부하시고 이 강좌를 공부하시길 바랍니다.

HTML5 표준화 일정

  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범> / Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.Q2 : HTML5 최종 표준안 (Recommendation)

참고 : http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95

기사 : W3C "HTML5 표준, 2014년 확정할 것"

DOCTYPE(DTD-Document Type Definition, 문서타입 정의)의 비교

DTD는 웹페이지를 제작할 때 각 표준에 맞춰 작업한다는 문서의 정의를 내리는 CODE입니다.

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

내용은 W3C의 HTML4.01 명세서에 따라 웹페이지가 유연하게 제작되어 있다는 내용입니다.

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

내용은 W3C의 XHTML1.0 명세서에 따라 웹페이지가 유연하게 제작되어 있다는 내용입니다.

HTML5

<!DOCTYPE html>

내용은 HTML5 로 웹페이지가 제작되어 있다는 내용입니다. W3C는 위에서 언급한 것처럼 WHATWG에서 HTML5를 준비할 때, XHTML2.0을 준비하고 있던터라 HTML5의 명세서를 만들지 못했습니다. 하지만 WHATWG은 명세서를 만들었죠. 만들어져 있는 명세서를 왜 다른 표준 독타입처럼 사용하지 않는지 모르겠지만 이유야 어떻든 우리에겐 아주 편하게 바꼈습니다.

* XHTML에서 사용되던 DTD 3가지

  • Strict - 구조적 문법을 엄격하게 지켜 코딩.(하위 호환성 적용 안됨)
  • Transition - 구조적 문법을 유연하게 지켜 코딩(하위 호환성 적용)
  • Frameset - 프레임 제작에 사용.

반면, HTML5는 하위 호환성 부분은 기본적으로 유연하게 대처하고 있습니다.

루트 엘리먼트의 비교

HTML의 중첩된 구조를 만드는 트리구조를 말하는데, HTML의 조상 엘리먼트는 항상 <html>입니다.

XHTML1.0

<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

내용은 페이지의 요소가 xhtml의 네임스페이스인 위 링크주소에 있다는 의미로 HTML5에서는 언제나 이 위치에 있으므로 삭제하는게 좋습니다. 또한 언어를 정의하는 두 개의 속성 역시 XHTML의 잔재라서 HTML5에서는 lang 속성만 사용합니다.

HTML5

<html lang=ko>

문자인코딩의 비교

문자의 인코딩에 관련된 정의를 하는 방법을 정의합니다.

XHTML1.0

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

내용은 브라우저가 서버로 보낸 내용을 데이터가 유니코드 형식의 utf-8 문자 인코딩 방식을 사용할 것이라고 정의합니다.

HTML5

<meta charset=utf-8>

기존에 사용하던 http 방식은 모든 저작자가 http 서버를 제어할 수 없으므로 HTML5에서는 삭제되고 문자 셋이 밖으로 나온것이 특징입니다. 이는 특수한 문자나 언어를 사용하지 않아도 문자 인코딩은 선언되어야 하며, 인코딩을 명시하지 않은 페이지의 경우 보안에 취약할 수 있습니다. 코드 형식을 잘 살펴보면 기존의 코드와는 좀 다른 점을 볼 수 있는데, HTML5는 XML 구조가 아니므로 엠프티 태그(Empty Tag, 빈 태그) 마지막에 슬러시( / )를 삽입하거나 속성 값에 따옴표( " " )를 삽입하던 XML 형식을 따를 필요가 없습니다. 즉, 루트 엘리먼트의 <html lang=ko> 나 <meta charset=utf-8> 로 코드를 작성해도 상관없습니다. 다만 이처럼 코드를 작성하였다면 일관성을 유지해주는 것이 유지보수에 도움이 되겠죠?

위로