HTML5의 콘텐츠 모델(Content Models)

728x90

HTML5의 콘텐츠 모델이란?

인라인 요소, 블록 요소로 구분했던 태그를 각 태그별로 비슷한 성격끼리 그룹화한 것이다
콘텐츠 모델은 자식 요소에 들어올 수 있는 태그가 제한되어있다

1. Sectioning Root

계층구조로 구분되지 않고 독립적인 콘텐츠로 분리된다
- 계층구조: <section>, <article>
아웃라인에 영향을 주지 않는다

<blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>

2. Metadata

문서의 정보를 나타내는 메타데이터, 스타일 요소, 스크립트 요소를 나타낸다
웹 브라우저에 직접적으로 표시되지 않는다
문서와 문서간의 관계를 설정한다

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

3. Flow

<body>에 들어가는 대부분에 요소가 해당된다

<a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>, 
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, 
<code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, 
<dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, 
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, 
<ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>, 
<nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, 
<strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>, 
<textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>

4. Sectioning

제목과 그 내용을 포함한 범위를 지정하는 콘텐츠
헤딩과 아웃라인을 가진다

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

5. Heading

섹션의 제목을 나타낸다

<h1> ~ <h6>

6. Phrasing

문서의 텍스트를 나타낸다
phrasing 콘텐츠가 모여 문단을 구성한다
대부분 flow 콘텐츠 전체를 포함할 수 없다
대부분 phrasing 콘텐츠로 분류된 요소만을 포함할 수 있다
텍스트 이외에 embedded 콘텐츠를 포함할 수 있다

<a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>, 
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, 
<embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, 
<map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, 
 <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>

7. embedded

문서 안에 외부 자원(외부 리소스) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠
- 외부자원: 이미지, 동영상, 플러그인, 아이프레임 콘텐츠
- 다른 언어로된 콘텐츠: MathML, SVG

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

8. interactive

사용자가 어떤 기능을 조작할 수 있는 (상호 작용) 콘텐츠
- ex. 확인 버튼 누르기, 동영상 재생, 링크 클릭

<a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>, 
<img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>, 
<label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>, 
<video>(controls 속성이 있는 경우)

9. palpable

구체적으로 보여지고 이해할 수 있는 콘텐츠
최소한 하나 이상의 요소가 존재해야한다
해당 요소는 숨김 상태면 안된다

<a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우), 
<base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, 
<data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>, 
<dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, 
<input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>, 
<map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>, 
<ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>,
<ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)

10. script-supporting

사용자에 대한 기능 등에 해당하는 스크립트를 지원한다

<script>

11. transparent

앞에서 설명한 카테고리에 속하지 않는 요소들
transparent 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다

<table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>

728x90

'👩‍🎤 프론트엔드 > html' 카테고리의 다른 글

웹 접근성을 고려하여 콘텐츠 숨기기 - sr-only / off-screen / a11yHidden (0)	2022.07.12
<main> / <section> vs <article> (0)	2022.07.12
HTML 기본 틀에 대해 알아보자 - <!DOCTYPE> / <head> / <meta> / <title> (0)	2022.07.11

HTML5의 콘텐츠 모델이란?

1. Sectioning Root

2. Metadata

3. Flow

4. Sectioning

5. Heading

6. Phrasing

7. embedded

8. interactive

9. palpable

10. script-supporting

11. transparent

'👩‍🎤 프론트엔드 > html' 카테고리의 다른 글

티스토리툴바