[HTML] HTML5 콘텐츠 모델

HTML5는 태그를 특성에 따라 Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive 총 7개의 카테고리로 분류한다.

 

위의 이미지처럼 서로 겹치는 태그는 서로 간의 특성을 두루 갖고 있는 태그이다.

 

1. 메타데이터 콘텐츠 (Metadata Content)

메타 데이터는 데이터를 설명하는 데이터이다.

문서의 표현이나 동작을 설정하거나, 다른 문서와의 관계를 설정하고, 다른 문서에 정보를 전달한다.

Head 영역 안에서 선언한다.

<base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, <title>

 

 

2. 플로우 콘텐츠 (Flow Content)

본문(body태그) 안에서 사용되는 콘텐츠, 내용을 뜻하며 대부분의 콘텐츠를 포함하고 있다.

Body 영역 안에서 선언한다.

 

 

3. 구획/섹션 콘텐츠 (Section Content)

Headings Content와 footer (<footer>)의 범위를 지정하는 콘텐츠이다.

모든 섹션 콘텐츠는 Heading과 Outline을 가진다

<article>, <aside>, <nav>, <section>

 

4. 제목/헤딩 콘텐츠 (Heading Content)

섹션의 헤더에 사용한다

<h1~6>, <hgroup>

 

 

5. 구문/프레이징 콘텐츠 (Phrasing Content)

텍스트와 텍스트가 포함된 마크업을 정의하는 콘텐츠이다

<a>, <rea>, <del>, <ins>, <map> 등

 

 

6. 임베디드 콘텐츠 (Embeded Content)

다른 리소스나 콘텐츠를 문서에 삽입하는 콘텐츠 (이미지, 동영상, 노래 삽입 등)

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

 

 

7. 인터랙티브 콘텐츠 (Interactive Content)

사용자와 상호작용을 위해 사용되는 컨텐츠

 

<a>, <audio[controls]>, <button>, <details>, <embed>, <iframe>, <img[usemap]>, <input>, <keygen>, <label>, <menu>, <object[usemap]>, <select>, <textarea>, <video[controls]>