🟡 HTML5의 컨텐츠 모델

Html 4.01(+XHTML1.0) 기반의 마크업 언어에서 태그 요소를 구분하는 그룹은 일반적으로 Inline level element 와 block level element로 구분이 되어 있다.

이러한 분류는 html의 사용 목적인 정보 구성과는 무관한 해당 요소가 기본적으로 어떻게 보이는가와 연관되어 있다.

이에 비해 HTML5의 콘텐츠 모델은 해당 요소가 어떠한 성격으로 사용되는지에 관련된 구분으로, 기존의 구분 방식 보다는 정보 전달이라는 목적에 부합하는 구분법이라고 할 수 있다.

HTML4에서는 문서의 구조를 만들때 div, span 요소를 id, class와 함께 사용하였다. 문서의 구조를 나타내는 요소가 풍부하지 않아서 복잡한 페이지의 경우 많은 중첩된 div요소를 사용하였다.

HTML5에서는 문서의 구조를 만드는 새로운 개념과 요소들이 추가되어서 보다 구조적인 문서를 만드는 것이 가능해졌다.

1. Flow Group

• Flow Group은 웹 페이지상에 직접 표시되지 않는 일부 메타 데이터를 제외하고 거의 모든 요소들이 Flow Group에 속하게 된다.

2. Heading Group(목차생성)

• Heading Group은 기존의 <h1~6>과 HTML5에서 새롭게 추가된 <hgroup>이 있다.
• <hgroup>은 특정단계에서 웹페이지의 아웃라인과 관계없이 헤딩 태그를 여러 단계로 사용하는 경우에도 아웃라인을 정상적으로 유지하는 역할을 한다.

3. Sectioning Group(목차생성)

• Sectioning Group은 <article>, <aside>,<nav>, <section>이 속하며, 모두 HTML5에서 새롭게 추가된 요소들이다.Sectioning Group에 속하는 요소들은 Heading Group과 함께 HTML의 정보구조를 구성하는 역할을 한다. 이러한 관점에서 본다면 <aritcle>, <aside>, <nav>, <section>은 <div>보다는 <h1~6>, <hgroup>과 더 긴밀한 연관성이 있다고 볼 수 있다.

4. Phrasing Group

• Phrasing Group은 다른 요소를 콘텐츠로 포함하지 않는 요소들.
• <em>, <span>, <strong>과 같이 text요소를 직접 표시하거나 <img>,<input>과 같이 대체되는 요소에 속하게 된다.
• <div>와 <p>는 Pharsing Group에 속하지 않는다. <a>와 같은 몇몇 요소들은 컨텐츠로 다른 요소를 포함하지 않는 등의 조건부로 Pharsing Group이 된다.

5. Embedded Group

• <img>, <iframe>, <video>, <canvas> 외부자원을 웹 페이지에 포함하는 요소들.

6. Interactive Group

• <a>, <button>, <textarea>등 상호작용 요소.

7. Metadata Group

• <meta>, <title>, <link>등과 같이 브라우저에 표시되지 않는 요소.