[HTML5] Content categories (컨텐츠 범주)

안녕하세요 Lovefield 입니다.

오늘은 문서를 번역한 겸 블로그로도 옮겨봤습니다.

원글 : 클릭

번역 글 : 클릭

기존 번역 글에 빠진 부분을 채워서 번역해봤습니다.

아직 영어 실력이 미천하므로 잘못된 번역은 지적 부탁드립니다.

컨텐츠 범주

컨텐츠 범주란 각각의 HTML 요소가 가질수 있는 내용의 종류를 정의한 규칙입니다.

이 규칙은 여러 HTML요소 들의 공통 규칙이며 그룹화 되거나 각각 하나 또는 여러개의 컨텐츠 범주에 속해있습니다.

모든 HTML 요소의 룰 설정에는 반드시 HTML권고안을 따라야 합니다.

컨텐츠 범주에 대한 종류는 크게 세가지가 있습니다.

• 메인 컨텐츠 범주 : 여러 요소들이 서로 공유하는 일반적인 컨텐츠 규칙입니다.
• 폼 관련 컨텐츠 범주 : 폼 관련 요소들이 공통적으로 사용하는 컨텐츠 규칙입니다.
• 특정 컨텐츠 범주 : 일부 요소만이 가질수 있는 특정한 범주 규칙이며, 특정한 상황에서만 사용할수 있습니다.

메인 컨텐츠 범주

메타데이터 컨텐츠

메타데이터 컨텐츠 범주에 속한 요소들은 문서의 표현이나 동작을 수정하고, 다른 문서에 대한 링크를 설정하거나 다른 외부 정보를 전달합니다.

이 범주에 속한 엘리먼트들 : <base>, <command>, <link>, <mate>, <noscript>, <script>, <style>, <title>

플로우 컨텐츠

플로우 컨텐츠 범주에 속한 요소들은 전형적으로 텍스트나 외부 컨텐츠를 포함 합니다.

이 범주에 속한 엘리먼트들 : <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <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>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> 그리고 텍스트가 있습니다.

특정 조건이 충족될때 이 범주에 속하는 요소들 :

• <area> : <map> 엘리먼트의 자손인 경우.
• <link> : improp 속성을 가지고 있는 경우.
• <meta> : improp 속성을 가지고 있는 경우.
• <style> : scoped 속성을 가지고 있는 경우.

sectioning 컨텐츠

sectioning 컨텐츠 모델에 속한 엘리먼트는 <header> 엘리먼트, <footer> 엘리먼트 및 제목 컨텐츠 의 내용에 해당하는 범위를 정의하는 섹션을 만듭니다.

이 범주에 속한 엘리먼트들 : <article>, <aside>, <nav>, <section>

참고 : 이 컨텐츠 모델을 일반 내용 구분과 sectioning root 범주와 혼동하지 마시오.

제목 컨텐츠

제목 컨텐츠는 명시적인 sectioning 컨텐츠에 사용되거나 제목 컨텐츠에 의해 암시적으로 정의되는 sectioning 의 제목을 정의합니다.

이 범주에 속하는 엘리먼트들 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

참고 : <header>  엘리먼트에는 제목 컨텐츠가 정의되지 않습니다.

참고 : <hgroup> 엘리먼트는 W3C 명세에서 제거됬으며 WhatWG 명세에만 남아있습니다. 이론적인 시멘틱만 가능합니다.

구문 컨텐츠

구문 컨텐츠는 텍스트 혹은 텍스트를 포함한 마크업을 정의합니다.

이 범주에 속하는 엘리먼트들 : <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> 그리고 일반 텍스트(공백으로 이루어지지 않은).

특정 조건이 충족될 경우 이 범주에 속하는 엘리먼트 :

• <area> : <map> 의 자손인 경우
• <a> : 구문 컨텐츠만 포함한 경우
• <del> : 구문 컨텐츠만 포함한 경우
• <ins> : 구문 컨텐츠만 포함한 경우
• <map> : 구문 컨텐츠만 포함한 경우
• <link> : itemprop 속성을 가지고 있는 경우
• <meta> : itemprop 속성을 가지고 있는 경우

내장형 컨텐츠

마크업 언어 혹은 문서 공간에 외부 리소스를 포함합니다.

이 범주에 속하는 엘리먼트들 : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

대화형 컨텐츠

대화형 컨텐츠는 유저 인터렉션을 위해 특별하게 설계된 엘리먼트를 포함합니다.

이 범주에 속하는 엘리먼트들 : <a>, <button>, <details>, <embed>, <iframe>, <label>, <select>, <textarea>

특정 조건이 충족될 경우 이 범주에 속하는 엘리먼트 :

• <audio> : controls 속성을 가진경우
• <img> : usemap 속성을 가진경우
• <input> : type 속성이 hidden이 아닌경우
• <video> : controls 속성을 가진경우
• <menu> : type 속성이 toolbar 에 속한경우
• <object> : usemap 속성을 가진경우

뚜렷한 컨텐츠

컨텐츠가 비어있거나 숨김 상태일때도 뚜렷한 컨텐츠 입니다.

엘리먼트가 최소 한개의 노드를 가지고 있는 플로우컨텐츠 혹은 구문 컨텐츠 일때 이 범주에 속합니다.

폼 관련 구성 컨텐츠

폼 관련 구성 컨텐츠 엘리먼트는 form 을 소유자로 삼으며, form에 의해 표현됩니다.

form 소유자는 <form> 엘리먼트 이거나 id가 form 속성에 지정된 엘리먼트 입니다.

이 범주에 속한 엘리먼트 : <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>

이 범주는 하위 카테고리가 존재합니다 :

• listed
  form.elements 및 fieldset.elements IDL collections에 나열된 엘리먼트.
  
  해당 엘리먼트 : <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea>
  
  
• labelable
  <label> 엘리먼트와 연결할 수 있는 엘리먼트.
  
  해당 엘리먼트 : <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>
  
  
• submittable
  form을 제출할때 formdata를 구성할수 있는 엘리먼트.
  
  해당 엘리먼트 : <button>, <input>, <object>, <select>, <textarea>
  
  
• resettable
  form을 reset할때 영향을 받는 엘리먼트.
  
  해당 엘리먼트 : <input>, <output>,<select>, <textarea>
  
  

투명 컨텐츠 모델

엘리먼트에 투명할 컨텐츠 모델이 있는 경우, 투명한 엘리먼트가 제거 되고 자식 엘리먼트로 교체 되더라도 반드시 HTML5 규정에 따라야합니다.

예를들어 <del> 과 <ins> 엘리먼트는 투명합니다.

<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>

이러한 엘리먼트가 제거되더라도 이 부분은 유효한 HTML입니다.(올바른 영어가 아닌경우)

<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>