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 표준 소개

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Ähnlich wie HTML5 표준 소개

Ähnlich wie HTML5 표준 소개 (20)

Mehr von Chris

Mehr von Chris (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5 표준 소개