1. Content Model이란?
- 특정한 요소가 어떤 콘텐츠를 나타내는 지 보여주기 위한 모델
- 모든 요소는 최소한 1개의 콘텐츠 모델에 속하며, 여러 콘텐츠 모델에 동시에 속해있는 요소들도 존재함
- 콘텐츠 모델은 주로 아래와 같은 목적으로 활용됨
- 콘텐츠의 포함관계를 나타내기 위해
- 어떤 요소가 어떤 콘텐츠를 나타내는 지 표현하기 위해
- 콘텐츠 모델에는 크게 7가지가 있고, 특수한 목적의 콘텐츠 모델인 Transparent content model이 있음
2. Metadata Content
- 문서에 대한 정보를 다른 문서나 Bot에게 전달하는 요소들
- Base
- style
- link
- template
- meta
- title
- script
- noscript
3. Flow Content
- 문서의 body 내에 포함되는 대부분의 요소들
4. Sectioning Content
- HTML의 구역을 나눌 때, heading과 footer의 범위를 지정할 때 사용하는 콘텐츠 모델
- article
- aside
- nav
- section
5. Heading Content
- section의 제목을 나타낼 때 사용하는 콘텐츠 모델
- 명시적으로 Sectioning Content를 사용하는 것과 암묵적인 것이 있음
- h1~h6
- hgroup
6. Phrasing Content
- HTML 문서 내에서 text를 사용하는 모든 콘텐츠 모델 text를 사용할 뿐만 아니라 text처럼 취급되는 모든 요소
7. Embedded Content
- HTML 문서 내에서 다른 리소스 (이미지, 비디오, 오디오)를 불러오는 콘텐츠
- HTML 문서 내에서 HTML로 작성되지 않은 콘텐츠 (SVG, MathML)를 불러오는 콘텐츠
- HTML 문서 내에서 다른 HTML을 불러오는 (iFrame) 콘텐츠
- audio
- video
- img
- picture
- svg
- math
- iframe
- canvas
8. Interactive Content
- HTML 문서 내에서 유저와 상호작용이 발생하는 콘텐츠
- 자바스크립트를 활용하면 Interactive Content가 아닌 요소에도 인터렉션을 줄 수 있으나, 브라우저의 기본 동작이 아니기 때문에 별도의 접근성 작업을 수행하여야 함 (WAI-ARIA, 웹 애플리케이션 인터렉션 접근성 가이드라인)
- a 요소 (href 속성을 포함한 경우)
- audio (controls 속성을 포함한 경우)
- img (usermap 속성을 포함한 경우)
- video (controls 속성을 포함한 경우)
- input
- label
- button
- select
- textarea
9. Palpable Content
- Flow 콘텐츠나 Phrasing 콘텐츠는 자식 노드가 적어도 1개 이상 존재해야 하며, 만약 콘텐츠가 자식 노드를 가지지 않거나 숨김 상태인 경우 Palpable Content라 지칭함
10. Script-supporting elements
- HTML 문서 내에서 JavaScript를 호출하기 위해 사용하는 요소
- script
- template
11. Transparent Content
- 일부 요소는 Transparent 콘텐츠 모델을 지니는 데, 이 의미는 어떤 콘텐츠에 속하느냐에 따라 콘텐츠 모델이 달라지는 걸 의미함
- 예를 들어 a 요소는 Transparent 콘텐츠 모델을 지내고 있는데, a 요소가 p 요소 내부에 있는 경우 콘텐츠 모델은 Phrasing Content 처럼 취급됨
12. Paragraphs
- Paragraph는 콘텐츠 모델은 아니지만, Flow 콘텐츠 내에 텍스트가 들어가 있거나, Phrasing Content가 여럿 묶여있는 경우를 Paragraph라고 취급하게 됨
13. The Nothing Content
- 일부 요소는 자식 노드를 전혀 포함하지 않는 경우도 존재함
- 이런 경우에는 nothing content model
Backend Engineer