3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류

1. HTML태그는 크게 '블록 레벨 요소'와 '인라인 레벨 요소'로 구분할 수 있습니다. 블록 레벨은 너비나 높이를 지정할 수 있고 줄 바꿈 속성을 가지고 있지만, 인라인 레벨은 너비나 높이를 지정할 수 없으며 줄이 바뀌지 않는(인라인) 형식으로 표현됩니다. HTML5로 발전되면서 블록 레벨과 인라인 레벨로 구분하는 방법은 퇴색 되었지만, 없어진 것은 아니며 비슷한 속성끼리 나누는 방법으로 발전되었습니다. 익스플로러 버전9 이하에서는 HTML5요소를 제대로 지원하지 않으므로, 이 경우에는 자바스크립트에서 document.create.Element("태그이름")의 혁식으로 생성하고, 스타일시트로 인라인 또는 블록요소의 특성을 따로 지정해야 합니다.

 

2. 블록 레벨 요소

 블록 레벨 요소는 자신을 감싸는 상위의 요소가 허용한 가로 폭 전체 영역을 차지합니다. 블록 레벨 요소에는 다음의 요소들이 포함됩니다.

address, article, aside, audio, cavas, div, footer, from, h1~h6, header, hr 등

 

3. 인라인 레벨 요소

 인라인 레벨 요소는 라인을 따라 흘러가는 요소입니다. 줄이 바뀌지 않지만 내용이 많아서 그 상위블록 요소의 영역을 가득 채우게 되면 줄이 바뀌게 됩니다. 인라인 레벨 요소에는 다음의 요소들이 포함됩니다.

var, strong, a, br, img, span, sub, sup, button, input, label, select, textarea 등

 

4. 컨텐츠 모델 별 분류

 HTML5에서는 HTML의 요소를 비슷한 속성에 따라 묶어서 분류합니다. 속성은 matadata, flow, sectioning, heading, phrasing, embeded, interative로 묶을 수 있스며, 몇몇 요소들은 여러 분류에 중복해서 포함되기도 합니다.

 

4-1) 메타데이터 컨텐츠(Metadata Content)의 종류

base, command, link, meta, noscript, script, style, title 등

 

4-2) 플로우 컨텐츠(flow content)의 종류

a, address, area, article, aside, audio, br, button, canvas, code, command, details, div, em, label, mark, menu, nav, noscript, output, p, pre, script, section, select, span, strong, style, table, textarea, ul 등

 

4-3)섹션 컨텐츠(sectioning content)의 종류

article, aside, nav, section

 

4-4) 제목 컨텐츠(heading content)의 종류

h1, h2, h3, h4, h5, h6

 

4-5) 구문 콘텐츠(phrasing content)의 종류

a, audio, br, button, canvas, code, command, del, em, iframe, img, input, label, mab, mark, math, nav, output, progress, select, span, textarea, time 등

 

4-6) 포함된 컨텐츠(embeded content)의 종류

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

 

4-7) 대화형 컨텐츠(interactive content)의 종류

a, audio, button, details, embed, iframe, img, input, label, menu, select, textarea, video 등