[HTML] 콘텐츠 모델 (Content Models)

Seonup·2022년 8월 30일

HTML

목록 보기

2/6

HTML5에 새롭게 등장한 콘텐츠 모델. 기존에는 inline 요소와 block 요소로만 구분되던 element들이 콘텐츠 모델이 생기면서 각자의 역할과 마크업 구조가 명확해졌다. 콘텐츠 모델에 대해 자세히 알아보자.

콘텐츠 모델이란? Content Models

명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화 한 것
하나의 요소가 여러 그룹에 속해 있을 수도 있고 그렇지 않을 수도 있음
콘텐츠 모델이 없는 요소일 경우
- Text노드나 element 노드를 포함하지 않아야 함
- 대부분의 단일 태그가 콘텐츠 모델이 없는 요소일 순 있으나, 별개의 개념임

플로우 콘텐츠 Flow Content

메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소
메타데이터 콘텐츠 외 다른 콘텐츠들은 모두 플로우 콘텐츠에 포함됨
대부분의 텍스트, 임베디드 콘텐츠를 포함함
종류
- a, abbr, address, article, aside, audio, b, bdo, bdi, blockquote, br, button, canvas, cite, code, data, datalist, datalis, del, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, slot, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, autonomous custom element, text
- 조건부
- <area>: 의 자손인 경우
- <link>
- <meta>: itemprop 특성을 가진 경우
- <main>: 계층적으로 올바르게 사용된 경우
- <style>: scoped 속성이 있는 경우

메타데이터 콘텐츠 Metadata Content

문서의 정보를 포함하는 메타데이터 + 스타일을 표현한 <style>요소 + 행동을 설정하는 <script> 요소를 나타냄
웹 브라우저에 직접적으로 표시되지 않음
문서(Document)와 문서 간의 관계를 설정함
문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
종류
- base
- link
- meta
- noscript
- script
- style
- template
- title

섹셔닝 콘텐츠 Sectioning Content

대부분 HTML5에서 새롭게 추가된 요소
범위를 지정하는 콘텐츠로 제목과 내용을 포함함
자체적인 heading과 outline을 가짐
웹 문서의 구획을 나눌 때 사용
header 와 footer 요소의 범위를 정의함
종류
- article
- aside
- nav
- section

섹셔닝 루트 Sectioning Root

이나 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되어 아웃라인에 영향을 주지 않음
요소 자체가 섹션을 구성하여 자기 자신만의 아웃라인을 가짐
상위 요소의 아웃라인에 영향을 미치지 않음
종류
- blockquote
- body
- detail
- filedset
- figure
- td

헤딩 콘텐츠 Heading Content

섹션의 제목을 나타냄
문서의 아웃라인을 고려하여 사용해야 함
섹셔닝 콘텐츠 내에 명시적으로 표시되었는지, 또는 헤딩 콘텐츠 자체로 제목이 암시되는지의 여부에 따라 판단됨
종류
- h1, h2, h3, h4, h5, h6
- 조건부
  - hgroup: 요소 내 자손(h1이 있는 경우)

프레이징 콘텐츠 Phrasing Content

구문 콘텐츠
문서의 텍스트 (공백 포함)
문단 내 해당 텍스트를 표시하는 요소
프레이징 콘텐츠가 모여 문단을 구성함
프레이징 콘텐츠로 분류된 요소만 포함할 수 있으며, 플로우 콘텐츠는 포함할 수 없음
텍스트 외 임베디드 콘텐츠도 포함할 수 있음
종류
- abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, dfn, em, embed, i, iframe, img, input, kbd, label, mark, math, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, autonomous custom elements, text
- 조건부
  - a: 콘텐츠로 다른 요소를 포함하지 않을 경우
  - area: map 요소의 자식인 경우
  - del: 구문만을 포함하는 경우
  - ins: 구문만을 포함하는 경우
  - link
  - map: 구문만을 포함하는 경우
  - meta: itemprop 특성을 가질 경우

임베디드 콘텐츠 Embedded Content

문서 안의 외부 자원(외부 리소스) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠
- 외부 자원: 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등
- 다른 언어: MathML, SVG 등
외부 소스를 가져오거나 삽입할 때 사용
외부 리소스가 지원되지 않는 등 외부 리소스를 사용할 수 없는 경우 임베디드 콘텐츠는 대체 콘텐츠를 가질 수 있음
HMTL namespace가 아닌 다른 namespace에서 가져온 요소이며 콘텐츠를 전달하지만, 메타데이터는 전달하지 않는 요소 (예: svg, math)
종류
- audio
- canvas
- embed
- iframe
- img
- math
- object
- picture
- svg
- video

인터랙티브 콘텐츠 Interactive Content

사용자가 어떤 기능을 조작할 수 있는 콘텐츠
사용자와의 상호작용을 위한 콘텐츠 요소
종류
- button, details, embed, iframe, label, select, textarea
- 조건부
  - a: href 속성이 있는 경우
  - audio: controls 속성이 있는 경우
  - img: usemap 속성이 있는 경우
  - input: type 속성이 hidden이 아닌 경우
  - object: usemap 속성이 있는 경우
  - video: controls 속성이 있는 경우

팰퍼블 콘텐츠 Palpable Content

기존 콘텐츠 모델에 새롭게 추가된 개념
구체적으로 보여지고 들리는 등 사용자에게 감지가 되는 콘텐츠 요소
최소 하나 이상의 요소가 존재해야 하고, 해당 요소는 숨김 상태여서는 안됨
글자가 아닌(canvas, img, video, audio 등) 요소들은 사용자에게 텍스트 정보를 따로 제공해야 함
종류
- a, abbr, address, article, aside, b, bdi, bdo, bdi, blockquote, button, canvas, cite, code, data, datalis, dfn, div, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, main, map, mark, math, meter, nav, object, output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, var, video, autonomous custom elements
- 조건부
  - audio: controls 속성이 있는 경우
  - dl: 자식 요소가 하나 이상의 이름과 값으로 구성되어 있는 경우
  - input: type 속성이 hidden이 아닌 경우
  - menu: toolbar 속성이 있는 경우, 자식 요소가 하나 이상의 li 요소를 포함하고 있는 경우
  - ol: 자식 요소가 하나 이상의 li 요소로 구성되어 있는 경우
  - ul: 자식 요소가 하나 이상의 li 요소로 구성되어 있는 경우
  - text: 공백이 아닌 텍스트

스크립트 지원 요소 Script-supporting Elements

사용자를 위한 기능을 제공하기 위해 스크립트를 지원하는 데 사용됨
요소 자체는 아무것도 표현되지 않고 아무런 정보를 나타내지 않음 (= 렌더링 되지 않음)
종류
- script
- template

트렌스페런 콘텐츠 Transparent Content

자체로 가진 콘텐츠가 투명하여 상위(부모, 조상) 요소의 콘텐츠 모델과 동일한 콘텐츠를 가짐
상위의 콘텐츠 모델로 판단된다고 해서 투명 콘텐츠 모델이라고 표현
transparent 콘텐츠 요소에 상위 요소가 없는 경우, transparent 콘텐츠 모델 대신 flow 콘텐츠를 수용함
투명 요소가 서로 중첩되는 경우, 프로세스를 반복적으로 적용해야 하는 경우가 있음
예제
- 아래 예제처럼 “Apples”의 작성이 올바른지 확인하기 위해 콘텐츠 모델을 검사할 경우, object, ins, map, a는 모두 transparent 콘텐츠 모델이므로 상위 요소인 p에서 허용 여부를 확인한다. 이때, p는 텍스트나 문단을 의미하는 Phrasing 콘텐츠이기 때문에 텍스트인 “Apples”의 작성이 허용된다.
```
<p>
  <object>
    <param />
    <ins>
      <map>
        <a href="/">Apples</a>
      </map>
    </ins>
  </object>
</p>
```
종류
- a
- ins
- del
- object
- video
- audio
- map
- noscript
- canvas

문단 Paragraphs

p 요소에서 정의되는 문단보다 큰 의미로, 문서를 해석하는 방법을 설명하는데 사용
문단은 특정 주제를 논의하는 하나 이상의 문장으로 텍스트 블록을 형성하는 phrasing 콘텐츠 이지만, 하나의 주제를 그룹화 하는데도 사용될 수 있음 (예: 주소)
- 예제
  - 아래 section은 text로 이뤄진 첫번째 문단과 p 가 묶은 두번째 문단으로, 총 2개의 Paragraphs으로 구성됨 (주석과 요소 간의 공백은 문단을 구성하지 않음)
```
<section>
  <h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  
</section>
```
일반적으로 문단의 경계를 가로지르는 요소는 피하는 것이 좋음
- 적합성 검사시 경고가 뜰 수 있음
- a, ins, del, map 은 혼합 콘텐츠 모델을 가지며 문단의 경계를 넘나들 수 있음
- 예제
  - ins는 section의 제목 h2과 첫번째 문단인 text에 걸쳐져 있음
  - del 은 두 단락 사이의 경계에 걸쳐있음
```
<section>
  <ins>
    <h2>Example of paragraphs</h2>
    This is the <em>first</em> paragraph in
  </ins> this example
  <del>.
    <p>This is the second.</p>
  </del>
  
</section>
```
p 요소는 문단을 서로 구분하기 위한 Prasing Content 이외의 콘텐츠가 없을 때 개별 문단을 묶는데 사용할 수 있음

아웃라인 알고리즘 Outline Algorithm

HTML5부터 도입됨
정보 구조를 명확히 할 수 있도록 하는 개념
웹 페이지의 정보 구조를 판별할 수 있는 개념. 책의 목차와 비슷
HTML5에서 추가된 대부분의 요소들이 아웃라인 알고리즘과 관련이 있음
직접적으로 아웃라인을 구성하는 요소
- 헤딩 콘텐츠
- 섹셔닝 콘텐츠
- 섹셔닝 루트 요소

참고

Seonup

박선우

이전 포스트

[HTML] Validation 사용하기

다음 포스트

[HTML] 콘텐츠 모델 (Content Models)

HTML

콘텐츠 모델이란? Content Models

카테고리

플로우 콘텐츠 Flow Content

메타데이터 콘텐츠 Metadata Content

섹셔닝 콘텐츠 Sectioning Content

섹셔닝 루트 Sectioning Root

헤딩 콘텐츠 Heading Content

프레이징 콘텐츠 Phrasing Content

임베디드 콘텐츠 Embedded Content

인터랙티브 콘텐츠 Interactive Content

팰퍼블 콘텐츠 Palpable Content

스크립트 지원 요소 Script-supporting Elements

트렌스페런 콘텐츠 Transparent Content

문단 Paragraphs

아웃라인 알고리즘 Outline Algorithm

참고

[HTML] Validation 사용하기

[HTML] head 태그 내에서 SEO를 끌어올릴 수 있는 방법

0개의 댓글