콘텐츠 카테고리

출처 : 위키백과

 : 콘텐츠 카테고리는 HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 세분화 한 것입니다. 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있습니다.

MDN에서는 아래와 같이 정의합니다.

느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다.
- MDN

 

---

출처 : html.spec.whatwg.org

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

: 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소입니다.

<link>, <meta>, <script>, <style>, <title>

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

: 웹 페이지상에 메타데이터를 제외한 거의 모든 요소로, 텍스트나 임베디드 콘텐츠를 포함합니다.

<a>, <audio>, <article>, <div>, <h1>, <strong>, <video>

3. 구획 콘텐츠(Section Content)

: 웹 문서의 구획(Section)을 나눌 때 사용합니다.

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

4.  제목 콘텐츠(Heading Content)

: 구획의 제목(Heading)과 관련된 요소입니다.

<h1> ~ <h6>, <hgroup>

5. 구문 콘텐츠(Phrasing Content)

: 문서의 텍스트와 단락 내에서 해당 텍스트를 표시하는 요소입니다.구문이 모여서 단락을 형성합니다. 

<a>, <audio>, <b>, <button>, <input>, <strong>, 공백으로 이루어지지 않은 일반 텍스트

6. 내장 콘텐츠(Embedded Content)

 : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용하는 요소입니다.

<audio>, <embed>, <iframe>, <img>, <video>

7. 대화형 콘텐츠(Interactive Content)

 : 사용자와의 상호작용을 위해 설계된 요소입니다.

<a>, <button>, <label>, <select>

---

출처 : mdn audio

정리

 : MDN에서 요소를 검색 했을 때 기술 요약, 또는 명세라는 항목에서 자주 볼 수 있는 부분입니다. 카테고리별로 겹치는 부분이 너무 많기 때문에 무조건 외워서 엄격하게 구분하는 용도보다는 해당 요소가 어떤 형태로 동작할지 예상할 수 있는 기준 정도로 볼 수 있겠습니다. 

참고자료

https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EA%B5%AC%ED%9A%8D_%EC%BD%98%ED%85%90%EC%B8%A0

콘텐츠 카테고리 - 웹 개발자 안내서 | MDN

https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2

HTML Standard

https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#kindes-of-content

3.2.5 Content models — HTML5