Contents Model, HTML5 와 HTML4.01차이점, Contents Model 구성 요소

 

 

Contents Model

·       HTML문서작성의 큰 구조

·       문서의 Outline을 잡고 Contents를 구성할 수 있게 하는 모델

·       어떤 요소가 어떤 콘텐츠 또는 요소를 포함할 수 있는 지에 관한 정의를 포함합니다.

·       HTML5에서는 Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content와 같은 Contents Model 요소가 추가되었습니다.

 

HTML5 이전 문서	Block Level Element와 Inline Element로 구분되어지는 태그를 가지고 표현을 하였습니다. 즉 Tree형태의 계층구조를 이루는 문서의 Outline을 구성하고, 그 구조에 따라 Contents에 접근하였습니다.
HTML5 문서	Contents Model이라는 개념이 추가되어 문서의 Outline을 잡고 Contents를 구성할 수 있게 되었습니다. 이로 인해 기존의 HTML보다 훨씬 더 시멘틱한 웹 구성이 가능해졌습니다.

 

 

HTML5 와 HTML4.01차이점

http://codedragon.tistory.com/3344

 

 

 

Contents Model 구성 요소

구분	설명	태그
Metadata Content	나머지 Contents의 Presentation이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정할 때 사용	·       base ·       command ·       link ·       meta ·       script ·       style ·       title
Flow Contents	문서와 Application의 Body에서 사용	·       a ·       abbr ·       address ·       area ·       article ·       aside ·       audio ·       b ·       button ·       canvas ·       div ·       dl ·       em ·       figure ·       footer ·       form ·       h1~h6 ·       header ·       hr ·       I ·       iframe ·       img ·       input
Sectioning Content	Headings과 Footers의 범위를 정의할 때 사용	·       a ·       canvas ·       cite ·       code ·       command ·       datalist ·       del ·       dfn ·       em ·       embed ·       I ·       iframe ·       img ·       inut ·       span ·       strong ·       sub ·       sup ·       svg ·       textarea ·       time ·       var ·       video ·       wbr         ·       text
Heading Content	Section의 Header를 정의할 때 사용	Sectioning Content와 동일
Phrasing Content	문서의 Text 및 Text를 intra-paragraph level로 Markup 할 때 사용	Sectioning Content와 동일
Embedded Content	문서의 다른 Resource를 삽입할 때 사용	·       audio ·       canvas ·       embed ·       iframe ·       img ·       math ·       object ·       svg ·       video ·       a ·       audio ·       button ·       details ·       embed ·       iframe ·       img ·       object ·       select ·       textarea ·       video
Interactive Content	사용자의 상호작용을 위해 특별하게 의도할 때 각각 사용	Embedded Content와 동일