고정 헤더 영역
상세 컨텐츠
본문
Content Models
HTML5 이전에는 HTML 태그들을 inline과 block 두 가지 요소로만 구분 지었지만,
HTML5부터는 태그에 특성에 따라 7개의 카테고리로 분류한다.
1. Metadata Content
✅ 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함된다.
✅ 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징이다.
base, link,meta, noscript, script, style, title
2. Flow Content
✅ 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다.
✅ Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 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
3. Sectioning Content
✅ 문서의 구조와 관련된 요소들이 포함된다.
✅ HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게된다.
article, aside, nav, section
4. Heading Content
✅ section의 header를 정의하는 heading 태그가 포함된다.
h1, h2, h3, h4, h5, h6
5. Phrasing Content
✅ 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함된다.
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
6. Embedded Content
✅ 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당된다.
audio, canvas, embed, iframe, img, math, object, svg, video
7. Interactive Content
✅ 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당된다.
a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]
학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고 정리한 글입니다.
Reference
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
Content categories - HTML: HyperText Markup Language | MDN
Most HTML elements are a member of one or more content categories — these categories group elements that share common characteristics. This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help
developer.mozilla.org
'HTML&CSS' 카테고리의 다른 글
| [CSS] 가상선택자 (0) | 2023.04.13 |
|---|---|
| [CSS] 문서 구조 관련 선택자 (0) | 2023.04.10 |
| [CSS] CSS 문법과 적용 (0) | 2023.04.10 |
| [HTML] 시멘틱 마크업, 블록 & 인라인 (0) | 2023.04.10 |
| [HTML] HTML 이해하기, HTML 태그 (0) | 2023.04.09 |
댓글 영역