html5 - semantics, struture, and apis of html documents

Confidential and proprietary material for authorized persons only. 1

2011/09/19 권우일([email protected], @bitroid) 인프라웨어(http://www.infraware.co.kr)

Copyright ©2010 Infraware Inc. All rights reserved.


목차

•  Introduction •  Documents •  Elements •  APIs in HTML Documents •  Interactions with Xpath and XSLT* •  Dynamic markup insertion •  Conclusion


Introduction

Documents�� 객체�� 구조��

HTML�� elements�� 별�� 의미�� 및�� 속성과�� 적합한�� 사용��

Web�� Accessibility�� Initiative�� Accessible�� Rich�� Internet�� Applications�� 관련�� sementics��

HTML�� elements에�� 적용되는�� 속성�� 정의��

Element별�� content�� model과�� 의미��

동적�� 마크업�� APIs��


Documents��


Documents

•  document 객체(DOM)

§ 브라우저에서 모든 XML, HTML 문서는 document

객체에 의해 기술

§ 브라우저에 출력되는 URL에 해당하는 문서 자체

§ HTML or XML

•  HTML로 명시되지 않을 경우는 XML로 간주


Documents | HTMLDocument interface [OverrideBuiltins] interface HTMLDocument { // resource metadata management [PutForwards=href] readonly attribute Location location; readonly attribute DOMString URL; attribute DOMString domain; readonly attribute DOMString referrer; attribute DOMString cookie; readonly attribute DOMString lastModified; readonly attribute DOMString compatMode; attribute DOMString charset; readonly attribute DOMString characterSet; readonly attribute DOMString defaultCharset; readonly attribute DOMString readyState; // DOM tree accessors getter any (in DOMString name); attribute DOMString title; attribute DOMString dir; attribute HTMLElement body; readonly attribute HTMLHeadElement head; readonly attribute HTMLCollection images; readonly attribute HTMLCollection embeds; readonly attribute HTMLCollection plugins; readonly attribute HTMLCollection links; readonly attribute HTMLCollection forms; readonly attribute HTMLCollection scripts; NodeList getElementsByName(in DOMString elementName); NodeList getElementsByClassName(in DOMString classNames); // dynamic markup insertion attribute DOMString innerHTML; HTMLDocument open(in optional DOMString type, in optional DOMString replace); WindowProxy open(in DOMString url, in DOMString name, in DOMString features, in optional boolean replace); void close(); void write(in DOMString... text); void writeln(in DOMString... text);

// user interaction readonly attribute WindowProxy defaultView; readonly attribute Element activeElement; boolean hasFocus(); attribute DOMString designMode; boolean execCommand(in DOMString commandId); boolean execCommand(in DOMString commandId, in boolean showUI); boolean execCommand(in DOMString commandId, in boolean showUI, in DOMString value); boolean queryCommandEnabled(in DOMString commandId); boolean queryCommandIndeterm(in DOMString commandId); boolean queryCommandState(in DOMString commandId); boolean queryCommandSupported(in DOMString commandId); DOMString queryCommandValue(in DOMString commandId); readonly attribute HTMLCollection commands; // event handler IDL attributes attribute Function onabort; attribute Function onblur; attribute Function oncanplay; attribute Function oncanplaythrough; attribute Function onchange; attribute Function onclick; attribute Function oncontextmenu; attribute Function oncuechange; attribute Function ondblclick; attribute Function ondrag; attribute Function ondragend; attribute Function ondragenter; attribute Function ondragleave; attribute Function ondragover; … attribute Function onreset; attribute Function onscroll; attribute Function onseeked; attribute Function onseeking; attribute Function onselect; attribute Function onshow; attribute Function onstalled; attribute Function onsubmit; attribute Function onsuspend; attribute Function ontimeupdate; attribute Function onvolumechange; attribute Function onwaiting; }; Document implements HTMLDocument;


Documents | Other interfaces

•  브라우저는 다른 이름 공간에 대한 문서 인터페이스도 구현 §  SVGDocument

§ MathML

§  ...

•  보안을 고려


Documents | metadata

•  document.URL : 문서의 주소

•  referrer : 해당 문서로 넘어오기 전 Document의 주소

•  cookie : Document에 적용되는 http 쿠키 값

•  lastModified

•  compatMode : 문서가 올바르다면 “CSS1Compat” 반환

•  charset : 동적 변경 가능

•  characterSet

•  defaultCharset : 브라우저의 기본 인코딩 반환

•  readyState §  readystatechange -> loading || complete


Documents | DOM tree accessors

•  document.head

•  title : 문서 제목, 첫 번째 title element, namespace별로 우선권 있음

•  body

•  images

•  embeds

•  plugins

•  links

•  forms

•  scripts

•  APIs §  collection = document.getElementsByName(name)

§  collection = document.getElementsByClassName(classes)

§  collection = element. getElementsByClassName(classes)

각�� element별�� HTMLCollection�� 반환��

<div�� id="example">�� <p�� id="p1"�� class="aaa�� bbb"/>�� <p�� id="p2"�� class="aaa�� ccc"/>�� <p�� id="p3"�� class="bbb�� ccc"/>�� </div>��


Documents | Creating documents

•  createDocument() method

§  document = document.implementation.createHTMLDocument(title)

[Supplemental,�� NoInterfaceObject]�� interface�� DOMHTMLImplementation�� {�� Document�� createHTMLDocument(in�� DOMString�� title);�� };�� DOMImplementation�� implements�� DOMHTMLImplementation;��


Elements��


Elements | HTMLElement interface

•  DOM 내부의 모든 element는 고유한 semantic을 가짐

§  각 element는 주어진 의미와 목적에 맞게 사용되어야 함

§  문서의 의미는 동적으로 변화

§  eg. progress element

•  모든 HTML element는 HTMLElement 객체를 기본

인터페이스로 상속


Elements | HTMLElement interface interface HTMLElement : Element { // DOM tree accessors NodeList getElementsByClassName(in DOMString classNames); // dynamic markup insertion attribute DOMString innerHTML; attribute DOMString outerHTML; void insertAdjacentHTML(in DOMString position, in DOMString text); // metadata attributes attribute DOMString id; attribute DOMString title; attribute DOMString lang; attribute DOMString dir; attribute DOMString className; readonly attribute DOMTokenList classList; readonly attribute DOMStringMap dataset; // user interaction attribute boolean hidden; void click(); attribute long tabIndex; void focus(); void blur(); attribute DOMString accessKey; readonly attribute DOMString accessKeyLabel; attribute boolean draggable; [PutForwards=value] attribute DOMSettableTokenList dropzone; attribute DOMString contentEditable; readonly attribute boolean isContentEditable; attribute HTMLMenuElement contextMenu; attribute boolean spellcheck; // command API readonly attribute DOMString commandType; readonly attribute DOMString label; readonly attribute DOMString icon; readonly attribute boolean disabled; readonly attribute boolean checked; // styling readonly attribute CSSStyleDeclaration style;

// event handler IDL attributes attribute Function onabort; attribute Function onblur; attribute Function oncanplay; attribute Function oncanplaythrough; attribute Function onchange; attribute Function onclick; attribute Function oncontextmenu; attribute Function oncuechange; attribute Function ondblclick; attribute Function ondrag; attribute Function ondragend; attribute Function ondragenter; attribute Function ondragleave; attribute Function ondragover; attribute Function ondragstart; attribute Function ondrop; attribute Function ondurationchange; attribute Function onemptied; attribute Function onended; attribute Function onerror; attribute Function onfocus; attribute Function oninput; attribute Function oninvalid; attribute Function onkeydown; attribute Function onkeypress; attribute Function onkeyup; attribute Function onload; attribute Function onloadeddata; attribute Function onloadedmetadata; attribute Function onloadstart; attribute Function onmousedown; attribute Function onmousemove; attribute Function onmouseout; attribute Function onmouseover; attribute Function onmouseup; attribute Function onmousewheel; attribute Function onpause; attribute Function onplay; attribute Function onplaying; attribute Function onprogress; … }; interface HTMLUnknownElement : HTMLElement { };


Elements | Global attributes

•  accesskey •  class •  contenteditable •  contextmenu •  dir(ltr, rtl, or auto) •  draggable •  dropzone •  hidden •  id •  lang •  spellcheck •  style •  tabindex •  title

•  아래 속성은 모든 HTML element에서 사용 가능

•  onabort •  onblur* •  oncanplay •  oncanplaythrough •  onchange •  onclick •  oncontextmenu •  oncuechange •  ondblclick •  ondrag •  ondragend … •  onvolumechange •  onwaiting


Elements | Global attributes

•  data-* attribute §  *는 최소 한문자 이상의 XML 호환 문자

§ 이름 공간을 가지지 않음

§ 페이지, 또는 응용 프로그램에 종속적인 데이터 저장 용도 •  적절한 데이터 타입이 없을 경우

•  element.dataset –  DOMStringMap 객체 반환

–  eg. data-foo-bar=“” -> element.dataset.fooBar 로 변환

<ol>�� <li�� data-length="2m11s">Beyond�� The�� Sea</li>�� ...�� </ol>��

범용성�� 없는�� 데이터�� 타입��


Elements | Element definitions

•  Categories §  Element가 속한 범주의 목록

•  Contexts in which this element can be used §  Element가 어떤 문맥에서 사용될 수 있는지, content

model과 관련

•  Content model

•  Content attributes

•  DOM interface


Elements | Content model

•  HTML element가 가질 수 있는 컨텐트의 속성

body와�� 응용�� 프로그램에서�� 사용되는�� 대부분의�� element�� 포함��

미분류�� 데이터�� 포함(eg.�� RDF)��



heading과�� footer의�� 범위�� 정의��

섹션(sectioning�� content�� 등)의�� 헤더�� 정의��



문서�� 텍스트,�� 또는�� 텍스트�� 내부�� 마크업�� 요소들��

다른�� 자원을�� 문서에�� 삽입하는�� 컨텐트,�� HTML�� 이름�� 공간에�� 속하지�� 않으면서�� 내용을�� 포함하는�� 것들��



사용자와�� 상호작용을�� 위한�� 것.�� 이벤트를�� 발생할�� 수�� 있는�� 것��

•  Transparent content model §  부모 element의 content model을 따르는 element

§  eg. <p><object><param><ins><map><a�� href="/">Apples</a></map></ins></object></p>��

Phrasing�� content�� Phrasing�� content�� transparent�� content��


APIs in HTML documents

•  Element.tagname, Node.nodename §  Element 이름을 ASCII 대문자로 반환

•  Document.createElement(arg) §  먼저 아규먼트를 소문자로 변환

•  Element.[set|get]Attribute()

•  Element.[set|get]setAttributeNode() §  Attribute 이름을 소문자로 치환

•  Document.getElementsByTagName(arg)

•  Element.getElementsByTagName(arg) §  아규먼트는 소문자로 치환

•  DOM 코어 정의에 따라 API 반환 값의 형태가 변경될 수 있음


Interactions�� with�� Xpath�� and�� XSLT��

•  Xpath와의 상호작용???

•  XSLT 처리기는 메서드가 html

이라면 DOM을 출력해야 한

다는 의미


Dynamic�� markup�� insertion��


Dynamic markup insertion

•  Opening the input stream §  document = document.open([type[, replace]])

•  if type이 생략되거나 “text/html” 이면, –  then, document는 HTML파서와 연결

–  else, 평범한 텍스트로 간주

§  window = document.open(url, name, features [, replace]) •  window.open() 메서드와 동일

•  Closing the input stream §  document.close()

•  document.write(text…)

•  동적으로 문서에 markup 삽입하는 APIs


Dynamic markup insertion

•  innerHTML §  innerHTML 노드 내용의 마크업 표시 §  document.innerHTML

§  element.innerHTML

•  outerHTML §  Element와 그 내용의 마크업 표시

§  element.outerHTML

•  insertAdjacentHTML §  element.insertAdjacentHTML(position, text)

•  주어진 문자열, text를 HTML, XML로 파싱하고 그 결과로 생성된 노드를 position 아규먼트가 지정하는 위치에 삽입


Conclusion

•  Web과 검색엔진의 관계

•  Web이 우선인가? 검색엔진이 우선인가?


Thank you Headquarter and Research Institute: Bando B/D 2,3,4,8F, 48-1 Banpo-dong, Seocho-gu, Seoul, KOREA. 137-040 Tel. +82 2 537 0538 Fax. +82 2 535 0534

Beijing Office: Room908, Building 16, China Central Place, No.89, Jian Guo lu Chaoyang District, Beijing, CHINA. Tel. +86 10 65331556/7 Fax. +86 10 65331559 U.S. Office: 3003 North First Street San Jose, CA 95134, U.S.A

html5 - semantics, struture, and apis of html documents

Technology