Latest revision as of 01:40, 27 March 2026

HTML5 개요

자바스크립트 + CSS + HTML의 통합개념
기존의 HTML : 문서를 위한 플랫폼, HTML5 : 웹 어플리케이션을 위한 플랫폼

HTML5 범위

HTML + XHTML + 요소 + 요건 + 관련 API
HTML+CSS+JavaScript

달라진점

풍부한 웹 어플리케이션 기능 : 웹 어플리케이션의 표현력 증가
동영상/음성
2D 그래픽 처리
오프라인에서 구동가능
도메인간의 통신기능
클라이언트축 데이터 저장
백그라운드 처리 수행
서버로부터의 데이터 푸시
서버와의 쌍방향 통신수행
로컬파일 읽기
etc. MathML, SVG등 외부 마크업언어 HTML에 직접 삽입가능 (책 범위 밖)

기존 HTML4.- : HTML과 XHTML은 별개의 사양
HTML5 : HTML과 XHTML은 표현되는 문법의 차이, HTML5는 DOM에 따라 표시됨

시맨틱한 마크업
기존 HTML문의 애매모호한 문법 개선
- <head> <footer> <section> 추가
프로그램이 문서의 구조를 파악하기 쉬워짐(HTML 파싱 수월), 가독성 증가
- selection : 범용적인 셀렉션
- aticle : 섹션의 한종류, 페이지에서 독립되어있는 부분 (ex. 블로그웹의 블로그 본문)
- nav : 사이트 전체 or 내비게이션 메뉴
- aside : 섹션 내용과 관련되어있지만 없어도 상관없는 부분(ex. 문서 내용 요약)
- header : 섹션 헤더
- footer : 섹션의 푸터
- address : 섹션에 관한 문의처 정보(ex. 회사 전화번호등)
- time : 날짜, 시작을 나타냄
- 마이크로 데이터 : 문서에 삽입된 데이터의 속성 데이터(데이터의 데이터, 데이터의 의미가 명확해짐)

더 높은 접근성
휴먼 인터페이스에 가까워질수있음

더 높은 호환성
버전간 호환성
- 전방호환성 - HTML5을 적용하기 이전의 브라우저에서도 HTML5사용가능(웹브라우저의 fall back 적용)
- fall back : 모르는 부분은 무시하는 웹 브라우저의 특성
- 후방호환성 - HTML5을 적용한 브라우저에서 HTML5 이전 버전 문서 표시가능
브라우저간 호환성
- 표준만 따른다면 어떤 브라우저에서도 똑같이 작동한다
- 이미 사용되고 있는 내용에서 사양을 추출한다

역사

HTML의 목적 : 1998년 W3C는 html이 아닌 XHTML의 표준 사용을 권고한다. 그러나 XHTML은 HTML과의 비호환성으로 널리 퍼지지 못한다.
결과적으로 10년이상 사용되는 HTML의 저사양이 오히려 웹 어플리케이션의 발전을 저해했다. 그러나 W3C는 XHTML을 위해 새로운 HTML의 개발을 거절한다.
그러자 apple, mozillar, opera 세 기업이 모여 WHATWG를 발족하고 HTML의 진화를 지향한다.(apple은 플래시를 제공하는 어도비와 관계가 좋지않아 HTML5를 적극적으로 추진한다는 소문이다)
현재 HTML5는 W3C에 LAST CALL(최종 심사 초안)이 제출된 상태이다. 또한 W3C가 진행하던 XHTML2의 사양 제정이 중지로 HTML5의 표준화는 기정 사실로 보인다.

@@ Line 1: / Line 1: @@
+<!-- MONIWIKI PageList(^html5) -->
+* [[html5]]
+* [[html5/VA]]
+* [[html5/canvas]]
+* [[html5/communicationAPI]]
+* [[html5/drag-and-drop]]
+* [[html5/form]]
+* [[html5/geolocation]]
+* [[html5/offline-web-application]]
+* [[html5/others-api]]
+* [[html5/outline]]
+* [[html5/overview]]
+* [[html5/richtext-edit]]
+* [[html5/section]]
+* [[html5/video&audio]]
+* [[html5/web-storage]]
+* [[html5/web-workers]]
+* [[html5/webSqlDatabase]]
+* [[html5/websocket]]
+* [[html5/문제점]]
+* [[html5practice]]
+* [[html5practice/roundRect]]
+* [[html5practice/계층형자료구조그리기]]
+* [[html5practice/즐겨찾기목록만들기]]
+__TOC__
 = HTML5 개요 =
 * 자바스크립트 + CSS + HTML의 통합개념
@@ Line 20: / Line 45: @@
 * etc. MathML, SVG등 외부 마크업언어 HTML에 직접 삽입가능 (책 범위 밖)
-= 시맨틱한 마크업 =
+* 기존 HTML4.- : HTML과 XHTML은 별개의 사양
+* HTML5 : HTML과 XHTML은 표현되는 문법의 차이, HTML5는 DOM에 따라 표시됨
+* 시맨틱한 마크업
 * 기존 HTML문의 애매모호한 문법 개선
-* &lt;head&gt; &lt;footer&gt; &lt;section&gt; 추가
+** <head> <footer> <section> 추가
 * 프로그램이 문서의 구조를 파악하기 쉬워짐(HTML 파싱 수월), 가독성 증가
-* selection : 범용적인 셀렉션
+** selection : 범용적인 셀렉션
-* aticle : 섹션의 한종류, 페이지에서 독립되어있는 부분 (ex. 블로그웹의 블로그 본문)
+** aticle : 섹션의 한종류, 페이지에서 독립되어있는 부분 (ex. 블로그웹의 블로그 본문)
-* nav : 사이트 전체 or 내비게이션 메뉴
+** nav : 사이트 전체 or 내비게이션 메뉴
-* aside : 섹션 내용과 관련되어있지만 없어도 상관없는 부분(ex. 문서 내용 요약)
+** aside : 섹션 내용과 관련되어있지만 없어도 상관없는 부분(ex. 문서 내용 요약)
-* header : 섹션 헤더
+** header : 섹션 헤더
-* footer : 섹션의 푸터
+** footer : 섹션의 푸터
-* address : 섹션에 관한 문의처 정보(ex. 회사 전화번호등)
+** address : 섹션에 관한 문의처 정보(ex. 회사 전화번호등)
-* time : 날짜, 시작을 나타냄
+** time : 날짜, 시작을 나타냄
-* 마이크로 데이터 : 문서에 삽입된 데이터의 속성 데이터(데이터의 데이터, 데이터의 의미가 명확해짐)
+** 마이크로 데이터 : 문서에 삽입된 데이터의 속성 데이터(데이터의 데이터, 데이터의 의미가 명확해짐)
+* 더 높은 접근성
+* 휴먼 인터페이스에 가까워질수있음
+* 더 높은 호환성
+* 버전간 호환성
+** 전방호환성 - HTML5을 적용하기 이전의 브라우저에서도 HTML5사용가능(웹브라우저의 fall back 적용)
+** fall back : 모르는 부분은 무시하는 웹 브라우저의 특성
+** 후방호환성 - HTML5을 적용한 브라우저에서 HTML5 이전 버전 문서 표시가능
+* 브라우저간 호환성
+** 표준만 따른다면 어떤 브라우저에서도 똑같이 작동한다
+** 이미 사용되고 있는 내용에서 사양을 추출한다
+= 역사 =
+* HTML의 목적 : 1998년 W3C는 html이 아닌 XHTML의 표준 사용을 권고한다. 그러나 XHTML은 HTML과의 비호환성으로 널리 퍼지지 못한다.
+* 결과적으로 10년이상 사용되는 HTML의 저사양이 오히려 웹 어플리케이션의 발전을 저해했다. 그러나 W3C는 XHTML을 위해 새로운 HTML의 개발을 거절한다.
+* 그러자 apple, mozillar, opera 세 기업이 모여 WHATWG를 발족하고 HTML의 진화를 지향한다.(apple은 플래시를 제공하는 어도비와 관계가 좋지않아 HTML5를 적극적으로 추진한다는 소문이다)
+* 현재 HTML5는 W3C에 LAST CALL(최종 심사 초안)이 제출된 상태이다. 또한 W3C가 진행하던 XHTML2의 사양 제정이 중지로 HTML5의 표준화는 기정 사실로 보인다.