올해 3월 새로 조직된 W3C HTML 워킹 그룹에서 Invited Expert로 활동하고 있습니다. 소수 전문가에게만 제한적으로 열었던 Invited Expert 제도로 480여명의 웹 관련 기술자들이 새 HTML 규격에 대한 토론을 벌이고 있습니다.
HTML5에 대한 정보
- WHATWG의 도전
- 팀 버너스 리, 위기의 W3C 구하기 1편
- 팀 버너스 리, 위기의 W3C 구하기2편
- RFC: HTML의 미래에 대한 의견 청취
- HTML5에 대한 FAQ
- HTML5와 웹 표준 전망에 대한 발표 자료
http://channy.creation.net/project/html5/html4-differences/
HTML 4와 HTML 5의 차이점
2010년 3월 4일 표준 초안
- 현재 버전:
- http://www.w3.org/TR/2010/WD-html5-diff-20100304/
- 최종 출판 버전:
- http://www.w3.org/TR/html5-diff/
- 최종 편집자 버전:
- http://dev.w3.org/html5/html4-differences/
- 이번 버전:
- http://www.w3.org/TR/2009/WD-html5-diff-20090825/
- http://www.w3.org/TR/2009/WD-html5-diff-20090423/
- http://www.w3.org/TR/2009/WD-html5-diff-20090212/
- http://www.w3.org/TR/2008/WD-html5-diff-20080610/
- http://www.w3.org/TR/2008/WD-html5-diff-20080122/
- 편집자:
- Anne van Kesteren (Opera Software ASA) <annevk@opera.com>
- 한국어 번역자:
- 윤석찬 (Channy Yun) (Daum Communications Corp.) <channy@mozilla.or.kr>
Copyright © 2010 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
번역자 서문
이 문서는 http://www.w3.org/TR/2010/WD-html5-diff-20100304/의 한국어 번역판으로 영어 원본에는 없는 번역 상 오류가 들어 있을 수 있습니다. 오직 영어 원본만이 규범력을 지님에 유의하시기 바랍니다. 번역 상 오류에 대한 지적이나 제안하실 내용이 있으면 위에 있는 제 주소로 연락해 주시기 바랍니다.
This document is a Korean translation of "HTML 5 differences from HTML 4" W3C editor's draft at http://www.w3.org/TR/2010/WD-html5-diff-20100304/. 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 5는 이들의 설계를 바꿀 목적으로 만들어지고 있습니다. [HTML 4] [XHTML1] [DOM2HTML]
HTML 5 초안은 2004년에 시작되어 현대적 HTML 구현 방식과 웹 상의 HTML 문서에 대해 조사 결과를 반영하여 다음 요건을 담고 있습니다.
- 일반적 HTML 및 XML 문법으로 작성된 HTML 5에 규약에 대한 정의
- 상호 운용 구현을 위한 세부적인 작업 모델 정의
- 새로운 문서 마크업 기능 향상
- 웹 애플리케이션으로 통칭되는 개발 방식을 위한 마크업 및 API 소개
1.1. 공개 토론 사항
HTML 5는 아직 초안 상태입니다. 이는 HTML 5의 여러 가지 사항 들이 WHATWG 메일링 리스트와 HTML 워킹 그룹에서 논의 중이라는 것입니다. 아래에는 현재 논의 중인 이슈들을 정리하였습니다.
- 산업 표준으로 사용하고 있는 표현 요소에 대한 의미 정의
alt
,summary
등 접근성 및 멀티 미디어 독립 기능과 접근성 세부 기능
1.2. 하위 호환성
HTML 이전 버전과 같이 HTML 5 역시 하위 호환성을 제공합니다. HTML을 사용법이 쉽다는 장점을 계속 지향하기 위해 CSS에서 사용가능 한 표현 영역에 포함되는 몇 가지 요소와 속성을 더 이상 사용하지 않습니다.
그러나 웹 브라우저 같은 사용자 에이전트는 이러한 과거 요소를 지원해야 합니다. 표준안 자체가 작성자와 사용자 에이전트를 위한 요구 사항을 명확히 분리하고 있기 때문입니다. 예를 들어, 작성자가 isindex
나 plaintext
요소를 사용 필요가 없지만, 사용자 에이전트는 이전에 동작하던 이러한 요소들이 계속 지원 하여야 한다는 것을 의미 합니다.
작성자 및 사용자 에이전트의 요건이라는 적합성 요건을 통해 요소나 속성에서 비추천(deprecated) 기능을 만들 필요가 없어지는 것입니다.
1.3. 개발 모델
HTML 5 표준안은 두 개의 완벽한 구현물 작성을 완료될 때까지 진행 됩니다. 이것은 HTML 이전 버전 작성 방법과 완전히 다른 접근 방법입니다. 이러한 개발 모델을 채택한 목적은 웹 디자이너와 웹 개발자가 설계가 완성된 시점에서 구현 가능 혹은 사용 가능한 것을 보장하려는 의도 입니다.
1.4. 웹 서비스 구조의 영향
아래 목록은 HTML 5가 웹 구조에 영향을 끼칠 것으로 생각되는 것들입니다.
- 언어 정의 기반으로 DOM을 사용한다는 점
- 브라우징 컨텍스트(browsing context)의 개념.
- 사용자 에이전트 요건, 저작과정의 요건을 구별한다는 점
- 구현 상의 블랙박스(모호한 기능)에 대해 추상적이지 않고 실질적인 정의를 사용한다는 점.
- 신규 콘텐츠 모델 개념 (HTML 4의 블록 및 인라인 요소의 대체)
- 웹 접근성을 위해 미리 고려하여 도입한 기능 (
alt
속성과 같이 나중에 추가 된 것이 아닌hidden
속성이나progress
요소등). - 시맨틱 마크업을 정교화 (아웃라인 알고리즘, HTML 4에서 애매한 요소들 재정의)
menu
요소와command
요소.- origin 이라고 하는 개념.
- 오프라인 웹 애플리케이션 지원
- 브라우징 컨텍스트(context)의 "네비게이션" 알고리즘의 정의와 관련된 세션 목록 지원
- content-type 및 문자 인코딩 탐지.
- 파서의 명확한 정의.
contentEditable
과UndoManager
기능.- 드래그&드롭과, 복사 및 붙어넣기 구조
- 새로운
iframe
의 샌드 박스 기능.
2. 문법
HTML 5 언어는 이미 잘 알려진 HTML 4와 XHTML1 문법과 호환 됩니다만 처리 방식 및 생략 마크업 같은 HTML 4 내 난해한 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>
HTML5는 문법 내에서 text/html-sandboxed
미디어 형식을 지원 합니다. 신뢰되지 않은 데이터를 호스팅할 때 사용합니다.
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(Byte Order Mark) 문자를 표시. 이 문자는 인코딩 방법에 대한 정보를 제공해 줍니다.
- 파일 초기 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>
만 있으면 표준 모드로 동작 합니다.
2.3 MathML과 SVG
HTML 5에서는 HTML 구문안에서 MathML 이나 SVG 을 이용할 수 있습니다. 매우 간단한 예제로서 아래와 같이 쓰는 것이 가능해집니다.
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
HTML 안에서 SVG foreignObject
을 이용 하고 그 안에 MathML이나 HTML을 포함시키는 것도 가능합니다.
2.4 기타 사항
그 외에도 몇인가, 알아둬서 손인 없는 변경 점이 있습니다.
- HTML에서 IRI 을 기본적으로 지원합니다. 단, 모든 기능은 문서 인코딩이 UTF-8 또는 UTF-16일 경우에만 사용 가능합니다.
lang
속성은 XML의xml:lang
같은 방식으로 기술 가능합니다.
3. 언어
본 장에서는 HTML 4와 HTML 5 사이에 다른 특징들을 여러 부분으로 나누어서 자세하게 설명하고자 합니다.
3.1. 새 요소
섹션 내 링크는 그요소가 재정의 되지 않으면 작업이 중단 될 수 있습니다. 내용은 최종 초안에 포함될 것입니다.
아래 요소들은 구조적 마크업을 위해 추가된 요소들입니다:
-
section
은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는h1
~h6
와 함께 사용할 수 있습니다. -
article
은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다. -
aside
는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다. -
hgroup
은 섹션 머리말을 표시할 때 사용합니다. -
header
은 문서 내 소개 및 네비게이션 메뉴 모음을 표시할 때 사용합니다. -
footer
는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다. -
nav
는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다. -
figure
는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.<figure> <video src=ogg>…</video> <legend>캡션 예제</legend> </figure>
figcaption
는 캡션에 사용 합니다.
또 다른 몇 가지 요소들을 추가하였습니다.
-
audio
와video
는 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중source
요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다. -
embed
는 플러그인 컨텐츠를 표시할 때 사용합니다. -
mark
는 별도로 표시한 컨텐츠를 표시하는데 사용합니다. -
progress
는 다운로드나 시간이 걸리는 별도 작업의 과정을 표시할 때 사용합니다. -
meter
는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다. -
time
은 날짜나 시간을 표시하는 데 사용합니다. -
ruby
,rt
,rp
는 루비 언어 표현을 위해 사용합니다. -
canvas
는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용합니다. -
command
는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다. -
details
은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다. -
datalist
는input
에 대한 새list
와 함께 콤보박스를 만들 때 사용합니다.<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
keygen
은 키의 페어를 생성하기 위한 컨트롤을 나타냅니다.-
output
은 스크립트에 의한 계산 결과등, 어떠한 출력 결과를 나타냅니다.
input
요소에는 아래와 같은 좀 더 세부적인 type
속성 들을 추가 합니다.
새로운 형식들은 웹 서버에 기 정의된 유효 형식을 전달해 줄 수 있도록 사용자 에이전트가 일정에서 날짜 선택 시 달력을 표시해 주기 위해 만든 것입니다. 또는 주소록에 이메일 주소를 입력할 때 유효성을 체크 해 줌으로서 불필요한 자바 스크립트 유효성 확인 절차를 줄여 주어 사용자들이 빠르게 기능을 사용할 수 있도록 도와 줍니다.
3.2. 새 속성
HTML 5는 기존 HTML 4 내의 요소에 대해 여러 가지 새 속성들을 제공 하고 있습니다.
-
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
요소에 추가 됩니다. 이 속성은 문서를 읽는 동안 폼 콘트롤을 지정하는 선언적 방식을 제공합니다. 이 기능은 사용자가 원하지 않을 경우 제공하지 않는 설정을 제공 함으로서 사용자 경험을 보장 해 주어야 합니다. -
placeholder
속성은input
,textarea
요소에서 사용할 수 있습니다. -
새로 만든
form
속성은input
,output
,select
,textarea
,button
,fieldset
요소들이 한 개 이상의 폼 양식과 함께 사용하도록 지원 합니다. -
새로운
required
속성은input
(type
속성이hidden
,image
,submit
같은 버튼 일 때 제외),textarea
에서 사용 가능 합니다. 이는 폼을 제출하기 위해서는 이 항목을 사용자가 꼭 입력해야 한다는 것을 지정 합니다. -
fieldset
에서는 내부 콘텐츠에 대해disabled
를 사용할 수 있습니다. -
input
에는 몇 가지 새 속성을 쓸 수 있습니다.autocomplete
,min
,max
,multiple
,pattern
,step
등. 앞에 언급한 대로list
속성은datalist
와select
와 함께 사용할 수 있습니다. -
form
요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록novalidate
속성을 가집니다. -
input
,button
,form
요소에서formaction
,formenctype
,formmethod
,formnovalidate
, andformtarget
를 새로 사용 가능합니다. 만약에 이를 사용하면action
,enctype
,method
,novalidate
,target
속성들을 재정의(Override)할 수 있습니다. -
menu
요소는type
,label
, 같은 새 속성을 가집니다. 이들 속성은 전역contextmenu
속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다. -
style
요소는scoped
속성을 가집니다. 이는 지정한 스타일 시트를 사용하는 데 사용합니다.style
요소에서 지정된 스타일 규칙은 내부 트리에서만 적용할 수 있습니다. -
script
요소는 스크립트를 불러오고 실행하는 방식에 영향을 주는async
라는 새로운 속성을 사용할 수 있습니다. -
html
에는menifest
라는 새 속성을 가질 수 있는데 오프라인 웹 애플리케이션과 함께 사용해서 캐쉬 명세를 정의할 수 있습니다. -
link
에는sizes
라는 새 속성을 가질 수 있는데rel
에서icon
이 정의되면 아이콘 크기를 정할 수 있습니다. -
ol
에는reversed
라는 새 속성을 가질 수 있는데 역순으로 정렬할 때 사용합니다. -
iframe
요소에는seamless
와sandbox
를 통해 내용을 제어할 수 있습니다. (예: 블로그 답글)
HTML 4의 몇 가지 속성들이 모든 요소에 사용할 수 있습니다. 아래 속성들은 이제 전역 속성으로 사용 가능 합니다. class
, dir
, id
, lang
, tabindex
, title
.
아래 속성들은 추가된 전역 속성들입니다.
contenteditable
속성을 가진 요소는 편집 가능한 영역임을 표시하는 속성입니다. 사용자들은 마크업과 내용을 바꿀 수 있습니다. (역자 주. 본 기능은 상용 표준이었음.)contextmenu
속성을 가진 저작자에 의해 제공되는 컨텍스트 메뉴를 지정하는 데 사용할 수 있습니다.data-*
모음은 저작자가 정의 할 수 있습니다.data-
라는 예약어를 통해 향후 HTML 버전과 충돌하지 않고도 사용자 정의 태그로 이용하거나 브라우저 벤더가 사용할 수 있습니다.draggable
속성을 가진 요소는 새 드래그앤 드롭 API에 사용할 수 있습니다.hidden
속성은 요소가 아직 없거나 존재하지 않을 때 사용합니다.item
,itemprop
및subject
속성은 시맨틱 주석(Annotation)을 붙여 기계가 처리할 수 있는 라벨로서 사용합니다. HTML 5 초안의 마이크로 데이터 기능입니다. (역자주: 마이크로 포맷을 범용으로 만든 것임.)role
,aria-*
모음은 접근성을 위한 지원 기능에 사용 합니다.spellcheck
속성은 맞춤법 검사 기능을 제공할 지 여부를 정해 줍니다.
HTML 5는 on이벤트명
으로 사용되던 HTML 4의 모든 이벤트 핸들러를 사용할 수 있습니다. 또한, 원격 문서 메시지 API 사용하는 message
같은 새 이벤트를 위한 이벤트 핸들러에도 사용할 수 있습니다.
3.3. 변경 요소
아래 요소들은 HTML 5에서 새로운 의미로 재정의한 것으로 HTML 4에서와 쓰임이 달라지는 것들입니다. 새로운 의미를 부여하여 바르게 사용하도록 하기 위함입니다.
-
a
요소에서href
없이 사용하면 "작업용 링크"로 사용 합니다. 문장 보다는 흐름을 나타내는 콘텐츠에 사용 될 수 있습니다. -
address
요소는 섹션 개념을 통해 새로운 영역을 표시합니다. -
b
요소는 인쇄상 강조 표현을 가진 텍스트 뿐만 아니라 제품 소개 내 제품명, 문서 초록의 키워드 같은 아주 특별한 중요도는 갖지 않으나 일반적인 강조의 목적에 사용 합니다. -
hr
요소는 단락 단위의 주제 바꿈을 할 때 사용 합니다. -
i
요소는 인쇄상 기울움 표현을 가진 텍스트 뿐만 아니라 선박명, 머리속 생각, 다른 언어에서 숙어구, 기술 용어, 생물종 표시 같은 일반적인 사용 이나 소리나 분위기를 대체하는 문구 등에 사용 합니다. -
label
요소를 위해 브라우저는 더 이상 라벨과 컨트롤 사이에 포커스 이동을 하면 안됩니다. 그런 동작이 기본 플랫폼의 사용자 인터페이스 표준이 아닐 경우. -
menu
요소는 실제적 문서 메뉴 정보를 제공하는 데 사용합니다. -
small
요소는 세부 주석 및 법적 인쇄 문서에서 작은 인쇄 정보를 담을 때 사용 합니다. -
strong
요소는 강조 보다 더 중요한 정보를 제공할 때 사용합니다.
3.4 변경 속성
아래 속성들은 제공은 되나 사용 하지 않기를 권장합니다. 필요한 경우 꼭 필요할 곳에서 사용할 수 있습니다.
-
img
의border
속성은 값이 "0
"일 때만 사용하고 가급적 CSS를 사용합니다. -
script
의language
속성은 값이"JavaScript
" (대소문자 구별)에만 사용하고type
속성과 함께 쓰지 않고 생략할 수 있습니다. -
a
의name
속성은id
로 바꾸어 쓰기를 권장합니다. -
table
의summary
속성은 HTML5 초안에 여러 대체 방법이 있습니다.
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에서 더 이상 사용할 수 없습니다. 만약 호환성 이슈 때문에 사용자 에이전트가 처리해야 한다면 동작 방식을 따로 정해야 합니다.
rev
및charset
속성:link
및a
.shape
및coords
속성:a
.longdesc
속성:img
및iframe
.target
속성:link
.nohref
속성:area
.profile
속성:head
.version
속성:html
.name
속성:img
(useid
instead).scheme
속성:meta
.archive
,classid
,codebase
,codetype
,declare
,standby
속성:object
.valuetype
,type
속성:param
.
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
.alink
,link
,text
andvlink
속성:body
.background
속성:body
.bgcolor
속성:table
,tr
,td
,th
및body
.border
속성:table
andobject
.cellpadding
및cellspacing
속성:table
.char
및charoff
속성:col
,colgroup
,tbody
,td
,tfoot
,th
,thead
및tr
.clear
속성:br
.compact
속성:dl
,menu
,ol
및ul
.frame
속성:table
.frameborder
속성:iframe
.height
속성:td
및th
.hspace
및vspace
속성:img
및object
.marginheight
및marginwidth
속성:iframe
.noshade
속성:hr
.nowrap
속성:td
및th
.rules
속성:table
.scrolling
속성:iframe
.size
속성:hr
.type
속성:li
,ol
andul
.valign
속성:col
,colgroup
,tbody
,td
,tfoot
,th
,thead
andtr
.width
속성:hr
,table
,td
,th
,col
,colgroup
및pre
.
4. API
HTML 5는 웹 애플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 요소들과 함께 더 좋은 애플리케이션 개발에 사용할 수 있습니다.
- 2차원 그래픽 API에 사용할 수 있는
canvas
요소. - 내장 비디오 및 오디오 재생을 위한
video
,audio
요소. - 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
- 오프라인 웹 애플리케이션 기반 API.
- 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록할 수 있는 API.
- 새 전역
contenteditable
속성과 함께 지원 되는 편집 API 기능. draggable
속성과 함께 지원 되는 드래그앤 드롭 API 기능.- 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
- (원격) 다중 메시징 처리 기능.
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
라는 속성을 제공 합니다.
5 HTML5 변경 기록
아래 변경 기록은 HTML5 초안의 변경 과정을 담은 것입니다. 자세한 사항은 public-html@w3.org
와 whatwg@whatwg.org
메일링리스트에 기록 되어 있고 This Week in HTML5 블로그 글에 나와 있기도 합니다. 많은 편집자 변경 사항은 이 내용에 포함 되어 있지는 않습니다. 서비스 구현 하시는 분은 초안을 자주 살펴 보시기를 권고 합니다.
변경 내역은 시간 순으로 나열 되어 있습니다. (역자 주: 변경 기록은 영문 그대로 두었습니다.)
5.1. 2009년 8월 25이후
- The
dialog
element has been removed. A section with advice on how to mark up conversations has effectively replaced it. document.head
has been introduced to provide convenient access to thehead
element from script.- The link type
feed
has been removed.alternate
with specific media types is to be used instead. createHTMLDocument()
has been introduced as API to allow easy creation of HTML documents.- Both the
meter
andprogress
elements no longer have "magic" processing of their contents because it could not be made to work internationally. - The
meter
andprogress
elements, as well as theoutput
element, can now be labeled using thelabel
element. - A new media type,
text/html-sandboxed
, was introduced to allow hosting of potentially hostile content without it causing harm. - A
srcdoc
attribute for theiframe
element was introduced to allow embedding of potentially hostile content inline. It is expected to be used together with thesandbox
andseamless
attributes. - The
figure
element now uses a new elementfigcaption
rather thanlegend
because people want to use HTML5 long before it reaches W3C Recommendation. - The
details
element now uses a new elementsummary
for exactly the same reason. - The
autobuffer
attribute on media elements was renamed topreload
.
A whole lot of other smaller issues have also been resolved. The above list summarises what is thought to be of primary interest to authors.
In addition to all of the above, Microdata, the 2D context API for canvas
, and Web Messaging (postMessage()
API) have been split into their own drafts at the W3C (the WHATWG still publishes a version of HTML5 that includes them):
Specific microdata vocabularies are gone altogether in the W3C draft of HTML5 and are not published as a separate draft. The WHATWG draft of HTML5 still includes them.
5.2 2009 년 4월 23일 이전
- When the
time
element is empty user agents have to render the time in a locale-specific manner. - The
load
event is dispatched atWindow
, but now hasDocument
as its target. pushState()
now affects theReferer
(sic) header.onundo
andonredo
are now onWindow
.- Media elements now have a
startTime
member that indicates where the current resource starts. header
has been renamed tohgroup
and a newheader
element has been introduced.createImageData()
now also takesImageData
objects.createPattern()
can now take avideo
element as argument too.- The
footer
element is no longer allowed inheader
andheader
is not allowed inaddress
orfooter
. - A new control has been introduced:
<input type="tel">
- The Command API now works for all elements.
accesskey
is now properly defined.section
andarticle
now take acite
attribute.- A new feature called Microdata has been introduced which allows people to embed custom data structures in their HTML documents.
- Using the Microdata model three predefined vocabularies have also been included: vCard, vEvent, and a model for licensing.
- Drag and drop has been updated to work with the Microdata model.
- The last of the parsing quirks has been defined.
textLength
has been added as member of thetextarea
element.- The
rp
element now takes phrasing content rather than a single character. location.reload()
is now defined.- The
hashchange
event now fires asynchronously. - Rules for compatibility with XPath 1.0 and XSLT 1.0 have been added.
- The
spellcheck
DOM attribute now maps to aDOMString
. hasFeature()
support has been reduced to a minimum.- The
Audio()
constructor sets theautobuffer
attribute. - The
td
element is no longer allowed inthead
. - The
input
element andDataTransfer
object now have afiles
DOM attribute. - The
datagrid
andbb
have been removed due to their design not being agreed upon. - The cue range API has been removed from the media elements.
- Support for WAI-ARIA has been integrated.
On top of this list quite a few minor clarifications, typos, issues specific to implementors, and other small problems have been resolved.
In addition, the following parts of HTML5 have been taken out and will likely be further developed at the IETF:
- Definition of URLs.
- Definition of Content-Type sniffing.
5.3 2009 년 2월 12일 이전
- A new global attribute called
spellcheck
has been added. - Defined that ECMAScript
this
in the global object returns aWindowProxy
object rather than theWindow
object. - The
value
DOM attribute forinput
elements in the File Upload state is now defined. - Definition of
designMode
was changed to be more in line with legacy implementations. - The
drawImage()
method of the 2D drawing API can now take avideo
element as well. - The way media elements load resources has been changed.
document.domain
is now IPv6-compatible.- The
video
element gained anautobuffer
boolean attribute that serves as a hint. - You are now allowed to specify the
meta
element with acharset
attribute in XML documents if the value of that attribute matches the encoding of the document. (Note that it does not specify the value, it is just a talisman.) - The
bufferingRate
andbufferingThrottled
members of media elements have been removed. - The media element resource selection algorithm is now asynchronous.
- The
postMessage()
API now takes an array ofMessagePort
objects rather than just one. - The second argument of the
add()
method on theselect
element and theoptions
member of theselect
element is now optional. - The
action
,enctype
,method
,novalidate
, andtarget
attributes oninput
andbutton
elements have been renamed toformaction
,formenctype
,formmethod
,formnovalidate
, andformtarget
. - A "storage mutex" concept has been added to deal with separate pages trying to change a storage object (
document.cookie
andlocalStorage
) at the same time. TheNavigator
gained agetStorageUpdates()
method to allow it to be explicitly released. - A syntax for SVG similar to MathML is now defined so that SVG can be included in
text/html
resources. - The
placeholder
attribute has been added to thetextarea
element. - Added a
keygen
element for key pair generation. - The
datagrid
element was revised to make the API more asynchronous and allow for unloaded parts of the grid.
In addition, several parts of HTML5 have been taken out and will be further developed by the Web Applications Working Group as standalone specifications:
- Web Sockets
- Server-Sent Events
- Web Storage (the persistent storage and database storage features)
5.4 2008년 6월 10일 이전
- The
data
member ofImageData
objects has been changed from an array to aCanvasPixelArray
object. - Shadows are now required from implementations of the
canvas
element and its API. - Security model for
canvas
is clarified. - Various changes to the processing model of
canvas
have been made in response to implementation and author feedback. E.g. clarifying what happens when NaN and Infinity are passed and fixing the definitions ofarc()
andarcTo()
. innerHTML
in XML was slightly changed to improve round-tripping.- The
toDataURL()
method on thecanvas
element now supports setting a quality level when the media type argument isimage/jpeg
. - The
poster
attribute of thevideo
element now affects its intrinsic dimensions. - The behavior of the
type
attribute of thelink
element has been clarified. - Sniffing is now allowed for
link
when the expected type is an image. - A section on URLs is introduced dealing with how URL values are to be interpreted and what exactly authors are required to do. Every feature of the specification that uses URLs has been reworded to take the new URL section into account.
- It is now explicit that the
href
attribute of thebase
element does not depend onxml:base
. - It is now defined what the behavior should be when the base URL changes.
- URL decomposition DOM attributes are now more aligned with Internet Explorer.
- The
xmlns
attribute with the valuehttp://www.w3.org/1999/xhtml
is now allowed on all HTML elements. data-*
attributes and custom attributes on theembed
element now have to match the XMLName
production and cannot contain a colon.- Web Socket API is introduced for bidirectional communication with a server. It is currently limited to text messages.
- The default value of
volume
on media elements is now 1.0 rather than 0.5. event-source
was renamed toeventsource
because no other HTML element uses a hyphen.- A message channel API has been introduced augmenting
postMessage()
. - A new element named
bb
has been added. It represents a user agent command that the user can invoke. - The
addCueRange()
method on media elements has been modified to take an identifier which is exposed in the callbacks. - It is now defined how to mutate a DOM into an infoset.
- The
parent
attribute of theWindow
object is now defined. - The
embed
element is defined to do extension sniffing for compatibilty with servers that deliver Flash astext/plain
. (This is marked as an issue in the specification to figure out if there is a better way to make this work.) - The
embed
can now be used without itssrc
attribute. getElementsByClassName()
is defined to be ASCII case-insensitive in quirks mode for consistency with CSS.- In HTML documents
localName
no longer returns the node name in uppercase. data-*
attributes are defined to be always lowercase.- The
opener
attribute of theWindow
object is not to be present when the page was opened from a link withtarget="_blank"
andrel="noreferrer"
. - The
top
attribute of theWindow
object is now defined. - The
a
element now allows nested flow content, but not nested interactive content. - It is now defined what the
header
element means to document summaries and table of contents. - What it means to fetch a resource is now defined.
- Patterns are now required for the
canvas
element. - The
autosubmit
attribute has been removed from themenu
element. - Support for
outerHTML
andinsertAdjacentHTML()
has been added. xml:lang
is now allowed in HTML whenlang
is also specified and they have the same value. In XMLlang
is allowed ifxml:lang
is also specified and they have the same value.- The
frameElement
attribute of theWindow
object is now defined. - An event loop and task queue is now defined detailing script execution and events. All features have been updated to be defined in terms of this mechanism.
- If the
alt
attribute is omitted atitle
attribute, an enclosingfigure
element with alegend
element descendant, or an enclosing section with an associated heading must be present. - The
irrelevant
attribute has been renamed tohidden
. - The
definitionURL
attribute of MathML is now properly supported. Previously it would have ended up being all lowercase during parsing. - User agents must treat US-ASCII as Windows-1252 for compatibility reasons.
- An alternative syntax for the
DOCTYPE
is allowed for compatibility with some XML tools. - Data templates have been removed (consisted of the
datatemplate
,rule
andnest
elements). - The media elements now support just a single
loop
attribute. - The
load()
method on media elements has been redefined as asynchronous. It also tries out files in turn now rather than just looking at thetype
attribute of thesource
element. - A new member called
canPlayType()
has been added to the media elements. - The
totalBytes
andbufferedBytes
attributes have been removed from the media elements. - The
Location
object gained aresolveURL()
method. - The
q
element has changed again. Punctation is to be provided by the user agent again. - Various changes were made to the HTML parser algorithm to be more in line with the behavior Web sites require.
- The
unload
andbeforeunload
events are now defined. - The IDL blocks in the specification have been revamped to be in line with the upcoming Web IDL specification.
- Table headers can now have headers. User agents are required to support a
headers
attribute pointing to atd
orth
element, but authors are required to only let them point toth
elements. - Interested parties can now register new
http-equiv
values. - When the
meta
element has acharset
attribute it must occur within the first 512 bytes. - The
StorageEvent
object now has astorageArea
attribute. - It is now defined how HTML is to be used within the SVG
foreignObject
element. - The notification API has been dropped.
- How [[Get]] works for the
HTMLDocument
andWindow
objects is now defined. - The
Window
object gained thelocationbar
,menubar
,personalbar
,scrollbars
,statusbar
andtoolbar
attributes giving information about the user interface. - The application cache section has been significantly revised and updated.
document.domain
now relies on the Public Suffix List. [PSL]- A non-normative rendering section has been added that describes user agent rendering rules for both obsolete and conforming elements.
- A normative section has been added that defines when certain selectors as defined in the Selectors and the CSS3 Basic User Interface Module match HTML elements. [SELECTORS] [CSS-UI]
Web Forms 2.0, previously a standalone specification, has been fully integrated into HTML5 since last publication. The following changes were made to the forms chapter:
- Support for XML submission has been removed.
- Support for form filling has been removed.
- Support for filling of the
select
anddatalist
elements through thedata
attribute has been removed. - Support for associating a field with multiple forms has been removed. A field can still be associated with a form it is not nested in through the
form
attribute. - The
dispatchFormInput()
anddispatchFormChange()
methods have been removed. - Repetition templates have been removed.
- The
inputmode
attribute has been removed. - The
input
element in the File Upload state no longer supports themin
andmax
attributes. - The
allow
attribute oninput
elements in the File Upload state is no longer authoritative. - The
pattern
andaccept
attributes fortextarea
have been removed. - RFC 3106 is no longer explicitly supported.
- The
submit()
method now just submits, it no longer ensures the form controls are valid. - The
input
element in the Range state now defaults to the middle, rather than the minimum value. - The
size
attribute on theinput
element is now conforming (rather than deprecated). object
elements now partake in form submission.- The
type
attribute of theinput
element gained the valuescolor
andsearch
. - The
input
element gained amultiple
attribute which allows for either multiple e-mails or multiple files to be uploaded depending on the value of thetype
attribute. - The
input
,button
andform
elements now have anovalidate
attribute to indicate that the form fields should not be required to have valid values upon submission. - When the
label
element contains aninput
it may still have afor
attribute as long as it points to theinput
element it contains. - The
input
element now has anindeterminate
DOM attribute. - The
input
element gained aplaceholder
attribute.
5.5 2008 년 1월 22일 이전
- Implementation and authoring details around the
ping
attribute have changed. <meta http-equiv=content-type>
is now a conforming way to set the character encoding.- API for the
canvas
element has been cleaned up. Text support has been added. globalStorage
is now restricted to the same-origin policy and renamed tolocalStorage
. Related event dispatching has been clarified.postMessage()
API changed. Only the origin of the message is exposed, no longer the URL. It also requires a second argument that indicates the origin of the target document.- Drag and drop API has got clarification. The
dataTransfer
object now has atypes
attribute indicating the type of data being transferred. - The
m
element is now calledmark
. - Server-sent events has changed and gotten clarification. It uses a new format so that older implementations are not broken.
- The
figure
element no longer requires a caption. - The
ol
element has a newreversed
attribute. - Character encoding detection has changed in response to feedback.
- Various changes have been made to the HTML parser section in response to implementation feedback.
- Various changes to the editing section have been made, including adding
queryCommandEnabled()
and related methods. - The
headers
attribute has been added fortd
elements. - The
table
element has a newcreateTBody()
method. - MathML support has been added to the HTML parser section. (SVG support is still awaiting input from the SVG WG.)
- Author-defined attributes have been added. Authors can add attributes to elements in the form of
data-name
and can access these through the DOM usingdataset[name]
on the element in question. - The
q
element has changed to require punctation inside rather than having the browser render it. - The
target
attribute can now have the value_blank
. - The
showModalDialog
API has been added. - The
document.domain
API has been defined. - The
source
element now has a newpixelratio
attribute useful for videos that have some kind encoding error. bufferedBytes
,totalBytes
andbufferingThrottled
DOM attributes have been added to thevideo
element.- Media
begin
event has been renamed toloadstart
for consistency with the Progress Events specification. charset
attribute has been added toscript
.- The
iframe
element has gained thesandbox
andseamless
attributes which provide sandboxing functionality. - The
ruby
,rt
andrp
elements have been added to support ruby annotation. - A
showNotification()
method has been added to show notification messages to the user. - Support for
beforeprint
andafterprint
events has been added.
감사의 글
편집자는 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.
- Web Forms 2.0, I. Hickson, editor. WHATWG, 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.