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 구현 방식과 컨텐츠 제공을 위해 만들어 지고 있습니다. 이 초안은 다음과 같은 내용을 담고 있습니다.
- 일반적 HTML 및 XML 문법으로 작성된 HTML 5에 규약에 대한 정의
- 상호 운용 구현을 위한 세부적인 작업 모델 정의
- 새로운 문서 마크업 기능 향상 방법
- 웹 어플리케이션으로 통칭되는 개발 방식을 위한 마크업 및 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 ontd
,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
andobject
.cellpadding
,cellspacing
: 관련 요소table
.char
,charoff
: 관련 요소col
,colgroup
,tbody
,td
,tfoot
,th
,thead
andtr
.clear
: 관련 요소br
.compact
: 관련 요소dl
,menu
,ol
,ul
.frame
: 관련 요소table
.frameborder
: 관련 요소iframe
.height
: 관련 요소iframe
,td
andth
.hspace
,vspace
: 관련 요소img
,object
.marginheight
,marginwidth
: 관련 요소iframe
.noshade
: 관련 요소hr
.nowrap
: 관련 요소td
,th
.rules
: 관련 요소table
.scrolling
: 관련 요소iframe
.size
: 관련 요소hr
,input
andselect
.style
: 관련 요소font
를 제외한 모든 요소.type
: 관련 요소li
,ol
andul
.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.
- 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.
'HTML & Script' 카테고리의 다른 글
meta (1) | 2007.09.28 |
---|---|
Measuring Element Dimension and Location (2) | 2007.08.22 |
HTML and CSS Table Border Style Wizard (0) | 2007.06.16 |
Overview of the Prototype Javascript Library (1) | 2007.06.08 |
Overview of the Prototype Javascript Library (1) | 2007.06.08 |