HTML5 - Content Model (콘텐츠 모델)

HTML5 이전에는 HTML 태그들을 inline (인라인), block (블록) 이 두 가지의 요소로만

구분을 지었었다. 

 

2020/02/11 - [HTML] - HTML inline(인라인) vs block(블록) 요소

 

하지만 HTML5에 들어서면서 단순히 인라인 vs 블록의 구분이 아닌

태그의 특성에 따라 Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive로 

총 7개의 카테고리로 분류한다.

 

 

참고 : https://www.w3.org/TR/html53/dom.html

 

* 위의 이미지 처럼 Interative 영역과 Phrasing 영역 처럼 겹치는 영역들은 특정 태그가 Interative의 특성과 Phrasing의 특성을 두루 갖춘 태그이다.

 

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

메타 데이터 컨텐츠는 문서의 표현이나 동작을 설정하거나, 다른 문서와의 관계를 설정하고

다른 문서에 정보를 전달하는 컨텐츠이다.

 

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

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

플로우 컨텐츠는 문서나 Application의 본문 (body태그) 안에서 사용되는 컨텐츠이다.

 

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas,
cite, code, command, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i,
iframe, img, input, ins, kbd, keygen,
label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre,
progress, q, ruby, s, samp, script, section, select, small, span, strong,
sub, sup, svg, table, textarea, time, ul, var, video, wbr, text

- area (map 요소의 자식 요소인 경우)
- style (scoped 속성이 있으면)

3. Sectioning Content (구획 컨텐츠)

Headings Content와 footer (<footer>)를 정의하는 컨텐츠이다.

 

article, aside, nav, section

4. Heading Content (제목 컨텐츠)

Sectioning Content의 header를 정의하는 컨텐츠이다.

 

h1, h2, h3, h4, h5, h6

5. Phrasing Content (구문 컨텐츠)

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

 

abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist,
dfn, em, embed, i, iframe, img, input,
kbd, keygen, label, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, 
script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr, text

- a (구문만을 포함하는 경우)
- area (map 요소의 자식요소인 경우)
- del (구문만을 포함하는 경우)
- ins (구문만을 포함하는 경우)
- map (프레이징 콘텐츠만을 포함하는 경우)

 

6. Embedded Content (임베디드 컨텐츠)

다른 리소스나 컨텐츠를 문서에 삽입하는 컨텐츠이다.

 

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

 

7. Interactive Content (인터렉티브 컨텐츠)

사용자와의 상호작용을 위해 사용되는 컨텐츠이다.

 

a, button, details, embed, iframe, select, textarea, keygen, label

- audio (controls 속성이 있으면)
- img (usemap 속성이 있으면)
- input (type 속성이 hidden 상태가 아니면)
- menu (type 속성이 toolbar 상태면)
- object (usemap 속성이 있으면)
- video (controls 속성이 있으면)