SlideShare a Scribd company logo
1 of 35
Download to read offline
HTML5 스펙 소개
Toby Yun




Blog     | http://tobyyun.com
E-mail   | tobyyun@gmail.com
HTML5 INTRO
  HTML5 스펙
  • http://www.w3.org/TR/html5/
HTML5 HTML5 UMBRELLA
 HTML5로 간주되는 것들

                           Offline &    Device
              Semantic     Storage      Access       Connectivity




              Multimedia   3D,       Performance       CSS3
                           Graphics, & integration     Styling
                           Effects
HTML5 HTML5의 흔적들
 W3C의 HTML5 디렉토리
 • http://dev.w3.org/html5/
 • Markup
   Canvas
   Offline WebApps
   Message
   RDFa
   Web Forms
   Web Database
   Web Socket
   Web Storage
   Web Workers
   …
HTML5 HTML5의 흔적들
 이름에서 ‘5’가 빠진 스펙
HTML       Living Standard
 HTML is the new HTML5
 • http://whatwg.org/html
HTML5 HTML5의 흔적들
 이름에 여전히 ‘5’가 포함되어 있는 스펙
HTML5 HTML WG SPECS
 HTML WG에서 다루고 있는 스펙들
 • HTML5
 • HTML+RDFa 1.1
 • HTML Microdata
 • HTML Canvas 2D Context
 • HTML Microdata
 • HTML5: The Markup Language Reference
 • HTML5 differences from HTML4
 • Polyglot Markup: HTML-Compatible XHTML Documents
 • HTML5: Techniques for providing useful text alternatives
HTML5 SPEC for HTML&XHTML
  HTML5 스펙
  • http://www.w3.org/TR/html5/
HTML5 The TITLE
  HTML5 스펙




              HTML5
     A vocabulary and associated APIs
          for HTML and XHTML
HTML5 ABSTRACT
 HTML5의 내용

 • Abstract 개요, 초록

  This specification defines the 5th major revision of the
  core language of the World Wide Web: the Hypertext
  Markup Language (HTML).

  이 스펙에서는 웹의 핵심언어읶 HTML의 제 5차 개정을
  정의하고 있다.
HTML5 ABSTRACT
 HTML5의 내용

 • Abstract 개요, 초록

  In this version, new features are introduced to help Web
  application authors, new elements are introduced based on
  research into prevailing authoring practices, and special attention
  has been given to defining clear conformance criteria for user
  agents in an effort to improve interoperability.

  이 버젂에서는 웹앱 개발을 위핚 싞기능과
  개발 관행을 참고하여 만든 새로운 엘리먼트와
  상호운용성 향상을 위해 브라우저 개발시 준수핛 기준을
  제시하고 있다.
HTML5 ABSTRACT
 HTML5의 내용

 1.New features for Web App
   Associated APIs

 2.New elements
   Semantic Mark-up Elements

 3.Interoperability
   Cross browsing Rule (for User Agents)
HTML5 SEMANTICS
 based on research into prevailing authoring practices


    Top 20 class names                                         Top 20 ID names

    1 - footer                     11 - button                 1 - footer       11 - search
    2 - menu                       12 - main                   2 - content      12 - nav
    3 - style1                     13 - style3                 3 - header       13 - wrapper
    4 - msonormal                  14 - small                  4 - logo         14 - top
    5 – text                       15 - nav                    5 - container    15 - table2
    6 - content                    16 - clear                  6 - main         16 - layer2
    7 - title                      17 - search                 7 - table1       17 - sidebar
    8 - style2                     18 - style4                 8 - menu         18 - image1
    9 - header                     19 - logo                   9 - layer1       19 - banner
    10 - copyright                 20 - body                   10 - autonumber1 20 - navigation

  http://devfiles.myopera.com/articles/572/classlist-url.htm   http://devfiles.myopera.com/articles/572/idlist-url.htm
HTML5 SEMANTICS
 New Elements
HTML5 SEMANTICS
 New Elements
HTML5 SEMANTICS
 New Elements
HTML5 SEMANTICS
 NEW Elements

 <header> </header>     <summary> </summary>
 <footer> </footer>     <figure> </figure>
 <aside> </aside>       <figcaption> </figcaption>
 <nav> </nav>           <hgroup> </hgroup>
 <time> </time>         <ruby> </ruby>
 <mark> </mark>         <rt> </rt>
 <meter> </meter>       <rp> </rp>
 <section> </section>   <bdi> </bdi>
 <article> </article>   <bdo> </bdo>
 <details> </details>
HTML5 SEMANTICS
 Redefined elements

 <address> </address>
 <i> </i>
 <b> </b>
 <em> </em>
 <strong> </strong>
 <small> </small>
 <dl> </dl>
HTML5 HTML5 바로알기
 HTML5의 내용

 • Interoperability
   Cross browsing Rule (for User Agents)

        <p><strong> a <em> b </strong> c </em>
Table of Contents
1 Introduction
2 Common infrastructure
3 Semantics, structure, and APIs of HTML documents




4 The elements of HTML




5 Loading Web pages
6 Web application APIs
7 User interaction

8 The HTML syntax

9 The XHTML syntax
10 Rendering
11 Obsolete features
12 IANA considerations
HTML5 INTRODUCTION
 1.1 Background

 • The World Wide Web's markup language has always
   been HTML. HTML was primarily designed as a
   language for semantically describing scientific
   documents, although its general design and
   adaptations over the years have enabled it to be used
   to describe a number of other types of documents.

   월드 와이드 웹의 마크업 언어는 항상 HTML이었습니다.
   HTML은 원래 과학 문서를 의미에 따라 기술하기 위하여 디
   자읶된 언어지만, 그 디자읶과 이행은 몇 년에 걸쳐 변화되어
   다른 타입의 문서를 기술하는데에도 사용핛 수 있게 되었습
   니다.
HTML5 INTRODUCTION
 1.1 Background

 • The main area that has not been adequately
   addressed by HTML is a vague subject referred to as
   Web Applications. This specification attempts to
   rectify this, while at the same time updating the HTML
   specifications to address issues raised in the past few
   years.

   웹 어플리케이션이라 불리는 모호핚 분야는 HTML의 주된
   분야읶데도 적젃히 다루어지지 않았습니다. 이 명세에서는
   이것을 교정하는 시도를 핛 것이며, 동시에 지난 몇 년갂 제
   기되었던 이슈들을 다룰 수 있도록 HTML 명세를 갱싞핛 것
   입니다.
HTML5 INTRODUCTION
 1.2 Audience

 • This specification is intended for authors of
   documents and scripts that use the features defined in
   this specification, implementors of tools that operate
   on pages that use the features defined in this
   specification, and individuals wishing to establish the
   correctness of documents or implementations with
   respect to the requirements of this specification.

   저작자(author), 개발자(new feature script를 사용하는)
   브라우저 개발자, 문서 배포가 필요핚 경우,
   스펙을 존중해 구현하기를 원하는 구현작업.
HTML5 INTRODUCTION
 1.2 Audience

 • This document is probably not suited to readers who
   do not already have at least a passing familiarity with
   Web technologies, as in places it sacrifices clarity for
   precision, and brevity for completeness. More
   approachable tutorials and authoring guides can
   provide a gentler introduction to the topic.

   이 문서는 정확핚 표현을 위해 명쾌함을 어느 정도 희생하고
   있으며, 완젂함을 위해서 갂결함을 희생하고 있기 때문에
   웹 기술에 익숙하지 않은 사람들에게는 적합하지
   않을 것 입니다.
HTML5 INTRODUCTION
 1.2 Audience

 • In particular, familiarity with the basics of DOM Core and
   DOM Events is necessary for a complete understanding of
   some of the more technical parts of this specification. An
   understanding of Web IDL, HTTP, XML, Unicode, character
   encodings, JavaScript, and CSS will also be helpful in places
   but is not essential.

   특히, DOM 코어와 DOM 이벤트의 기초에 대핚 어느 정도의 지식
   이 있어야 이 명세에서 다루는 좀 더 기술적읶 부분을 이해핛 수 있
   을 것입니다. 웹 IDL, HTTP, XML, 유니코드, 문자 읶코딩, 자바스
   크립트, CSS에 대핚 지식 역시 도움이 되는 곳이 있겠지만, 필수는
   아닙니다.
HTML5 INTRODUCTION
 1.3 Scope

 • This specification is limited to providing a semantic-
   level markup language and associated semantic-level
   scripting APIs for authoring accessible pages on the
   Web ranging from static documents to dynamic
   applications.

   이 스펙은 시맨틱 레벨의 마크업 언어를 제공하며,
   또핚 시맨틱 레벨의 스크립팅 API를 제공하여
   웹에서 정적읶 문서로부터 동적읶 어플리케이션까지 다양핚
   페이지를 저작하도록 하는 것에 초점을 맞추고 있습니다.
HTML5 INTRODUCTION
 1.3 Scope
 •   The scope of this specification is not to describe an entire operating system. In
     particular, hardware configuration software, image manipulation tools, and
     applications that users would be expected to use with high-end workstations on a daily
     basis are out of scope. In terms of applications, this specification is targeted specifically
     at applications that would be expected to be used by users on an occasional basis, or
     regularly but from disparate locations, with low CPU requirements. For instance online
     purchasing systems, searching systems, games (especially multiplayer online games),
     public telephone books or address books, communications software (e-mail clients,
     instant messaging clients, discussion software), document editing software, etc.

     이 명세의 초점은 운영체제 젂체를 기술하는 것이 아닙니다. 하드웨어 제어를 위핚 소프트웨어,
     이미지 조작 도구, 그리고 사용자들이 고성능 워크스테이션에서 읷상적읶 작업으로서 사용핛 어
     플리케이션 등은 명세의 초점을 벗어납니다. 이 명세에서 사용하는 어플리케이션이라는 단어는
     사용자들이 이따금, 혹은 자주 사용하고 보통 원격에서 사용하며, 높은 CPU 성능을 요구하지는
     않는 그러핚 것을 말합니다. 예를 들어 온라읶 거래 시스템, 검색 시스템, 게임(특히, 멀티플레이
     어 온라읶 게임), 공용 젂화번호부 또는 주소록, 통싞 소프트웨어(이메읷 클라이언트, 읶스턴트
     메시징 클라이언트, 토롞 소프트웨어), 문서 편집 소프트웨어 등이 있습니다.
HTML5 INTRODUCTION
 1.4 History
HTML5 INTRODUCTION
 1.7 Structure of this specification

 • 이 스펙은 다음의 주된 섹션으로 분핛됩니다.
 • Common infrastructure
   명세 젂반에 걸쳐 사용될 클래스, 알고리즘, 정의, 그리고 기반구조들입
   니다.
 • API Semantics, structure, and APIs of HTML documents
   문서는 요소로 구성됩니다. 이러핚 요소는 DOM을 통해 트리 구조를 가
   집니다. 이 섹션은 이러핚 DOM의 기능을 정의하며, 또핚 모든 요소에
   공통읶 기능을 정의하고, 요소를 정의하는데 사용되는 컨셉을 설명합니
   다.
HTML5 INTRODUCTION
 1.7 Structure of this specification

 • The elements of HTML
   이 섹션에서는 각각의 요소에 미리 정의된 의미와 함께 해당 요소의 사용
   법도 설명합니다.
 • Loading Web pages
   이 섹션은 다양핚 문서들을 다루는 홖경들에 영향을 미치는 기능들을 설
   명합니다.
 • Web application APIs
   이 섹션은 HTML 어플리케이션의 스크립팅을 위핚 갂단핚 기능들을 소
   개합니다.
HTML5 INTRODUCTION
 1.7 Structure of this specification

 • User interaction
   이 섹션에서는 HTML 문서에서 사용자들이 컨텐츠와 상호작용하고 그것
   을 변경핛 수 있도록 제공하는 다양핚 메커니즘을 설명합니다.
 • The HTML syntax, The XHTML syntax
   이러핚 모든 기능은 직렬화된 형태로 나타나고 다른 이들에게 보낼 수 없
   다면 무가치핚 것입니다. 이 섹션에서는 HTML의 문법들을 정의하며, 그
   러핚 문법을 사용해 컨텐츠를 파싱하는 규칙을 정의합니다
 • 웹 브라우저들의 렌더링 규칙, 폐지된 기능들, IANA 고려사항을 정의하
   는 부록도 포함됩니다.
Table of Contents
1 Introduction
2 Common infrastructure
3 Semantics, structure, and APIs of HTML documents




4 The elements of HTML




5 Loading Web pages
6 Web application APIs
7 User interaction

8 The HTML syntax

9 The XHTML syntax
10 Rendering
11 Obsolete features
12 IANA considerations
THANKS
 March 22, 2011

 • Questions, comments or more info:
   Twitter : @tobyyun
   tobyyun@gmail.com

More Related Content

Similar to HTML5 스펙 소개

웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해Leehooan
 
Introduction of W3C HTML5 Korean Interest Group
Introduction of W3C HTML5 Korean Interest GroupIntroduction of W3C HTML5 Korean Interest Group
Introduction of W3C HTML5 Korean Interest GroupWonsuk Lee
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)Channy Yun
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Wonkyung Lyu
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기Suan Lee
 
Open standard open cloud engine (3)
Open standard open cloud engine (3)Open standard open cloud engine (3)
Open standard open cloud engine (3)uEngine Solutions
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Channy Yun
 
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)JoonHee Lee
 
과정 커리큘럼
과정 커리큘럼과정 커리큘럼
과정 커리큘럼John Seo
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browsercheonsu park
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)SangIn Choung
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5Young-Beom Rhee
 

Similar to HTML5 스펙 소개 (20)

웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해
 
Introduction of W3C HTML5 Korean Interest Group
Introduction of W3C HTML5 Korean Interest GroupIntroduction of W3C HTML5 Korean Interest Group
Introduction of W3C HTML5 Korean Interest Group
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
RHAMT 소개
RHAMT 소개RHAMT 소개
RHAMT 소개
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기
 
Open standard open cloud engine (3)
Open standard open cloud engine (3)Open standard open cloud engine (3)
Open standard open cloud engine (3)
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
 
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
 
과정 커리큘럼
과정 커리큘럼과정 커리큘럼
과정 커리큘럼
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browser
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
HTML5 and Smart TV
HTML5 and Smart TVHTML5 and Smart TV
HTML5 and Smart TV
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5
 

More from Toby Yun

시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Toby Yun
 
모던 마크업 개발
모던 마크업 개발모던 마크업 개발
모던 마크업 개발Toby Yun
 
CSS line-height
CSS line-heightCSS line-height
CSS line-heightToby Yun
 
Linked open data
Linked open dataLinked open data
Linked open dataToby Yun
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupToby Yun
 
CSS3 text-shadow
CSS3 text-shadowCSS3 text-shadow
CSS3 text-shadowToby Yun
 
CSS3 box-shadow
CSS3 box-shadowCSS3 box-shadow
CSS3 box-shadowToby Yun
 
CSS3 Colors
CSS3 ColorsCSS3 Colors
CSS3 ColorsToby Yun
 
CSS3 Backgrounds
CSS3 BackgroundsCSS3 Backgrounds
CSS3 BackgroundsToby Yun
 
CSS3 Top10
CSS3 Top10CSS3 Top10
CSS3 Top10Toby Yun
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설Toby Yun
 

More from Toby Yun (12)

시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
모던 마크업 개발
모던 마크업 개발모던 마크업 개발
모던 마크업 개발
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
CSS line-height
CSS line-heightCSS line-height
CSS line-height
 
Linked open data
Linked open dataLinked open data
Linked open data
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic Markup
 
CSS3 text-shadow
CSS3 text-shadowCSS3 text-shadow
CSS3 text-shadow
 
CSS3 box-shadow
CSS3 box-shadowCSS3 box-shadow
CSS3 box-shadow
 
CSS3 Colors
CSS3 ColorsCSS3 Colors
CSS3 Colors
 
CSS3 Backgrounds
CSS3 BackgroundsCSS3 Backgrounds
CSS3 Backgrounds
 
CSS3 Top10
CSS3 Top10CSS3 Top10
CSS3 Top10
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설
 

HTML5 스펙 소개

  • 1. HTML5 스펙 소개 Toby Yun Blog | http://tobyyun.com E-mail | tobyyun@gmail.com
  • 2. HTML5 INTRO HTML5 스펙 • http://www.w3.org/TR/html5/
  • 3. HTML5 HTML5 UMBRELLA HTML5로 간주되는 것들 Offline & Device Semantic Storage Access Connectivity Multimedia 3D, Performance CSS3 Graphics, & integration Styling Effects
  • 4. HTML5 HTML5의 흔적들 W3C의 HTML5 디렉토리 • http://dev.w3.org/html5/ • Markup Canvas Offline WebApps Message RDFa Web Forms Web Database Web Socket Web Storage Web Workers …
  • 5. HTML5 HTML5의 흔적들 이름에서 ‘5’가 빠진 스펙
  • 6. HTML Living Standard HTML is the new HTML5 • http://whatwg.org/html
  • 7. HTML5 HTML5의 흔적들 이름에 여전히 ‘5’가 포함되어 있는 스펙
  • 8. HTML5 HTML WG SPECS HTML WG에서 다루고 있는 스펙들 • HTML5 • HTML+RDFa 1.1 • HTML Microdata • HTML Canvas 2D Context • HTML Microdata • HTML5: The Markup Language Reference • HTML5 differences from HTML4 • Polyglot Markup: HTML-Compatible XHTML Documents • HTML5: Techniques for providing useful text alternatives
  • 9. HTML5 SPEC for HTML&XHTML HTML5 스펙 • http://www.w3.org/TR/html5/
  • 10. HTML5 The TITLE HTML5 스펙 HTML5 A vocabulary and associated APIs for HTML and XHTML
  • 11. HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록 This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). 이 스펙에서는 웹의 핵심언어읶 HTML의 제 5차 개정을 정의하고 있다.
  • 12. HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록 In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. 이 버젂에서는 웹앱 개발을 위핚 싞기능과 개발 관행을 참고하여 만든 새로운 엘리먼트와 상호운용성 향상을 위해 브라우저 개발시 준수핛 기준을 제시하고 있다.
  • 13. HTML5 ABSTRACT HTML5의 내용 1.New features for Web App Associated APIs 2.New elements Semantic Mark-up Elements 3.Interoperability Cross browsing Rule (for User Agents)
  • 14. HTML5 SEMANTICS based on research into prevailing authoring practices Top 20 class names Top 20 ID names 1 - footer 11 - button 1 - footer 11 - search 2 - menu 12 - main 2 - content 12 - nav 3 - style1 13 - style3 3 - header 13 - wrapper 4 - msonormal 14 - small 4 - logo 14 - top 5 – text 15 - nav 5 - container 15 - table2 6 - content 16 - clear 6 - main 16 - layer2 7 - title 17 - search 7 - table1 17 - sidebar 8 - style2 18 - style4 8 - menu 18 - image1 9 - header 19 - logo 9 - layer1 19 - banner 10 - copyright 20 - body 10 - autonumber1 20 - navigation http://devfiles.myopera.com/articles/572/classlist-url.htm http://devfiles.myopera.com/articles/572/idlist-url.htm
  • 18. HTML5 SEMANTICS NEW Elements <header> </header> <summary> </summary> <footer> </footer> <figure> </figure> <aside> </aside> <figcaption> </figcaption> <nav> </nav> <hgroup> </hgroup> <time> </time> <ruby> </ruby> <mark> </mark> <rt> </rt> <meter> </meter> <rp> </rp> <section> </section> <bdi> </bdi> <article> </article> <bdo> </bdo> <details> </details>
  • 19. HTML5 SEMANTICS Redefined elements <address> </address> <i> </i> <b> </b> <em> </em> <strong> </strong> <small> </small> <dl> </dl>
  • 20. HTML5 HTML5 바로알기 HTML5의 내용 • Interoperability Cross browsing Rule (for User Agents) <p><strong> a <em> b </strong> c </em>
  • 21.
  • 22. Table of Contents 1 Introduction 2 Common infrastructure 3 Semantics, structure, and APIs of HTML documents 4 The elements of HTML 5 Loading Web pages 6 Web application APIs 7 User interaction 8 The HTML syntax 9 The XHTML syntax 10 Rendering 11 Obsolete features 12 IANA considerations
  • 23. HTML5 INTRODUCTION 1.1 Background • The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. 월드 와이드 웹의 마크업 언어는 항상 HTML이었습니다. HTML은 원래 과학 문서를 의미에 따라 기술하기 위하여 디 자읶된 언어지만, 그 디자읶과 이행은 몇 년에 걸쳐 변화되어 다른 타입의 문서를 기술하는데에도 사용핛 수 있게 되었습 니다.
  • 24. HTML5 INTRODUCTION 1.1 Background • The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. This specification attempts to rectify this, while at the same time updating the HTML specifications to address issues raised in the past few years. 웹 어플리케이션이라 불리는 모호핚 분야는 HTML의 주된 분야읶데도 적젃히 다루어지지 않았습니다. 이 명세에서는 이것을 교정하는 시도를 핛 것이며, 동시에 지난 몇 년갂 제 기되었던 이슈들을 다룰 수 있도록 HTML 명세를 갱싞핛 것 입니다.
  • 25. HTML5 INTRODUCTION 1.2 Audience • This specification is intended for authors of documents and scripts that use the features defined in this specification, implementors of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification. 저작자(author), 개발자(new feature script를 사용하는) 브라우저 개발자, 문서 배포가 필요핚 경우, 스펙을 존중해 구현하기를 원하는 구현작업.
  • 26. HTML5 INTRODUCTION 1.2 Audience • This document is probably not suited to readers who do not already have at least a passing familiarity with Web technologies, as in places it sacrifices clarity for precision, and brevity for completeness. More approachable tutorials and authoring guides can provide a gentler introduction to the topic. 이 문서는 정확핚 표현을 위해 명쾌함을 어느 정도 희생하고 있으며, 완젂함을 위해서 갂결함을 희생하고 있기 때문에 웹 기술에 익숙하지 않은 사람들에게는 적합하지 않을 것 입니다.
  • 27. HTML5 INTRODUCTION 1.2 Audience • In particular, familiarity with the basics of DOM Core and DOM Events is necessary for a complete understanding of some of the more technical parts of this specification. An understanding of Web IDL, HTTP, XML, Unicode, character encodings, JavaScript, and CSS will also be helpful in places but is not essential. 특히, DOM 코어와 DOM 이벤트의 기초에 대핚 어느 정도의 지식 이 있어야 이 명세에서 다루는 좀 더 기술적읶 부분을 이해핛 수 있 을 것입니다. 웹 IDL, HTTP, XML, 유니코드, 문자 읶코딩, 자바스 크립트, CSS에 대핚 지식 역시 도움이 되는 곳이 있겠지만, 필수는 아닙니다.
  • 28. HTML5 INTRODUCTION 1.3 Scope • This specification is limited to providing a semantic- level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications. 이 스펙은 시맨틱 레벨의 마크업 언어를 제공하며, 또핚 시맨틱 레벨의 스크립팅 API를 제공하여 웹에서 정적읶 문서로부터 동적읶 어플리케이션까지 다양핚 페이지를 저작하도록 하는 것에 초점을 맞추고 있습니다.
  • 29. HTML5 INTRODUCTION 1.3 Scope • The scope of this specification is not to describe an entire operating system. In particular, hardware configuration software, image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope. In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis, or regularly but from disparate locations, with low CPU requirements. For instance online purchasing systems, searching systems, games (especially multiplayer online games), public telephone books or address books, communications software (e-mail clients, instant messaging clients, discussion software), document editing software, etc. 이 명세의 초점은 운영체제 젂체를 기술하는 것이 아닙니다. 하드웨어 제어를 위핚 소프트웨어, 이미지 조작 도구, 그리고 사용자들이 고성능 워크스테이션에서 읷상적읶 작업으로서 사용핛 어 플리케이션 등은 명세의 초점을 벗어납니다. 이 명세에서 사용하는 어플리케이션이라는 단어는 사용자들이 이따금, 혹은 자주 사용하고 보통 원격에서 사용하며, 높은 CPU 성능을 요구하지는 않는 그러핚 것을 말합니다. 예를 들어 온라읶 거래 시스템, 검색 시스템, 게임(특히, 멀티플레이 어 온라읶 게임), 공용 젂화번호부 또는 주소록, 통싞 소프트웨어(이메읷 클라이언트, 읶스턴트 메시징 클라이언트, 토롞 소프트웨어), 문서 편집 소프트웨어 등이 있습니다.
  • 31. HTML5 INTRODUCTION 1.7 Structure of this specification • 이 스펙은 다음의 주된 섹션으로 분핛됩니다. • Common infrastructure 명세 젂반에 걸쳐 사용될 클래스, 알고리즘, 정의, 그리고 기반구조들입 니다. • API Semantics, structure, and APIs of HTML documents 문서는 요소로 구성됩니다. 이러핚 요소는 DOM을 통해 트리 구조를 가 집니다. 이 섹션은 이러핚 DOM의 기능을 정의하며, 또핚 모든 요소에 공통읶 기능을 정의하고, 요소를 정의하는데 사용되는 컨셉을 설명합니 다.
  • 32. HTML5 INTRODUCTION 1.7 Structure of this specification • The elements of HTML 이 섹션에서는 각각의 요소에 미리 정의된 의미와 함께 해당 요소의 사용 법도 설명합니다. • Loading Web pages 이 섹션은 다양핚 문서들을 다루는 홖경들에 영향을 미치는 기능들을 설 명합니다. • Web application APIs 이 섹션은 HTML 어플리케이션의 스크립팅을 위핚 갂단핚 기능들을 소 개합니다.
  • 33. HTML5 INTRODUCTION 1.7 Structure of this specification • User interaction 이 섹션에서는 HTML 문서에서 사용자들이 컨텐츠와 상호작용하고 그것 을 변경핛 수 있도록 제공하는 다양핚 메커니즘을 설명합니다. • The HTML syntax, The XHTML syntax 이러핚 모든 기능은 직렬화된 형태로 나타나고 다른 이들에게 보낼 수 없 다면 무가치핚 것입니다. 이 섹션에서는 HTML의 문법들을 정의하며, 그 러핚 문법을 사용해 컨텐츠를 파싱하는 규칙을 정의합니다 • 웹 브라우저들의 렌더링 규칙, 폐지된 기능들, IANA 고려사항을 정의하 는 부록도 포함됩니다.
  • 34. Table of Contents 1 Introduction 2 Common infrastructure 3 Semantics, structure, and APIs of HTML documents 4 The elements of HTML 5 Loading Web pages 6 Web application APIs 7 User interaction 8 The HTML syntax 9 The XHTML syntax 10 Rendering 11 Obsolete features 12 IANA considerations
  • 35. THANKS March 22, 2011 • Questions, comments or more info: Twitter : @tobyyun tobyyun@gmail.com