HTML4 vs HTML5
마치 K1 에서 둘이 싸워야할 듯... ^^;
이번엔 두 버전 간의 차이점을 살펴보려 한다.
W3C 친절하게도? 두 버전간의 차이점에 대한 문서를 오픈해 놓았다.
http://www.w3.org/TR/2010/WD-html5-diff-20100304/
인데...
"친절하게도" 라고 쓴 이유는 HTML 4 인 경우 HTML 에 대한 GuideLine 아주 간단히 제공했었다고 한다.
솔직히 이 문서만 봐도 HTML 4 와 HTML 5 의 차이는 바로 알 수 있을듯? ^^;
한번 꼭 살펴보시길 (말도 안되는 나의 영어 실력에... 이 아티클의 오류를 위 문서로 채우시길... ㅡㅡ')
소개할 내용은 위 링크를 통해 살펴보게될 내용을 바탕으로 진행을 하도록 하겠다.
위 문서는 두 버전간의 차이점을 크게 세가지로 구분해 놓았다.
1. Syntax (구문)
2. Language (언어)
3. API
이 세가지는 다시 여러 항목으로 나뉘는 데 그 사항들은 후에 다시 자세히? 다룰 예정이니
이 글에서는 간단히 살펴보고 넘어가려한다.
1. Syntax
먼저 간단한 HTML 5 예제를 보자.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 예제</title>
</head> <body>
<!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
<p>안녕하시렵니까? HTML 5?</p>
</body>
</html>
위에서부터 한번 쭈욱 훑어보면 알수 있으리라...
1-1. DOCTYPE
먼저 DOCTYPE 을 볼 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.
위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.
위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.
1-2. Encoding
그 다음 보이는 것이 Charset. 바로 Encoding 에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는
무척이나 간단해진 것을 알 수 있을 것이다.
1-3. SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.
그 다음 보이는 것이 Charset. 바로 Encoding 에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
와는 다르게 <meta charset="UTF-8">
무척이나 간단해진 것을 알 수 있을 것이다.
1-3. SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
흠... 그리고...
Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점...
이 정도면... 될 것 같은데... 또 필요한 사항이 있으면 추후에... ^^;
2. Language
오호~~ 이제 본격적으로 HTML 4 와 HTML 5 간의 특징들을 살펴보겠다.
새로 만들어진 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버린 Element 와 Attribute 등으로 나눠서 알아보자.
2-1. 새롭게 추가된 Element
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.
음... 새로운 엘리먼트는 어떻게 사용할까?
간단히 그림을 그려봤다...
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.
|
|
|
| Header | 문서의 Header 를 나타낼 때 사용한다. |
| Footer | 문서의 Footer 를 나타낼 때 사용한다. |
| Nav | 문서내에 Navigation 요소가 있을 때 사용한다. |
| Section | 문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다. |
| Article | 뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다. |
| Aside | 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다. |
| Hgroup | 각 Section 의 Header 를 나타낼때 사용한다. |
| Figure | 그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다. |
| Figcaption | 캡션에 사용한다. |
음... 새로운 엘리먼트는 어떻게 사용할까?
간단히 그림을 그려봤다...
이러한 새로운 Sementic Element 들로 인해서 기존의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탈바꿈하게 되었다.
또 이런 변화는 우리들에게 Contents 구성에 대한 커다란 숙제를 안겨주고 있다.
이 밖에 몇가지 Element 가 추가되었다.
2-2. 새롭게 추가된 Attribute
새로 추가된 속성들 중에 몇가지만 소개하려 한다.
2-3. 변경된 Element
2-4 변경된 Attribute
아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서만 사용하도록 한다.
2-5. 제거된 Element
없어진 이유를 보면 크게 세가지로 나뉜다.
또 이런 변화는 우리들에게 Contents 구성에 대한 커다란 숙제를 안겨주고 있다.
이 밖에 몇가지 Element 가 추가되었다.
|
|
|
| Audio, Video | HTML 5 Element 중 관심이 집중되는 Element 중 하나다. 멀티미디어 컨텐츠를 표시하는 데 사용한다. |
| Embed | Plugin 컨텐츠를 표시할 때 사용한다. |
| Mark | 별도로 표시한 문자를 표시하는데 사용한다. |
| Progress | 작업 진행상황을 나타낼 때 사용한다. |
| Meter | 측정값을 표시할 때 사용한다. |
| Time | 날짜, 시간을 표시할 때 사용한다. |
| Ruby, rt, rp | Ruby 언어를 나타낼 때 사용한다. |
| Canvas | Bitmap Graphic을 표시할 때 사용한다. |
| Command | 사용자가 호출할 수 있는 명령어를 표시하는데 사용한다. |
| details | 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용한다. |
| Datalist | List Attribute 와 함께 사용하여 ComboBox 를 만들때 사용한다. |
| Keygen | 키쌍(Key pair)을 생성할 때 사용한다. |
| Output | 스크립트 계산 결과 같은 실행결과를 표시하는데 사용한다. |
2-2. 새롭게 추가된 Attribute
새로 추가된 속성들 중에 몇가지만 소개하려 한다.
|
|
|
| contenteditable | 편집가능한 Area 임을 나타낸다. |
| contextmenu | 작성자가 제작한 Context Menu 지정하는데 사용할 수 있다. |
| data-* | 접두사 "data-" 를 가진 속성으로 추후 HTML 버전 충돌없이 사용자 태그로 이용하거나 추후 브라우져가 지원하게 되었을때 사용할 수 있다. |
| draggable | 새로운 Drag & Drop API 에서 사용할 수 있다. |
| hidden | element 가 아직 없거나 없을 때 사용한다. |
| role, aria-* | 보조기능에 가리키는데 사용할 수 있다. |
| spellcheck | 맞춤범 검사기능을 제공할지 여부를 지정한다. |
2-3. 변경된 Element
|
|
|
| a | href 속성이 없이 사용하면 "placeholder link" 를 나타낸다. |
| address | sectioning 의 새로운 개념으로 범위를 나타낸다. 어떤 Contents 부분관 관련된 연락처 정보인지 알 수 있다. |
| b | 문자열 강조 뿐만이 아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지는 않으나 일반적으로 강조하기 위해 사용한다. |
| hr | 단락 수준의 주제 바꿈에 사용한다. |
| i | 기존 기능처럼 문자의 기울임 뿐만이 아니라 음성, 분위기, 분류명, 기술용어, 다른언어의 숙어구, 생각, 선박명 등을 표현할 때 사용한다. |
| label | 기본 플랫폼 User interface 표준이 아닐 경우 Label 에서 Control로 Focus 를 이동시키면 안된다. |
| menu | 툴바와 Context Menu 용으로 사용한다. |
| small | 세부 주석과 법적 인쇄물 같은 작은 인쇄를 나타낼때 사용한다. |
| strong | 기존 Strong 의 기능보다 더 중요한 것을 표시할때 사용한다. |
2-4 변경된 Attribute
아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서만 사용하도록 한다.
|
|
|
| img 의 border | border 값은 0 일때만 사용하고 CSS 를 사용할 수 있다. |
| a 의 name | name 속성을 id 속성으로 바꾸어 쓸 수있다. |
| table 의 summary | 다른 대안을 정의하고 있다. |
| script 의 language | language 값은 JavaScript 에만 사용하고 type 속성과 함께 쓰지 않고 생략할 수있다. |
2-5. 제거된 Element
없어진 이유를 보면 크게 세가지로 나뉜다.
1. CSS 로 처리할 수 있는 Element
2. Frame 관련 Element
3. 거의 사용되지 않는 Element
2. Frame 관련 Element
3. 거의 사용되지 않는 Element
2-5-1. CSS로 처리할 수 있는 Element
다음 Element 는 순전히 보여지는 것에만 사용되는 Element 들이다.
basefont, big, center, font, s, strike, tt, u
2-5-2. Frame 관련 Element
다음 Element 는 Frame 과 관련된 Element로 이들 Element 의 사용은 사용성과 접근성에 부정적인 영향을 끼치 때문이다.
frame, frameset, noframes
2-5-3. 거의 사용되지 않는 Element
다음 Element 는 자주 사용되지 않고, 혼란스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문이다.
acronym, applet, isindex, dir
다음 Element 는 순전히 보여지는 것에만 사용되는 Element 들이다.
basefont, big, center, font, s, strike, tt, u
2-5-2. Frame 관련 Element
다음 Element 는 Frame 과 관련된 Element로 이들 Element 의 사용은 사용성과 접근성에 부정적인 영향을 끼치 때문이다.
frame, frameset, noframes
2-5-3. 거의 사용되지 않는 Element
다음 Element 는 자주 사용되지 않고, 혼란스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문이다.
acronym, applet, isindex, dir
2-6. 제거된 Attribute
나열하기에 많아서 좀 애매하다...
http://www.w3.org/TR/2010/WD-html5-diff-20100304/#absent-attributes
문서에서 3.6 Absent Attributes 를 참고 하시길...
3. API
이젠 새로 사용할 수 있게된 API 들을 설명하려 한다.
Video/Audio API : Video, Audio Element 와 함께 Video, Audio 를 재생하는데 사용수 있다.
Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API
새로운 Grobal Attribute 인 "Contenteditable" Attribute 와 함께 사용하는 편집 API
"draggable" Attribute 와 함께 사용하는 Drag & Drop API
Navigation 시 사용하는 History 정보를 노출하는 API
Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API
새로운 Grobal Attribute 인 "Contenteditable" Attribute 와 함께 사용하는 편집 API
"draggable" Attribute 와 함께 사용하는 Drag & Drop API
Navigation 시 사용하는 History 정보를 노출하는 API
그리고 그 사항들은 아래와 같은 사항들을 확장하였다..
3-1 HTMLDocumnet 확장사항들
DOM Level2 HTML 의 HTMLDocument interface 를 확장했다.
getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다.
innerHTML : HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
getSelection() : 현재 선택되어있는 Object 를 반환한다.
3-2 HTMLElenemt 확장사항들
HTML 5 의 HTMLElement interface 는 몇가지 확장사항들이 있다.
getElementsByClassName()
innerHTML :
classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다.
a, area, link Element 는 relList 라는 유사한 Attribute 를 가지고 있으며 rel Attribute에 같은 기능을 제공한다.
DOM Level2 HTML 의 HTMLDocument interface 를 확장했다.
getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다.
innerHTML : HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
getSelection() : 현재 선택되어있는 Object 를 반환한다.
3-2 HTMLElenemt 확장사항들
HTML 5 의 HTMLElement interface 는 몇가지 확장사항들이 있다.
getElementsByClassName()
innerHTML :
classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다.
a, area, link Element 는 relList 라는 유사한 Attribute 를 가지고 있으며 rel Attribute에 같은 기능을 제공한다.
훔... HTML 4와 HTML 5 간의 차이점에 대한 어느정도 필요한 정보들을 간단히 나열해 보았다.
4. HTML 5 작성 Tip
4-1. 이전 Browser 에서 새로운 요소들 사용.
HTML 5 에서 사용하는 Tag 들은 이전 버전의 브라우져에서는 지원하지 않는다.
하지만 이전 Browser 에게 약간의 편법을 쓰면 HTML 5 Tag 들을 지원하는 것처럼 하게 할 수 있다.
HTML 5 에서 사용하는 Tag 들은 이전 버전의 브라우져에서는 지원하지 않는다.
하지만 이전 Browser 에게 약간의 편법을 쓰면 HTML 5 Tag 들을 지원하는 것처럼 하게 할 수 있다.
아래 Javascript 를 추가해보자.
<script type="text/javascript">
document.createElement('address');
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('menu);
document.createElement('nav');
document.createElement('section ');
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('menu);
document.createElement('nav');
document.createElement('section ');
</script>
그리고 아래 구문을 CSS 에 추가에 추가한다.
이로써 아래 Tag 들에 대해서 Block 요소로 인식하게 해준다.
address, article, aside, figure, footer, header, hgroup, menu, nav, section { display:block;}
4-2. 사용하는 Browser 의 HTML 5 기능 지원여부 확인
현재 사용하는 Browser 에 HTML 5 기능이 적용되어 있는지 알아보기 위해서 다음 페이지를 통해서 확인 하기 바란다.
http://a.deveria.com/caniuse/
현재 브라우져가 특정 기능을 지원하는지 Code 상에서 확인하기위해 필요한 Script 라이브러리가 있다.
그 것은 Modernizr (http://www.modernizr.com) 이다.
아래내용은 간단히 GeoLocation 기능을 지원하는 지를 확인하는 JavaScript 코드이다.
if (Modernizr.geolocation){
navigator.geolocation.getCurrentPosition(function(position) {
// pass the lat and long values to an application
// e.g. a setUserLatandLong() function may find the closest bodega
setUserLatandLong(position.coords.latitude,position.coords.longitude);
});
}
navigator.geolocation.getCurrentPosition(function(position) {
// pass the lat and long values to an application
// e.g. a setUserLatandLong() function may find the closest bodega
setUserLatandLong(position.coords.latitude,position.coords.longitude);
});
}
(참고 : http://www.modernizr.com)
이와 같이 HTML 5 JavaScript API 기능의 지원 여부를 손쉽게 확인할 수 있도록 도와준다.
4-3. 구문 검증
다음은 우리가 작성한 HTML 문서를 검증하기 위한 Site 를 소개한다.
http://validator.w3.org
http://html5.validator.nu
http://gsnedders.html5.org/outliner/ (이 Site는 Contents Model 에 기반을 두어 작성한 HTML 5문서의 Outline 을 검증합니다. )
다음은 우리가 작성한 HTML 문서를 검증하기 위한 Site 를 소개한다.
http://validator.w3.org
http://html5.validator.nu
http://gsnedders.html5.org/outliner/ (이 Site는 Contents Model 에 기반을 두어 작성한 HTML 5문서의 Outline 을 검증합니다. )
음... 두편의 Article 을 통해 이전 버전의 HTML과 HTML 5 와의 차이점과 변경된 사항들을 간단히 살펴보았다.
지금까지 나열된 사항들은 추후 이어질 아티클에서 다시 조금더 자세한? 내용들로 언급이 될 것이다. (훔... 왠지 모르게 서둘러 마무리하는 것 같은 생각이 드네... 추가할 사항들이 생기면 계속 업데이트하겠다. 느낌 희안허네... ㅡㅡ')
행복한 고수되셔요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
지금까지 나열된 사항들은 추후 이어질 아티클에서 다시 조금더 자세한? 내용들로 언급이 될 것이다. (훔... 왠지 모르게 서둘러 마무리하는 것 같은 생각이 드네... 추가할 사항들이 생기면 계속 업데이트하겠다. 느낌 희안허네... ㅡㅡ')
행복한 고수되셔요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'Web > HTML 5' 카테고리의 다른 글
| [HTML 5] 4. Sementic Element (1) (0) | 2011.05.29 |
|---|---|
| [HTML 5] 2. HTML4 vs HTML5 (1) (0) | 2011.05.14 |
| [HTML 5] 1. HTML 5 의 개요 (2) | 2011.05.09 |
| [HTML 5] HTML 5 is... (2) (2) | 2011.05.08 |
| [HTML 5] HTML 5 is ... (0) | 2011.05.04 |
