HTML4 HTML5 차이 - HTML4 HTML5 chai

번역자 서문

이 문서는 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.

초록

HTML5는 월드와이드웹의 핵심 언어에 대한 다섯번째 변경 내용을 다루고 있습니다. 이 문서는 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 편집자 초안을 통해 진행 사항을 아실 수 있고 메일링 리스트를 통해 여러분의 의견을 보낼 수 있습니다. 그 동안 있었던 논의 사항은 공개 저장소에서 볼 수 있습니다.

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

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

목차

• 1. 개요
  • 1.1. 공개 토론 사항
  • 1.2. 하위 호환성
  • 1.3. 개발 모델
• 2. 문법
  • 2.1. 문자 인코딩
  • 2.2. DOCTYPE
  • 2.3 MathML 및 SVG
  • 2.4 기타 사항
• 3. 언어
  • 3.1. 새 요소(Element)
  • 3.2. 새 속성(Atrribute)
  • 3.3. 변경 요소
  • 3.4. 변경 속성
  • 3.5. 중단 요소
  • 3.6. 중단 속성
• 4. API
  • 4.1. HTMLDocument 확장 사항
  • 4.2. HTMLElement 확장 사항
• 5 HTML 5 변경 로그
  • 5.12009년 8월 25일 이후
  • 5.2 2009년 4월 23일 이전
  • 5.3 2009년 2월 12일 이전
  • 5.4 2008년 6월 10일 이전
  • 5.5 2008년 1월 22일 이전
• 감사의 글
• 참고 문헌

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 문서에 대해 조사 결과를 반영하여 다음 요건을 담고 있습니다.

1. 일반적 HTML 및 XML 문법으로 작성된 HTML 5에 규약에 대한 정의
2. 상호 운용 구현을 위한 세부적인 작업 모델 정의
3. 새로운 문서 마크업 기능 향상
4. 웹 애플리케이션으로 통칭되는 개발 방식을 위한 마크업 및 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은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는 h2 ~ 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 속성 들을 추가 합니다.

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

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

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, and formtarget를 새로 사용 가능합니다. 만약에 이를 사용하면 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 (use id 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, h2, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead 및 tr.
• alink, link, text and vlink 속성: body.
• background 속성: body.
• bgcolor 속성: table, tr, td, th 및 body.
• border 속성: table and object.
• 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 and ul.
• valign 속성: col, colgroup, tbody, td, tfoot, th, thead and tr.
• 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 초안의 변경 과정을 담은 것입니다. 자세한 사항은 와 메일링리스트에 기록 되어 있고 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 the head 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 and progress elements no longer have "magic" processing of their contents because it could not be made to work internationally.
• The meter and progress elements, as well as the output element, can now be labeled using the label 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 the iframe element was introduced to allow embedding of potentially hostile content inline. It is expected to be used together with the sandbox and seamless attributes.
• The figure element now uses a new element figcaption rather than legend because people want to use HTML5 long before it reaches W3C Recommendation.
• The details element now uses a new element summary for exactly the same reason.
• The autobuffer attribute on media elements was renamed to preload.

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):

• HTML Microdata
• HTML Canvas 2D Context
• HTML5 Web Messaging

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 at Window, but now has Document as its target.
• pushState() now affects the Referer (sic) header.
• onundo and onredo are now on Window.
• Media elements now have a startTime member that indicates where the current resource starts.
• header has been renamed to hgroup and a new header element has been introduced.
• createImageData() now also takes ImageData objects.
• createPattern() can now take a video element as argument too.
• The footer element is no longer allowed in header and header is not allowed in address or footer.
• A new control has been introduced: <input type="tel">
• The Command API now works for all elements.
• accesskey is now properly defined.
• section and article now take a cite 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 the textarea 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 a DOMString.
• hasFeature() support has been reduced to a minimum.
• The Audio() constructor sets the autobuffer attribute.
• The td element is no longer allowed in thead.
• The input element and DataTransfer object now have a files DOM attribute.
• The datagrid and bb 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 a WindowProxy object rather than the Window object.
• The value DOM attribute for input 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 a video element as well.
• The way media elements load resources has been changed.
• document.domain is now IPv6-compatible.
• The video element gained an autobuffer boolean attribute that serves as a hint.
• You are now allowed to specify the meta element with a charset 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 and bufferingThrottled members of media elements have been removed.
• The media element resource selection algorithm is now asynchronous.
• The postMessage() API now takes an array of MessagePort objects rather than just one.
• The second argument of the add() method on the select element and the options member of the select element is now optional.
• The action, enctype, method, novalidate, and target attributes on input and button elements have been renamed to formaction, formenctype, formmethod, formnovalidate, and formtarget.
• A "storage mutex" concept has been added to deal with separate pages trying to change a storage object (document.cookie and localStorage) at the same time. The Navigator gained a getStorageUpdates() 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 the textarea 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 of ImageData objects has been changed from an array to a CanvasPixelArray 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 of arc() and arcTo().
• innerHTML in XML was slightly changed to improve round-tripping.
• The toDataURL() method on the canvas element now supports setting a quality level when the media type argument is image/jpeg.
• The poster attribute of the video element now affects its intrinsic dimensions.
• The behavior of the type attribute of the link 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 the base element does not depend on xml: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 value http://www.w3.org/1999/xhtml is now allowed on all HTML elements.
• data-* attributes and custom attributes on the embed element now have to match the XML Name 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 to eventsource 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 the Window object is now defined.
• The embed element is defined to do extension sniffing for compatibilty with servers that deliver Flash as text/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 its src 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 the Window object is not to be present when the page was opened from a link with target="_blank" and rel="noreferrer".
• The top attribute of the Window 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 the menu element.
• Support for outerHTML and insertAdjacentHTML() has been added.
• xml:lang is now allowed in HTML when lang is also specified and they have the same value. In XML lang is allowed if xml:lang is also specified and they have the same value.
• The frameElement attribute of the Window 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 a title attribute, an enclosing figure element with a legend element descendant, or an enclosing section with an associated heading must be present.
• The irrelevant attribute has been renamed to hidden.
• 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 and nest 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 the type attribute of the source element.
• A new member called canPlayType() has been added to the media elements.
• The totalBytes and bufferedBytes attributes have been removed from the media elements.
• The Location object gained a resolveURL() 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 and beforeunload 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 a td or th element, but authors are required to only let them point to th elements.
• Interested parties can now register new http-equiv values.
• When the meta element has a charset attribute it must occur within the first 512 bytes.
• The StorageEvent object now has a storageArea 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 and Window objects is now defined.
• The Window object gained the locationbar, menubar, personalbar, scrollbars, statusbar and toolbar 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 and datalist elements through the data 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() and dispatchFormChange() 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 the min and max attributes.
• The allow attribute on input elements in the File Upload state is no longer authoritative.
• The pattern and accept attributes for textarea 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 the input element is now conforming (rather than deprecated).
• object elements now partake in form submission.
• The type attribute of the input element gained the values color and search.
• The input element gained a multiple attribute which allows for either multiple e-mails or multiple files to be uploaded depending on the value of the type attribute.
• The input, button and form elements now have a novalidate attribute to indicate that the form fields should not be required to have valid values upon submission.
• When the label element contains an input it may still have a for attribute as long as it points to the input element it contains.
• The input element now has an indeterminate DOM attribute.
• The input element gained a placeholder 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 to localStorage. 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 a types attribute indicating the type of data being transferred.
• The m element is now called mark.
• 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 new reversed 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 for td elements.
• The table element has a new createTBody() 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 using dataset[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 new pixelratio attribute useful for videos that have some kind encoding error.
• bufferedBytes, totalBytes and bufferingThrottled DOM attributes have been added to the video element.
• Media begin event has been renamed to loadstart for consistency with the Progress Events specification.
• charset attribute has been added to script.
• The iframe element has gained the sandbox and seamless attributes which provide sandboxing functionality.
• The ruby, rt and rp elements have been added to support ruby annotation.
• A showNotification() method has been added to show notification messages to the user.
• Support for beforeprint and afterprint 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를 지원하는 많은 분들께 감사합니다.

참고 문헌