본문 바로가기
HTML.CSS

「HTML 5」를 주목해야 하는 이유

by 누피짱 2008. 4. 25.
개인 홈페이지를 만들어 보았던 사람들 중에 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가 중요한 것은 이러한 표준 웹의 근본적인 변화가 시도되고 있기 때문이다. 지금이야 말로 우리가 함께 만들어 왔던 웹의 미래를 직면하게 되는 순간이다.@


http://www.creation.net/work/html5/html4-differences/


W3C

HTML 4와 HTML 5의 차이점

편집자 작업 문서 2007년 7월 3일

현재 버전:
$Revision: 1.27 $ of $Date: 2007/07/03 09:10:50 $ (revision log)
편집자:
Anne van Kesteren (Opera Software ASA) <annevk@opera.com>
한국어 번역자:
윤석찬 (Channy Yun) (Daum Communications Corp.) <channy@mozilla.or.kr>

Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.

번역자 서문

이 문서는 http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.html의 한국어 번역판으로 영어 원본에는 없는 번역 상 오류가 들어 있을 수 있습니다. 오직 영어 원본만이 규범력을 지님에 유의하시기 바랍니다. 번역 상 오류에 대한 지적이나 제안하실 내용이 있으면 위에 있는 제 주소로 연락해 주시기 바랍니다.

This document is a Korean translation of "HTML 5 differences from HTML 4" W3C editor's draft at http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.html. Note that only the English version of this document is normative and the translation may contain errors that are not present in the English version.

초록

이 문서는 HTML 4와 HTML 5 표준안 사이의 차이점을 설명하고 변경 사항에 대한 정보를 제공합니다. HTML 5 표준안은 현재 작성중이므로 부정확한 정보가 포함되어 있을 수 있습니다. HTML 5에 대한 자세한 사항은 표준안을 직접 검토하기 바랍니다. [HTML 5]

문서 상태

이 장에서는 시간에 따라 이 문서의 변경 사항들을 설명 합니다. 현재 W3C의 출판물과 기술 보고서의 최근 목록 들은 W3C 기술 보고서 목록(http://www.w3.org/TR/)에서 찾을 수 있습니다.

이 문서는 HTML Working Group과 HTML 활동에 의해 만들어 진 HTML 5 와 HTML 4와의 차이점이라는 문서 입니다. 본 워킹 그룹은 이 문서를 워킹그룹 노트로 만들고자 하고 있습니다. 또한, 아직 공개되지 않은 HTML의 새 버전 스펙을 만들고 있습니다. 그 동안 HTML 5 편집자 초안을 통해 진행 사항을 아실 수 있고 public-html-comments@w3.org 메일링 리스트를 통해 여러분의 의견을 보낼 수 있습니다. 그 동안 있었던 논의 사항은 공개 저장소에서 볼 수 있습니다.

워킹 그룹 노트 문서는 꼭 W3C 멤버만이 사용할 필요는 없습니다. 본 초안은 언제든 추가 되거나 내용이 다른 것으로 교체 될 수 있습니다. 본 문서는 진행 중인 문서이므로 인용을 하는 것은 적절치 않습니다.

이 문서는 2004년 2월 5일 W3C 특허 정책의 보호를 받습니다. W3C는 특허 정보 공개를 통해 배포 가능한 정보를 제공 합니다. 이 내용에는 특허 발표에 대한 실질적인 방법을 포함 합니다. 개인적인 특허 지식은 가진 분들은 필수 요소를 살펴 보시고 W3C 특허 정책 6장을 살펴 보셔야 합니다.

목차

1. 소개

HTML은 1990년대 초 인터넷 상에 소개된 이래로 진화를 거듭해 왔습니다. 어떤 기능은 표준안으로 제공되었으나 웹 브라우저 소프트웨어에 기능적으로 탑재되기도 했습니다. 구현 기술과 표준 작성은 함께 수렴해서 확고한 표준안으로 자리잡기도 했지만 다른 한쪽에서는 아직 공유점을 찾지 못하고 있습니다.

HTML 4는 1997년에 W3C에 표준 권고안이 되었습니다. 많은 HTML 핵심 기능에 대해 너무 간략하게 제공한 가이드라인이었기 때문에 수 많은 컨텐츠를 교환하기 위해 필요한 상호 운용성을 위한 실제적 구현을 위한 충분한 정보를 제공할 수 없었습니다. HTML 4를 단순히 XML로 재정의한 XHTML1나 HTML과 XHTML을 위한 자바스크립트 문서 API인 DOM 레벨2 또한 마찬가지였습니다. [HTML 4] [XHTML1] [DOM2HTML]

HTML 5 초안은 2004년에 시작되어 현대적 HTML 구현 방식과 컨텐츠 제공을 위해 만들어 지고 있습니다. 이 초안은 다음과 같은 내용을 담고 있습니다.

  1. 일반적 HTML 및 XML 문법으로 작성된 HTML 5에 규약에 대한 정의
  2. 상호 운용 구현을 위한 세부적인 작업 모델 정의
  3. 새로운 문서 마크업 기능 향상 방법
  4. 웹 어플리케이션으로 통칭되는 개발 방식을 위한 마크업 및 API 소개

1.1. 공개 토론 사항

HTML 5는 아직 초안 상태입니다. 이는 HTML 5의 여러 가지 사항 들이 WHATWG 메일링 리스트와 HTML 워킹 그룹에서 논의 중이라는 것입니다. 아래에는 현재 논의 중인 이슈들을 정리하였습니다.

  • 산업 표준으로 사용하고 있는 표현 요소에 대한 의미 정의 (예를 들어 longdesc, summary, headers속성)
  • 멀티 미디어 독립 기능과 접근성 세부 기능
  • style 속성
  • 폼에서 반복 모델

1.2. 하위 호환성

HTML 이전 버전과 같이 HTML 5 역시 하위 호환성을 제공한다. HTML을 사용법이 쉽다는 장점을 계속 지향하기 위해 CSS에서 사용가능 한 표현 영역에 포함되는 몇 가지 요소와 속성을 더 이상 사용하지 않습니다.

그러나 웹 브라우저 같은 사용자 에이전트는 이러한 과거 요소를 지원해야 합니다. 표준안 자체가 작성자와 사용자 에이전트를 위한 요구 사항을 명확히 분리하고 있기 때문입니다. 이것은 작성자가 isindex나 plaintext 요소를 사용 필요가 없지만, 사용자 에이전트는 이전에 동작하던 이러한 요소들이 계속 지원 하여야 한다는 것을 의미 합니다.

사용자 에이전트는 명확한 표준 정의를 통해 현재 보다 더 비슷하게 구현 될 수 있으며, 향후에는 표준안을 쓰는 것이 예측 가능하고 유용한 상태가 될 것입니다. 이를 통해 더 이상 제외(deprecated) 되는 기능을 만들 필요가 없어지는 것입니다.

1.3. 개발 모델

HTML 5 표준안은 두 개의 완벽한 구현물 작성을 완료될 때까지 진행 됩니다. 이것은 HTML 이전 버전 작성 방법과 완전히 다른 접근 방법이다. 완성된 표준안은 웹 디자이너와 웹 개발자가 각각 사용 가능한다는 점을 보장합니다.

2. 문법

HTML 5 언어는 이미 잘 알려진 HTML 4와 XHTML1 문법과 호환 됩니다만 HTML내 난해한 SGML 문법과는 호환되지 않습니다. 문서는 text/html MIME 형식을 사용하게 됩니다.

HTML 5는 구현을 용이하기 위해 오류 처리를 비롯하여 세부적인 파싱 규칙을 정의 합니다. 사용자 에이전트는 text/html MIME 형식을 가진 문서를 파싱 할때는 이러한 규칙을 따르게 됩니다. 아래에 HTML 문법과 함께 처리하는 간단한 예제가 있습니다. 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>
</html>

HTML 5에 사용된 다른 문법은 바로 XML 입니다. XHTML1 문서 및 구현과 같은 문법을 사용할 수 있습니다. 이 문법을 사용하는 문서는 XML MIME 형식을 사용하고 http://www.w3.org/1999/xhtml 네임 스페이스를 이용하고 XML 명세에 따라야 합니다. [XML]

아래 예제는 HTML 5에서 XML 문법을 사용할 때의 예제 입니다. 아래 문서는 application/xhtml+xml나 application/xml 같은 XML MIME 형식을 따르고 있습니다. 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>예제 문서</title>
  </head>
  <body>
    <p>예제 단락</p>
  </body>
</html>

2.1. 문자 인코딩

HTML 5 저작자들은 문자 인코딩에 관한 아래 세 가지 부분 중 하나에 설정하여야 합니다.

  • 전송 단계에서 HTTP 헤더에 Content-Type 표시.
  • 문서 앞부분에 특수 유니코드 BOM 문자를 표시. 이 문자는 인코딩 방법에 대한 정보를 제공해 줍니다.
  • 파일 초기 512 바이트 크기 내에 meta 요소 내 charset 속성에 표시. UTF-8 방식을 이용하면 <meta charset="UTF-8">와 같이 표기 하며 기존의 사용 방식인 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">에서 변경하는 게 좋습니다.

XML 문법을 작성하는 저작자들은 XML 명세에 따라 문자 인코딩 설정을 하여야 합니다.

2.2. DOCTYPE

HTML 5 문법은 웹 브라우저가 표준 모드로 문서를 렌더링 할 수 있도록 문서 처음에 DOCTYPE을 지정해야 합니다. DOCTYPE은 특별한 목적이 없이 XML을 위한 옵션입니다. XML MIME 형식 문서는 관계 없이 항상 표준 모드로 동작합니다. [DOCTYPE]

기본 DOCTYPE 선언 방식은 <!DOCTYPE html>이며 대소문자 구별을 하지 않습니다. 초기 HTML 버전에서의 DOCTYPE은 HTML이 SGML의 일부라서 새로운 DTD를 참조해야 되었기 때문에 필요했지만 지금은 더 이상 그럴 필요가 없습니다. HTML 5는 HTML 문법을 사용하는 문서를 표준 모드로 동작하기 위해 DOCTYPE을 이리 저리 바꿀 필요가 없습니다. 웹 브라우저는 단순히 <!DOCTYPE html>만 있으면 표준 모드로 동작 합니다.

3. 언어

본 장에서는 HTML 4와 HTML 5 사이에 다른 특징들을 여러 부분으로 나누어서 자세하게 설명하고자 합니다.

3.1. 컨텐츠 모델 변경

HTML 5는 div, li 같은 요소에 대해 엄격한 컨텐츠 모델을 적용합니다. 이들 요소들은 "블럭 단위" 혹은 "인라인 단위"가 될 수 있습니다. 그러나 두 가지 모두는 아닙니다. 이러한 변경을 문서 내에서 각 요소를 구조화에 사용 하는 것인지("블럭 단위") 혹은 구조 내 텍스트의 의미에 사용 하는지("인라인 단위")를 좀 더 명확하게 해 줄 것입니다. 아래 예제를 보시면 이해하실 수 있습니다. 

<div>
 <em>…</em>
 …
</div>
<div>
 <p><em>…</em></p>
 <p>…</p>
</div>

… 아래 방식으로 사용할 수 없습니다. 

<div>
 <em>…</em>
 <p>…</p>
</div>

…p요소는 블럭 단위이고 em 요소는 아니기 때문입니다.

HTML 5의 또 다른 변경은 tfoot요소가 thead바로 다음 뿐 아니라 table 끝에도 나타날 수 있습니다.

3.2. 추가 요소

아래 요소들은 구조적 마크업을 위해 추가된 요소들입니다:

  • section은 태그는 일반적인 문서 및 어플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는 h1-h6와 함께 사용할 수 있습니다.

  • article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.

  • aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.

  • header은 문서 내 머리말 부분을 표시할 때 사용합니다.

  • footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.

  • nav는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.

  • dialog는 대화 기능을 표시할 때 사용할 수 있습니다. 

    <dialog>
 <dt> 안녕하세요?
 <dd> 네 오랜만입니다. 건강하시죠.
 <dt> 물론입니다. 당신은?
 <dd> 저도 좋습니다. 
</dialog>

  • figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.

    <figure>
 <video src=ogg>…</video>
 <legend>캡션 예제</legend>
</figure>

또 다른 몇 가지 요소들을 추가하였습니다.

  • audio와 video는 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중 source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.

  • embed는 플러그인 컨텐츠를 표시할 때 사용합니다.

  • m는 별도로 표시한 컨텐츠를 표시하는데 사용합니다.

  • meter는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.

  • time은 날짜나 시간을 표시하는 데 사용합니다.

  • canvas는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용합니다.

  • command는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.

  • datagrid는 트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. (역자 주. 목록형 구조로 테이블 보다 쉽게 구조를 이해할 수 있습니다.)

  • details은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다.

  • input을 위한 list 속성과 datalist는 유용한 콤보 박스를 만드는 데 사용합니다.

    <input list=browsers>
<datalist id=browsers>
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

  • event-source는 서버가 보낸 이벤트를 파악하는 데 사용합니다.

  • output은 자바 스크립트로 수행된 결과값을 표시하는 데 사용합니다.

  • progress은 다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.

input요소에는 아래와 같은 좀 더 세부적인 type 속성 들을 추가 합니다.

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

새로운 형식들은 웹 서버에 기 정의된 유효 형식을 전달해 줄 수 있도록 사용자 에이전트가 일정에서 날짜 선택 시 달력을 표시해 주기 위해 만든 것입니다. 또는 주소록에 이메일 주소를 입력할 때 유효성을 체크 해 줌으로서 불필요한 자바 스크립트 유효성 확인 절차를 줄여 주어 사용자들이 빠르게 기능을 사용할 수 있도록 도와 줍니다.

3.3. 추가 속성

HTML 5는 다양한 요소에 대해 여러 가지 새 속성들을 제공 하고 있습니다.

  • a와 area 요소는 link와 함께 사용 가능한 media 속성을 이용할 수 있습니다.

  • a와 area 요소는 ping이라는 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있습니다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 합니다.

  • area 요소는 좀 더 견고 하도록 hreflang와 rel 속성 모델을 사용합니다.

  • base 요소는 a 요소에서 이미 널리 지원되는 target 속성을 지원합니다. a와 area에서 iframe과 함께 웹 어플리케이션에서 유용하기 때문에 target을 계속 지원 하게 됩니다.

  • li요소에서 value 속성은 표현 요소가 아니므로 계속 지원 됩니다. ol 요소에서 start 속성 역시 지원 됩니다.

  • meta 요소는 charset은 이미 많은 곳에서 지원 하고 있고 문서를 위한 문자 인코딩을 깔끔하게 적용 하므로 지원을 시작 합니다.

  • 새로 만든 autofocus 속성이 input (type이 hidden일 때를 제외), select, textarea, button 요소에 추가 됩니다. 이 속성은 문서를 읽는 동안 폼 콘트롤을 지정하는 선언적 방식을 제공합니다. 이 기능은 사용자가 원하지 않을 경우 제공하지 않는 설정을 제공 함으로서 사용자 경험을 보장 해 주어야 합니다.

  • 새로 만든 form속성은 input, output, select, textarea, button, fieldset 요소들이 한 개 이상의 폼 양식과 함께 사용하도록 지원 합니다.

  • input, button, form 요소에서 새로 사용할 수있는 replace 속성은 폼이 제출된 후 문서내에 실행되는 것에 영향을 주도록 할 수 있습니다.

  • form, select, datalist 요소는 data 속성을 가질 수 있습니다. 이 속성은 select나 datalist인 경우 서버로 부터 받은 데이터를 자동 완성해 주거나 할 때 사용할 수 있습니다.

  • 새로운 required 속성은input (type 속성이 hidden, image, submit 같은 버튼 일 때 제외), textarea에서 사용 가능 합니다. 이는 폼을 제출하기 위해서는 이 항목을 사용자가 꼭 입력해야 한다는 것을 지정 합니다.

  • input과 textarea는 inputmode라는 새로운 속성을 가집니다. 이 속성은 예상하는 입력 종류에 따라 사용자에게 힌트를 주는 인터페이스를 지원 합니다.

  • disabled 속성으로 fieldset 전체를 사용하지 않도록 할 수 있습니다.

  • input 요소에 몇 가지 새로운 속성이 추가 됩니다. autocomplete, min, max, pattern, step. 이전에 언급한 대로 list와 datalist, select 요소에도 함께 사용할 수 있습니다.

  • input과 button은 template이라는 새 속성을 통해 템플릿 반복 작업을 할 수 있습니다.

  • menu 요소는 type, label, autosubmit 같은 새 속성을 가집니다. 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다.

  • style 요소는 scoped 속성을 가집니다. 이는 지정한 스타일 시트를 사용하는 데 사용합니다. style 요소에서 지정된 스타일 규칙은 내부 트리에서만 적용할 수 있습니다.

  • script 요소는 스크립트를 불러오고 실행하는 방식에 영향을 주는 async라는 새로운 속성을 사용할 수 있습니다.

HTML 4의 몇 가지 속성들이 모든 요소에 사용할 수 있습니다. 아래 속성들은 이제 전역 속성으로 사용 가능 합니다. class, dir, id, lang, tabindex, title.

아래 속성들은 추가된 전역 속성들입니다.

  • contenteditable 속성을 가진 요소는 편집 가능한 영역임을 표시하는 속성입니다. 사용자들은 마크업과 내용을 바꿀 수 있습니다. (역자 주. 본 기능은 상용 표준이었음.)
  • contextmenu 속성을 가진 저작자에 의해 제공되는 컨텍스트 메뉴를 지정하는 데 사용할 수 있습니다.
  • draggable 속성을 가진 요소는 새 드래그앤 드롭 API에 사용할 수 있습니다.
  • irrelevant 속성을 가진 요소는 아직 혹은 더 이상 의미 있지 않다는 것을 말합니다.

아래에는 적당한 네임 스페이스를 가진 요소에 나타날 수 있는 전역 속성들입니다. 이 속성은 반복 템플릿 기능에 사용할 수 있습니다.

  • repeat
  • repeat-start
  • repeat-min
  • repeat-max

HTML 5는 on이벤트명으로 사용되던 HTML 4의 모든 이벤트 핸들러를 사용할 수 있습니다. 또한, 다중 문서 메시지 API와 event-source 요소와 함께 사용할 수 있는 onmessage 같은 추가된 이벤트 핸들러도 있습니다.

3.4. 변경 요소

아래 요소들은 HTML 5에서 새로운 의미로 재정의한 것으로 HTML 4에서와 쓰임이 달라지는 것들입니다. 새로운 의미를 부여하여 바르게 사용하도록 하기 위함입니다.

  • href 없이 a 요소를 사용하면 "작업용 링크"로 사용 합니다.

  • address 요소는 섹션 개념을 통해 새로운 영역을 표시합니다.

  • b 요소는 인쇄상 강조 표현을 가진 텍스트 뿐만 아니라 제품 소개 내 제품명, 문서 초록의 키워드 같은 아주 특별한 중요도는 갖지 않으나 일반적인 강조의 목적에 사용 합니다.

  • hr 요소는 단락 단위의 주제 바꿈을 할 때 사용 합니다.

  • i 요소는 인쇄상 기울움 표현을 가진 텍스트 뿐만 아니라 선박명, 머리속 생각, 다른 언어에서 숙어구, 기술 용어, 생물종 표시 같은 일반적인 사용 이나 소리나 분위기를 대체하는 문구 등에 사용 합니다.

  • label 요소를 위해 브라우저는 더 이상 라벨과 컨트롤 사이에 포커스 이동을 하면 안됩니다. 그런 동작이 기본 플랫폼의 사용자 인터페이스 표준이 아닐 경우.

  • menu 요소는 실제적 문서 메뉴 정보를 제공하는 데 사용합니다.

  • small 요소는 세부 주석 및 법적 인쇄 문서에서 작은 인쇄 정보를 담을 때 사용 합니다.

  • The strong 요소는 강조 보다 더 중요한 정보를 제공할 때 사용합니다.

3.5. 중단 요소

아래 요소들은 사용하지 않을 것은 권장 합니다. 사용자 에이전트는 이들을 함께 지원합니다만 HTML 5는 정확히 어떻게 언급되고 있는지 정당한 절차에 따라 렌더링 할 것입니다. (예를 들어 isindex 요소는 이미 파서에 의해 지원 됩니다.)

아래 요소들은 표현 요소들이며 CSS로 다루는 것이 더 낫기 때문에 HTML 5에 포함 되지 않았습니다.

  • basefont
  • big
  • center
  • font 단, 위지윅 에디터의 사용자 인터페이스 상 한계로 인해 사용하는 것은 허용 합니다.
  • s
  • strike
  • tt
  • u

아래 요소들은 사용자로 하여금 부정적인 사용성과 접근성을 주기 때문에 HTML 5 에서 제외된 요소 입니다.

  • frame
  • frameset
  • noframes

아래 요소들은 잘 사용하지 않고 다른 요소들과 사용법에서 혼란을 주는 요소들 이라 제외 되었습니다.

  • acronym은 매우 큰 혼란을 주고 있어 제외 합니다. 축약어를 사용할 때는 abbr를 사용하면 됩니다.
  • applet은 이미 object로 대체 되었습니다.
  • isindex은 이미 폼 양식을 통해 대체 되었습니다.
  • dir은 이미 ul 요소를 통해 대체 되었습니다.

noscript는 HTML 문법에서만 사용하고 XML 문법에서는 더 이상 사용하지 않습니다.

3.6. 중단 속성

HTML 4에서 사용되넌 몇 가지 속성들은 HTML 5에서 더 이상 사용할 수 없습니다. 만약 호환성 이슈 때문에 사용자 에이전트가 처리해야 한다면 동작 방식을 정합니다.

  • accesskey : 관련 요소 a, area, button, input, label, legend, textarea.
  • rev, charset : 관련 요소 link, a.
  • shape, coords : 관련 요소 a.
  • longdesc : 관련 요소 img, iframe.
  • target : 관련 요소 link.
  • nohref : 관련 요소 area.
  • profile : 관련 요소 head.
  • version : 관련 요소 html.
  • name : 관련 요소 map, img, object, form, iframe, a (대신 id 사용).
  • scheme : 관련 요소 meta.
  • archive, classid, codebase, codetype, declare, standby : 관련 요소 object.
  • valuetype, type : 관련 요소 param.
  • charset, language : 관련 요소 script.
  • summary : 관련 요소 table.
  • headers, axis, abbr attributes on td, th.
  • scope : 관련 요소 td.

HTML 5에서는 HTML 4 중에서 CSS로 이용 가능한 표현 속성을 더 이상 사용하지 않습니다.

  • align : 관련 요소 caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr, body.
  • alink, link, text, vlink : 관련 요소 body.
  • background : 관련 요소 body.
  • bgcolor : 관련 요소 table, tr, td, th, body.
  • border : 관련 요소 table, img and object.
  • cellpadding, cellspacing : 관련 요소 table.
  • char, charoff : 관련 요소 col, colgroup, tbody, td, tfoot, th, thead and tr.
  • clear : 관련 요소 br.
  • compact : 관련 요소 dl, menu, ol, ul.
  • frame : 관련 요소 table.
  • frameborder : 관련 요소 iframe.
  • height : 관련 요소 iframe, td and th.
  • hspace, vspace : 관련 요소 img, object.
  • marginheight, marginwidth : 관련 요소 iframe.
  • noshade : 관련 요소 hr.
  • nowrap : 관련 요소 td, th.
  • rules : 관련 요소 table.
  • scrolling : 관련 요소 iframe.
  • size : 관련 요소 hr, input and select.
  • style : 관련 요소 font를 제외한 모든 요소.
  • type : 관련 요소 li, ol and ul.
  • valign : 관련 요소 col, colgroup, tbody, td, tfoot, th, thead, tr.
  • width : 관련 요소 hr, table, td, th, col, colgroup, iframe, pre.

4. API

HTML 5는 웹 어플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 요소들과 함께 더 좋은 어플리케이션 개발에 사용할 수 있습니다.

  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
  • 온라인/오프라인 이벤트 기능.
  • 새 전역 contenteditable 속성과 함께 지원 되는 편집 API 기능.
  • 새 전역 draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
  • 네트웍 API.
  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
  • 다중 메시징 처리 기능.
  • event-source 요소와 함께 사용할 서버 전달 이벤트 기능.

4.1. HTMLDocument 확장 사항

HTML 5는 다양한 방식으로 DOM 레벨2 기반 HTML로 부터 HTMLDocument 인터페이스를 확장했습니다. 이것은 Document를 구현하는 모든 객체에 적용 하는 것으로 복합 문서의 의미를 그대로 살리고 있습니다. 또한 몇 가지 유용한 새로운 기능을 추가했습니다.

  • getElementsByClassName()는 클래스명으로 요소를 선택할 수 있습니다. SVG나 MathML 같은 Document 객체와 class 속성을 가진 모든 요소에 적용할 수 있습니다.

  • innerHTML은 HTML이나 XML 문서 내용을 얻고 이해하는 데 가장 간단한 방법입니다. 이 속성은 HTMLElement에서만 사용 가능한 상용 표준이었습니다.

  • activeElement, hasFocus는 문서내에서 어떤 요소가 포커스 되어 있는지 확인 가능합니다.

  • getSelection()은 현재 선택된 객체를 반환해 줍니다.

  • designMode, execCommand()은 문서를 편집하는데 주로 사용될 것입니다.

4.2. HTMLElement 확장 사항

HTMLElement 인터페이스 역시 HTML 5에서 몇 가지 확장 사항이 있습니다.

  • getElementsByClassName()은 HTMLDocument에서 기본적으로 사용 합니다.

  • innerHTML 역시 XML 문서에서 사용할 수 있습니다.

  • classList는 className에 편리하게 접근할 수 있는 방법입니다. 모든 객체는 요소 클래스를 처리하기 위해 has(), add(), remove(), toggle() 등을 사용할 수 있습니다. a, area, link 요소들은 rel 속성과 유사한 기능을 가진 relList라는 속성을 제공 합니다.

감사의 글

편집자는 Ben Millard, Cameron McCormack, Charles McCathieNevile, Dan Connolly, David Håsäther Henri Sivonen, James Graham, Maciej Stachowiak, Martijn Wargers, Martyn Haigh, Michael Smith, Olivier Gendrin, Philip Taylor and Simon Pieters에게 이 문서를 만들기 위해 도와 준 것을 감사합니다. 뿐만 아니라 웹 세상을 증진시키기 위해 HTML 5를 지원하는 많은 분들께 감사합니다.

참고 문헌

[DOCTYPE]
Activating the Right Layout Mode Using the Doctype Declaration, H. Sivonen, January 2007.
[DOM2HTML]
Document Object Model (DOM) Level 2 HTML Specification, J. Stenback, P. Le Hégaret, A. Le Hors, editors. W3C, January 2003.
[HTML 4]
HTML 4.01 Specification, D. Raggett, A. Le Hors, I. Jacobs, editors. W3C, December 1999.
[HTML 5]
HTML 5, I. Hickson, editor. WHATWG, June 2007.
Web Forms 2.0, I. Hickson, editor. WHATWG, October 2006.
HTML 5, I. Hickson, D. Hyatt, editors. W3C, June 2007.
Web Forms 2.0, I. Hickson, editor. W3C, October 2006.
[XHTML1]
XHTML™ 1.1 - Module-based XHTML, M. Altheim, S. McCarron, editors. W3C, May 2001.
[XML]
Extensible Markup Language (XML) 1.0 (Fourth Edition), T. Bray, J. Paoli, C. Sperberg-McQueen, E. Maler, F. Yergeau, editors. W3C, September 2006.
Namespaces in XML 1.0 (Second Edition), T. Bray, D. Hollander, A. Layman, R. Tobin, editors. W3C, August 2006.
 

[출처] 「HTML 5」를 주목해야 하는 이유

'HTML.CSS' 카테고리의 다른 글

웹브라우저의 동작 원리  (0) 2012.11.03
IE8 CSS expression 지원 중단  (0) 2008.11.21
DOM 의 이해  (0) 2008.05.07
HTML 특수문자 표현하기  (0) 2008.04.25

관련글

댓글

티스토리툴바