본문 바로가기

HTML

HTML5 카테고리(콘텐츠 모델)

참고: <http://darum.daum.net/convention/html/html5_elements>

특성이 비슷한 HTML5 요소들끼리 묶어 7개의 카테고리로 그룹화했다.

   

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

Head 영역 안에 선언하는 것들. 콘텐츠의 표현 및 행동을 설정, 문서간의 관계를 설정하거나, 정보들을 포함하는 요소다.

   

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

   

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

Body 영역에서 사용되는 대부분의 요소가 플로우 콘텐츠다. 텍스트나 임베디드 콘텐츠도 여기에 속한다.

   

C. 섹션 콘텐츠 (Section Conetnt)

대부분이 HTML5에서 새롭게 추가된 요소다. Heading과 Footer의 범위를 지정하는 역할을 한다. 모든 섹션 콘텐츠는 Heading과 Outline를 가진다.

   

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

   

D. 헤딩 콘텐츠 (Heading Content)

섹션의 헤더에 사용한다.

   

<h1~6>, hgroup

   

E. 프레이징 콘텐츠 (Phrasing Content)

문단 안에서 텍스트를 마크업을 하는데 사용한다.

   

<a>, <abbr>, <b>, <em>, <sub, <sup>등

   

F. 임베디드 콘텐츠 (Embedded Content)

외부 리소스(이미지, 비디오, 오디오 등)를 문서에 삽입하는데 사용한다.

   

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

   

G. 인터랙티브 콘텐츠 (Interactive Content)

사용자와의 상호작용을 하는 요소에 사용한다.

   

  • <a>, <audio> (controls 속성이 있으면), 
  • <button>, <details>, <embed>, <iframe>, <img> (usemap 속성이 있으면),
  • <input> (type 속성이 hidden 상태가 아니면), 
  • <keygen>, <label>, <menu> (type 속성이 toolbar 상태면),
  • <object> (usemap 속성이 있으면), 
  • <select>, <textarea>, <video> (controls 속성이 있으면)

   

   

'HTML' 카테고리의 다른 글

HTML, CSS 문법 형식  (0) 2015.03.21
HTML은 뼈, CSS는 살, jQuery(JS)는 움직임  (0) 2015.03.20
index.html / default.html  (0) 2015.03.19
Hello World!  (0) 2015.03.18
HTML5 카테고리(콘텐츠 모델)  (0) 2015.03.17
HTML5 Outline  (0) 2015.03.16