HTML 콘텐츠 모델

개발 log·2021년 8월 29일

HTML/CSS 지식

목록 보기

3/7

콘텐츠모델?

HTML5에서 새롭게 등장함

명확한 정보 구조 설계 및 구성을 위해 카테고리를 저의하여 각 요소별로 비슷한 성격을 갖고 있는 요소끼리 그룹화한 것

이미지로 보는 콘텐츠모델

섹셔닝 루트

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

섹셔닝 루트에 속하는 요소는 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않음

메타데이터 콘텐츠

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

메타데이터는 문서의 정보를 포함하는 메타데이터
스타일 표현을 위한 <style>요소
행동을 설정하는 <script>요소 등등이 있음
브라우저에 직접적으로 표시되지 않으며 문서(document)와 문서 간의 관계를 설정함

플로우 콘텐츠(Flow Content)

<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi> (en-US), <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math> (en-US), <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture> (en-US), <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>, 텍스트

메타데이터 콘텐츠 요소 중 일부를 제외하고 <body>에 들어가는 대부분의 요소들이 플로우 콘텐츠
<area>, <link>, <meta>, <style>은 조건부로 플로우 콘텐츠

섹셔닝 콘텐츠(Sectioning Content)

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

대부분 HTML5에서 새롭게 추가된 요소들
제목과 내용을 포함한 범위를 지정하는 콘텐츠
모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가짐

헤딩 콘텐츠(Heading Content)

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

섹션의 제목을 나타냄
문서의 아웃라인을 고려하여 사용해야 됨

임베디드 콘텐츠(Embedded Content)

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

문서에 외부 자원을 포함하는 태그
HTML이 아닌 다른 언어로 표현되는 콘텐츠

인터랙티브 콘텐츠(Interactive Content)

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