들어가기전에
HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다.
요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다.
이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며,
각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다.
핵심키워드
학습하기
Content Models 의 7 분류
1. Metadata
" base, link, meta, noscript, script, style, title "
Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.
메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징입니다.
2. Flow
" a, abbr, address,
map>area, article, aside,
audio, b, bdo, blockquote,
br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.
Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.
3. Sectioning
" article, aside, nav, section "
Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.
HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.
4. Heading
" h1, h2, h3, h4, h5, h6 "
Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.
5. Phrasing
"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"
Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.
6. Embedded
" audio, canvas, embed, iframe, img, math, object, svg, video "
Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.
7. Interactive
" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "
Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.
참고자료
https://www.w3.org
https://developer.mozilla.org
comment
2021-07-05
콘텐츠 모델 개념잡고 태그 복습햇습니다 :)
콘텐츠 모델
HTML 규칙에 비슷한 성격의 요소끼리 그룹화함
Metadata : 콘텐츠의 표현, 동작, 다른 문서와의 관계, head내 존재, base, link, meta, script, style, title 등
Phrasing : 문서 텍스트, 문서 내부레벨, a, abbr, audio , b, br, button, i 등
embeded : 외부 콘텐츠, audio, video, img, canvas, embed 등
interactive : 상호작용, audio,. button , a, embed, img 등
heading : 섹션의 헤더, h1~h6
sectioning : 문서의 구조, 아웃라인, article, aside, nav, section
flow : 대부분, metadata의 일부분 제외
Metadata : 콘텐츠 스타일 동작 설정, 다른 문서와 관계,head내 존재.
Flow: Mteradata에 들어간 요소 다 빼고 거의 flow해당.
Sectioning:Sectioning에는 문서의 구조와 관련된 요소들 ,HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함
Heading: Heading에는 각 section의 header를 정의하는 heading 태그
Phrasing:문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함
Embedded: 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소
Interactive: 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들