HTML5에 새롭게 등장한 콘텐츠 모델. 기존에는 inline 요소와 block 요소로만 구분되던 element들이 콘텐츠 모델이 생기면서 각자의 역할과 마크업 구조가 명확해졌다. 콘텐츠 모델에 대해 자세히 알아보자.
a, abbr, address, article, aside, audio, b, bdo, bdi, blockquote, br, button, canvas, cite, code, data, datalist, datalis, del, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, slot, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, autonomous custom element, text
<area>
: 의 자손인 경우<link>
<meta>
: itemprop 특성을 가진 경우<main>
: 계층적으로 올바르게 사용된 경우<style>
: scoped 속성이 있는 경우<style>
요소 + 행동을 설정하는 <script>
요소를 나타냄base
link
meta
noscript
script
style
template
title
header
와 footer
요소의 범위를 정의함article
aside
nav
section
blockquote
body
detail
filedset
figure
td
h1, h2, h3, h4, h5, h6
hgroup
: 요소 내 자손(h1
이 있는 경우)abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, dfn, em, embed, i, iframe, img, input, kbd, label, mark, math, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, autonomous custom elements, text
a
: 콘텐츠로 다른 요소를 포함하지 않을 경우area
: map 요소의 자식인 경우del
: 구문만을 포함하는 경우ins
: 구문만을 포함하는 경우link
map
: 구문만을 포함하는 경우meta
: itemprop 특성을 가질 경우svg
, math
)audio
canvas
embed
iframe
img
math
object
picture
svg
video
button, details, embed, iframe, label, select, textarea
a
: href 속성이 있는 경우audio
: controls 속성이 있는 경우img
: usemap 속성이 있는 경우input
: type 속성이 hidden이 아닌 경우object
: usemap 속성이 있는 경우video
: controls 속성이 있는 경우canvas
, img
, video
, audio
등) 요소들은 사용자에게 텍스트 정보를 따로 제공해야 함a, abbr, address, article, aside, b, bdi, bdo, bdi, blockquote, button, canvas, cite, code, data, datalis, dfn, div, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, main, map, mark, math, meter, nav, object, output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, var, video, autonomous custom elements
audio
: controls 속성이 있는 경우dl
: 자식 요소가 하나 이상의 이름과 값으로 구성되어 있는 경우input
: type 속성이 hidden이 아닌 경우menu
: toolbar 속성이 있는 경우, 자식 요소가 하나 이상의 li 요소를 포함하고 있는 경우ol
: 자식 요소가 하나 이상의 li 요소로 구성되어 있는 경우ul
: 자식 요소가 하나 이상의 li 요소로 구성되어 있는 경우text
: 공백이 아닌 텍스트script
template
object
, ins
, map
, a
는 모두 transparent 콘텐츠 모델이므로 상위 요소인 p
에서 허용 여부를 확인한다. 이때, p
는 텍스트나 문단을 의미하는 Phrasing 콘텐츠이기 때문에 텍스트인 “Apples”의 작성이 허용된다.<p>
<object>
<param />
<ins>
<map>
<a href="/">Apples</a>
</map>
</ins>
</object>
</p>
a
ins
del
object
video
audio
map
noscript
canvas
p
요소에서 정의되는 문단보다 큰 의미로, 문서를 해석하는 방법을 설명하는데 사용section
은 text로 이뤄진 첫번째 문단과 p
가 묶은 두번째 문단으로, 총 2개의 Paragraphs으로 구성됨 (주석과 요소 간의 공백은 문단을 구성하지 않음)<section>
<h2>Example of paragraphs</h2>
This is the <em>first</em> paragraph in this example.
<p>This is the second.</p>
<!-- This is not a paragraph. -->
</section>
a
, ins
, del
, map
은 혼합 콘텐츠 모델을 가지며 문단의 경계를 넘나들 수 있음ins
는 section
의 제목 h2
과 첫번째 문단인 text에 걸쳐져 있음del
은 두 단락 사이의 경계에 걸쳐있음 <section>
<ins>
<h2>Example of paragraphs</h2>
This is the <em>first</em> paragraph in
</ins> this example
<del>.
<p>This is the second.</p>
</del>
<!-- This is not a paragraph. -->
</section>