HTML5는 크게 콘텐츠에 관한 것과 API에 관한 것으로 분류할 수 있다. 콘텐츠는 다시 HTML5에 새로 추가된 부분과 HTML4를 재정의한 부분으로 나눌 수 있다. HTML5에 새로 추가된 부분은 콘텐츠 모델과 같이 도큐멘트 구성에 관한 것과 비디오, 캔버스와 같이 기능에 관한 것으로 분류할 수 있다. HTML4 재정의 부분은 div, em, strong 엘리먼트와 같이 엘리먼트의 기능을 재정의한 것과 alt 속성 작성 방법, CSS 스타일로 대체와 같이 속성을 재정의한 것으로 분류할 수 있다.

HTML5 스펙 기준

책 제목을 HTML5라고 한 것은 HTML5 스펙을 기준으로 다룬다는 의미다. 즉 API, HTML5에 추가된 내용, HTML4를 재정의한 내용을 다룬다. HTML4를 재정의했다고 해서 이 책에서 HTML4와 HTML5를 비교해서 다루지 않는다. 왜냐하면 비교하려면 기준이 있어야 하는데 HTML4에 대한 독자의 기준과 필자의 기준이 다를 수 있기 때문이다. 한편 HTML4를 생각하지 말고 HTML5를 대하는 것이 더 쉽게 다가갈 수 있다고 생각한다. 이는 언어를 바꿀 때마다 느꼈던 필자의 경험에서 나온 생각이다. 이 시점에서 분명한 것은 HTML4에서 HTML5로 숫자가 바뀐 것만은 아니라는 것이다.

과거 경험의 압박

이 책을 쓰는 내내 필자에게 가장 압박을 준 것은 과거의 경험이다. HTML4를 잘못 사용하는 이면에는 초창기에 나왔던 책의 부실함으로 인한 면도 없지 않았다고 생각하기 때문이며 다시 이와 같은 전철을 밟지 않을까 하는 걱정이 앞섰기 때문이다. 현재에 이르기까지 수험료로 내야 했던 시행착오, 시간, 노력이 머릿속에서 떠나지 않았기 때문이다.

예를 들어 이 책에 테이블을 레이아웃 용도로 사용하지 않는다는 글이 나온다. 이 글이 초창기 책에 있었다면 테이블을 레이아웃에 사용하지 말자는 캠페인, 테이블을 걷어내는 변환 작업 등으로 인한 경제적, 시간적 낭비가 없었을 것이다. 웹 표준도 빠질 수 없는 사항이다.

HTML5 사상 제시

이와 같은 쓰라린 경험을 최대한 반영하려고 노력했지만 다시 이런 모습이 발생하지 않는다고 보장할 수는 없다. 아니 보장한다는 그 자체가 모순이다. 이를 알고 있기에 다시는 이런 일이 발생하지 않도록 하기 위해 최선을 다했다고 말할 수는 있다. 이를 위해 HTML5 기능은 물론이고, HTML5 사상을 제시하려고 노력했으며 기본적으로 원론적으로 접근하여 기초, 기반이 다져지도록 하는 것에 최선을 다했다.

이 책의 4장과 9장을 이해하는 것이 중요하다. 여기서 HTML5의 사상과 방향을 이해할 수 있다. 엘리먼트를 작성하는 것은 어렵지 않다. 속성을 작성하는 것이므로 어떨 때 쓴다는 것을 알고 있으면 된다. 하지만 사상의 이해는, 개념 정리는 그렇지 않다. 독자 자신이 정확하게 이해하고 있어야 자신감 있는 행보를 할 수 있다. 특히 확신을 갖고 독자 자신이 작성한 것을 스스로 검증할 수 있다.

HTML4 재정의

이 책에서 가장 많은 페이지를 차지하는 속성이 「img」 엘리먼트의 alt 속성으로 이 책 기준으로 23페이지나 된다. 무엇이?, 아니? 라는 의아심이 들 것이다. 이미지가 표시되지 않는 경우의 수를 제시하고 이에 따라 alt 속성을 작성하는 형태가 기술되어 있다. 그렇다고 alt 속성이 HTML5에서 새로 나온 속성도 아니며 기능이 변경된 것도 아니다. 그런데도 이렇게 자세하게 작성한 것은 HTML4에서 두루뭉술하게 사용한 것을 재정의한 것이다. 이외에도 명확하지 않았던 엘리먼트와 속성의 목적, 기능, 범위를 재정의했다. HTML5는 기능이 추가된 것이 전부가 아니다. 굳이 비율을 매긴다면 관점에 따라 다를 수 있지만 추가와 재정의가 50 대 50이라고 할 수 있다.


장/절/항 분류 기준

이 책은 HTML5 스펙을 기준으로 장/절/항으로 분류했다. 일부 순서가 바뀌거나 통합하여 작성한 것도 있지만 대부분 틀에서 벗어나지 않았다. 엘리먼트는 물론이고 속성까지도 순서를 따르고 있다. 이는 필자의 주관적인 해석을 최소화하기 위한 것에서 비롯된다. 만약 독자의 생각과 책 내용이 다르다고 할 때 HTML5 원문 스펙과 맞추어 보기 쉽도록 하기 위한 것이다. 특히 개정된 HTML5 스펙이 나왔을 때 이 책의 내용과 다를 수 있다. 이때 순서가 비슷하면 맞추어 보기 쉽다.

이 책의 주요 구성

이 책은 5부 20장으로 구성되어 있으며 부록이 있다.

1부 HTML5 개요
HTML5의 전반적인 개요를 살펴본다. HTML5는 다양한 API를 제공하며 이를 통해 보다 강력한 애플리케이션을 구현할 수 있다. HTML5에 추가, 변경, 폐지된 엘리먼트와 속성을 개념적으로 살펴본다. 이는 다시 이 책에서 상세하게 다룬다.

2부 콘텐츠 모델, 글로벌 속성
HTML5에서 중요한 개념이 콘텐츠 모델이다. 엘리먼트를 카테고리로 분류하고 관련성을 갖게 했다. 이 개념을 이해해야 보다 완전하게 엘리먼트를 사용할 수 있다. HTML5에는 100여 개의 엘리먼트가 있으며 이에 공통으로 설정되는 속성을 글로벌 속성이라고 한다. 콘텐츠 모델과 글로벌 속성에 대해 살펴본다.

3부 HTML 콘텐츠
엘리먼트에 직접 콘텐츠를 작성하는 엘리먼트를 살펴본다. 다큐먼트의 루트가 되는 엘리먼트, 메타데이터를 표현하는 엘리먼트, 스크립팅을 위한 엘리먼트, 섹션을 정의하는 엘리먼트, 콘텐츠를 그룹화하는 엘리먼트, 텍스트 레벨 시맨틱을 표현하는 엘리먼트, 콘텐츠의 추가/삭제를 표현하는 엘리먼트를 살펴본다.

4부 임베디드 콘텐츠, 캔버스, 테이블
외부 자원을 엘리먼트에 추가하여 콘텐츠를 표현하는 엘리먼트를 살펴본다. HTML5의 이슈인 비디오, 오디오, 캔버스 엘리먼트를 알아본다. 접근성 관점에서 강한 메시지를 보내는 alt 속성 작성 형태를 살펴보고 테이블 관련 엘리먼트의 기능과 접근성을 위한 형태를 살펴본다.

5부 폼 컨트롤
폼 컨트롤은 데이터 입력/수정/삭제가 발생하는 엘리먼트를 총칭한다. HTML5에 타입 속성이 많이 추가되었으며 다양한 형태로 데이터를 입력할 수 있게 되었다. 아직 모든 브라우저에서 지원하지 않아 실제로 사용할 수는 없지만 웹이 나아가는 방향을 이해할 수 있다. 폼(form) 엘리먼트와 폼에 포함되는 엘리먼트에 대해서 살펴본다.

부록에 다음과 같은 일람표가 작성되어 있다.
-엘리먼트 유지/신규/폐지 일람표
-속성/엘리먼트 매트릭스
-엘리먼트/인터페이스 일람표


1장 개요
HTML5 현재 상태와 HTML/XHTML의 발자취를 살펴본다. HTML5 스펙의 중심 역할을 하는 WHATWG와 HTML5 범위에 대해 살펴본다.

2장 HTML5 API
HTML5의 양대 산맥은 콘텐츠와 API다. API는 애플리케이션 개발을 지원한다. 서버와 통신하고 데이터베이스를 사용할 수 있으며 쿠키가 아닌 스토리지를 사용할 수 있다. 클라이언트의 파일을 직접 읽을 수도 있다. 캔버스 API 개념도 같이 살펴본다.

3장 HTML4와 HTML5 차이
HTML4와 HTML5 차이를 개념적으로 살펴보고 MathML 개념과 SVG 개념을 살펴본다. HTML5에 추가, 변경, 폐지된 엘리먼트와 속성을 살펴본다. 엘리먼트와 속성은 이 책에서 다시 상세하게 다룬다.

4장 콘텐츠 모델
콘텐츠 모델은 HTML5에 새로 추가된 개념이다. 모든 단어와 개념이 생소하다. 엘리먼트를 그룹화하여 카테고리로 분류하고 이들의 관계를 정의해서 콘텐츠를 표현하도록 하고 있다. HTML5를 보다 정확하게 이해하려면 콘텐츠 모델을 이해해야 한다.

5장 글로벌 속성
글로벌 속성이란 100여 개의 엘리먼트에 공통으로 적용되는 속성이다. HTML5에서 새로 추가된 속성도 있으며 title 속성과 tabindex 속성은 엘리먼트 속성에서 글로벌 속성으로 변경되었다.

6장 루트 엘리먼트
6장에서 다루는 엘리먼트는 단 하나 「html」 엘리먼트다. 그런데 별도의 장으로 분리한 것은 HTML5 스펙과 분류 기준을 맞추기 위한 것이다.

7장 메타데이터
메타데이터는 「head」 엘리먼트에 작성하는 엘리먼트를 총칭한다. 이 장에서 다루는 엘리먼트는 HTML4에 있는 엘리먼트이며 명확하게 목적, 기능을 정의하는데 의미가 있다.

8장 스크립팅
스크립팅은 자바스크립트 코드를 작성할 수 있는 엘리먼트를 분류한 것이다.

9장 섹션
섹션으로 분류되는 엘리먼트는 대부분 HTML5에 새로 추가된 엘리먼트다. HTML4가 구조 중심이었다면 HTML5는 구성이 중심이다. 이 장에서 다루는 엘리먼트가 다큐먼트를 구성하게 된다. 섹션 개념, 아웃라인 개념, 섹셔닝 루트 카테고리 개념을 다루고 있다.

10장 콘텐츠 그룹화
콘텐츠를 그룹화하는 엘리먼트를 다룬다. 문단을 그룹화하고 엘리먼트를 그룹화하지만 궁극적으로 이는 콘텐츠를 그룹화하기 위한 것이다. HTML4에서 사용하는 엘리먼트가 대부분이지만 개념, 목적을 재정의했다는 것에 의미가 있다.

11장 텍스트 레벨 시맨틱
텍스트 형태로 콘텐츠를 표현하기 위한 엘리먼트를 다룬다. HTML5에 새로 추가된 트랜스패어런트 콘텐츠 모델을 살펴 본다. HTML5에 새로 추가된 엘리먼트도 있다.

12장 편집
콘텐츠가 추가, 삭제된 것을 나타내기 위한 「ins」, 「del」 엘리먼트를 다룬다. 두 개밖에 안 되는 것을 장으로 분류한 것은 HTML5 스펙 분류를 따르기 위한 것이다.

13장 임베디드 콘텐츠
이미지와 같이 외부 자원을 엘리먼트에 포함시켜 콘텐츠로 표현하는 엘리먼트를 다룬다. 대표적으로 「img」, 「iframe」, 「object」가 이에 속한다. alt 속성 작성 형태를 다룬다. HTML5 스펙에서 비디오, 오디오, 캔버스 엘리먼트를 임베디드 콘텐츠로 분류하지만 별도의 장으로 떼어내어 다룬다.

14장 비디오, 오디오
세간의 이목이 집중된 비디오, 오디오를 다룬다. 자바스크립트로 비디오, 오디오를 제어하는 형태, 방법을 다룬다.

15장 캔버스
캔버스는 2차원 그래픽, 게임과 같이 시각적인 이미지를 동적으로 구현할 수 있는 API다. 이를 잘 활용하면 보다 한 차원 높은 콘텐츠를 표현할 수 있다. 필자 나름 역점을 두고 기뮺적인 사항을 하나도 빠짐없이 자세하게 다루었다.

16장 테이블
「table」 관련 엘리먼트를 다룬다. 테이블 속성으로 사용했던 스타일 관련 속성이 CSS 스타일로 대체되었다는 점이 특징이다. 접근성 관점에서 테이블을 작성하는 방법, 형태를 정의했다는 것에 의미가 있다.

17장 폼 컨트롤, input 엘리먼트 공통 속성
폼 컨트롤과 「input」 엘리먼트의 공통 속성을 다룬다. HTML5에 추가된 속성도 있으며 아직 브라우저에서 지원하지 않는 속성도 있다.

18장 input 엘리먼트
「input」 엘리먼트에 type이 많이 추가되었으며 대부분이 자바스크립트로 구현해서 사용하고 있는 타입이다. 오페라 브라우저가 대부분 지원하는 반면 다른 브라우저는 일부만 지원하므로 실제로 사용할 수는 없지만, 눈 여겨 볼 것은 자바스크립트를 사용하지 않고 엘리먼트 자체로 유저 인터페이스를 제공한다는 점이다.

19장 폼
폼 관련 엘리먼트를 다룬다. 기능도 약하고 아직 사용할 수 없지만 서제스트 기능이 HTML5에 추가되었다. 그런데, 이를 자바스크립트가 아닌 엘리먼트만으로 제공할 수 있다는 점이 눈 여겨 볼 사항이다. 앞으로 이를 발전시킨다면 매우 유용한 유저 인터페이스를 제공할 수 있을 것이다. 시각적인 유저 인터페이스는 다른 관점이다.

20장 인터랙티브
위젯, 메뉴에 관한 엘리먼트가 포함된다. 아직 브라우저에서 제공하지 않지만 이 또한 자바스크립트를 사용하지 않고 엘리먼트만으로 메뉴와 위젯을 구현할 수 있다.

2010년 5월 마지막 날
김 영보

<b>HTML5! Next Generation!</b><br/><br/>웹의 새로운 세대가 우리 앞에 성큼 다가오고 있다.<br/>이제 가야 할 길이 정해졌다.<br/>다른 대안은 없다.<br/>이제 남은 것은 내 것으로 만드는 것이다.<br/><br/><b>HTML5는 구성을 요구한다.</b><br/><br/>비디오, 오디오, 캔버스도 중요하지만 하나의 기능이다. 따라서 이는 책을 보면 되고, 책은 예제와 더불어 즉시 사용할 수 있도록 자세하게 설명되어 있으면 된다.<br/><br/>HTML4는 엘리먼트(태그)를 기능적으로 구조적으로 접근하면 된다. 하지만 HTML5는 구성을 요구한다. 즉, 사상의 이해를 요구하고 시나리오를 요구한다. 바로 이 점이 HTML4와 HTML5의 차이다.<br/><br/>이 책은 HTML5를 보다 완전하게 사용하기 위한 사상을 다루고 있다. 물론, 예제와 더불어 즉시 사용할 수 있도록 기능적, 표준적인 측면을 아주 자세하게 다루고 있다.<br/><br/>-HTML5의 모든 API에 대해 설명했으며 예제 소스를 제공한다.<br/>-HTML5의 모든 엘리먼트를 하나도 빠짐없이 예제와 더불어 상세하게 설명했으며 예제 소스를 제공한다.<br/>-엘리먼트 단위로 추가, 폐지, CSS 스타일로 대체된 속성을 제시하고 예제와 함께 자세하게 설명했다. 따라서 (X)HTML 책으로도 사용할 수 있으며 자연스럽게 HTML5까지 배울 수 있다.<br/><br/>초보자, 중급자, 고급자를 대상으로 한다.<br/>초보자는 기능, 표준 중심으로 볼 것이고 중급자와 고급자는 사상, 시나리오, 접근성 관점에서 볼 것으로 예상한다.

HTML5에는 다양한 API들이 추가되었지만 이와 함께 콘텐츠를 표시하는 각종 요소와 구성도 매우 중요하다. 콘텐츠를 효과적으로 기술하는 발전된 HTML5의 기능들이 스펙을 잘 살려서 기술이 되어 있다.
신현석 (Opera Software 책임연구원)