HTML5 표준 소개

HTML5 Standard
Sigong Media &
KAIST 소프트웨어 대학원
김평화 20113833
2012-04-04

HTML5 Standard
Table of contents

• Overview
– HTML5 ?
– History
– Characteristics
– Composition

• Renewed Points
– Markup
– Javascript API
– CSS3

• Architecture
• References

-1-

HTML5 Standard
Overview
• HTML5 ?
– New standard of WWW core markup language
– Reducing Plug-in dependence and supporting desktop experience through web

– Previous Standard
⇒ HTML 4.01
⇒ XHTML 1.0
⇒ DOM Level 2 HTML

-2-

Overview
History
• History of HTML
– 1991, HTML
– 1994, HTML2
– 1996, CSS1, Javascript
– 1997, HTML4
– 1998, CSS2
– 2000, XHTML1

– 2004, 새로운 HTML 표준 착수 (W3C)
– 2005, W3C vs. Browser companies
⇒ WHATWG(Web Hypertext Application Technology Working Group) 민간 기구로 독립
– 2007, 다시 병합
⇒ 다섯 개의 주요 브라우저 회사 모두 참여
– 2008, First public working draft
– 2009, Last call for HTML5 working draft
– 2012, CR(Candidate Recommendation) 예정
– 2022, PR(Proposed Recommendation) 예정
– ? , REC(Recommendation)

-3-

Overview
Characteristics

• REALTIME / COMMUNICATION • OFFLINE / STORAGE

• FILE / HARDWARE ACCESS • BOLTS & NUTS

• CSS3 STYLING • MULTIMEDIA

• 3D GRAPHICS / EFFECTS • SEMANTICS

-4-

Overview
Composition

= Markup + Javascript API + CSS3

-5-

HTML5 Standard
Renewed Points
• Markup
– Downward Compatibility
– Simplification
– Content Model
– Semantics
– Graphics / Multimedia
– Form Control
– Interactive

• Javascript API
• CSS3

-6-

Renewed Points
Markup
• Downward Compatibility
– 현재 브라우저의 작동 방식 또는 개발 상황을 수용
⇒ cf. XHTML 2.0

• Simplification
– HTML5 DTD
⇒ <!DOCTYPE html>
– Character set
⇒ Encoding priority
1. HTTP header
2. Unicode BOM(Byte Order Mark)
3. Meta element
⇒ <meta charset=“UTF-8”>
– style, script의 default type

-7-

Renewed Points
Markup
• Contents Model
– Flow : Most of
– Heading : hgroup, h1, …
– Sectioning : article, aside, …
– Embedded : video, canvas, …
– Phrasing : br, time, …
– Interactive : button, details, …
– Metadata : command, meta, …
– Palpable : header, footer, …

-8-

Renewed Points
Markup
• Semantics Markup
– Structural Elements
⇒ nav, article, section, aside, header, footer
(과거 : div, span, id, calss)
⇒ hgroup, h1~h6
– Descriptive link relations
– Microdata, RDFa

-9-

Renewed Points
Markup
• Graphics & Multimedia Markup
– embed, audio, video
⇒ ogg/theora vs. WebM vs. H.264
⇒ source 태그의 다중 선언
– canvas : Bitmap
– svg : Vector
– webgl : 3D

- 10 -

Renewed Points
Markup
• Form Control Markup
– input
⇒ Various types
⇒ autofocus, placeholder, required, etc.
– No server connection
⇒ Error checking
⇒ Event generating

- 11 -

Renewed Points
Markup
• Interactive Markup
– progress, meter
– datalist
– details, summary

- 12 -

HTML5 Standard
Renewed Points
• Markup
• Javascript API
– Offline / Storage
– Realtime / Communication
– File / Hardware Access
– Nuts & Bolts

• CSS3

- 13 -

Renewed Points
Javascript API
• Offline / Storage
– Web Storage
⇒ LocalStorage, SessionStorage
– Web SQL Database
– IndexedDB

– Application Cache

- 14 -

Renewed Points
Javascript API
• Realtime / Communication
– Web Workers
– WebSocket
⇒ HTTP의 한계
– Notifications

- 15 -

Renewed Points
Javascript API
• File / Hardware Access
– Native Drag & Drop
– Desktop Drag-In/Out (File API)
– FileSystem APIs
⇒ Sandboxed file system

– Geolocation
– Device Orientation
– Speech Input

- 16 -

Renewed Points
Javascript API
• Nuts & Bolts
– New Selectors
⇒ Finding elements by class (DOM)
⇒ Finding elements by CSS syntax
– Custom data-* attributes
⇒ Define, store, and retrieve custom data on the DOM
– Element.classList
⇒ document.querySelector('#main').classList;
– History API
⇒ Remember event states from users

- 17 -

HTML5 Standard
Renewed Points
• Markup
• Javascript API
• CSS3

- 18 -

Renewed Points
CSS3
• Programming-liked factors
• Webfonts
• Various Effects & Animations
– http://slides.html5rocks.com/#css3-title

- 19 -

HTML5 Standard
Web Standard
• HTML5 W/G • Web Applications W/G
– HTML5 – Server-sent Events
– Canvas 2D – Web Socket
– Microdata – Web Storage
– RDFa – Web SQL DB
– App-Cache – Indexed DB
– Geo-location

- 20 -

HTML5 Standard
Architecture
• 기존

- 21 -

HTML5 Standard
Architecture
• HTML5-based

- 22 -

HTML5 Standard
References
• Standard Documents
– http://www.w3.org/TR/html5/ : HTML5 Working draft by W3C
– http://www.w3.org/TR/html5-author/ : HTML5 Working draft for web developers by W3C
– http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html : HTML
Living Standard by WHATWG

• Resources & Learning
– http://www.html5rocks.com/en/ : HTML5 Resources by Google
– http://hacks.mozilla.or.kr/ : HTML5 Resources by Mozilla hacks
– http://webstandards.or.kr/html5 : HTML5 Resources by Web Standards Korea

– http://slides.html5rocks.com/ : HTML5 Presentation by Google
– http://html5demos.com/ : HTML5 Demo and Examples
– http://www.w3schools.com/ : Web Tutorials

- 23 -

HTML5 Standard
References
• Showcases
– http://html5gallery.com/ : HTML5 Set of showcase
– http://www.apple.com/html5/ : Showcase by Apple
– http://ie.microsoft.com/testdrive/ : IE10 Showcase by Microsoft

• Tests & Accessibility
– http://www.findmebyip.com/litmus/ : Browser support
– http://html5accessibility.com/ : Browser accessibility (Assistive technology based)
– http://html5test.com/ : Current browser scores and check lists
– http://rng.io/ : Current mobile bowser test (Ringmark)

• CSS3 Design Tools
– http://www.sencha.com/products/animator/ : Sencha Animator
– http://labs.adobe.com/technologies/edge/ : Adobe Edge Preview

- 24 -

HTML5 표준 소개

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Similar a HTML5 표준 소개

Similar a HTML5 표준 소개 (20)

Más de Chris

Más de Chris (20)

Último

Último (20)

HTML5 표준 소개