인생은 속도가 아니라 방향이다

Web/HTML

HTML5의 콘텐츠 분류 체계에 대해서 알아보자

Joonfluence 2022. 4. 20.

서론

기존 HTML은 인라인과 블록요소, 이렇게 크게 두 가지로 구분되었는데요. 2014년에 HTML5가 새롭게 개편됨에 따라서, 태그에 대한 분류 또한 더욱 다양해졌습니다. 그래서 오늘은 총 10가지의 태그 분류 체계에 대해서 알아보며, 기존 태그 분류와의 차이점은 무엇인지 함께 알아가봅시다.

본론

컨텐츠 분류 카테고리는 다음과 같습니다. 물론 웹 개발을 할 때, 이 모든 분류를 다 암기하고 있어야 하는 것은 아닙다만, 무의식적으로 분류하던 태그들을 의식적으로 분류하고자 노력하는 것이 전에 비해 더 나은 개발을 위해 도움이 되리라 생각합니다.

  1. Flow Content
  2. Phrasing content
  3. Metadata Content
  4. Sectioning Content
  5. Heading Content
  6. Interactive Content
  7. Sectiong roots
  8. Form-associated elements
  9. Listed elements
  10. Submittable elements
  11. Resettable elements
  12. Labelable elements
  13. Script-supproting elements

Flow Content

대부분의 태그는 Flow Content에 속하는데요, 기준은 body 태그 안에 속할 수 있느냐 없느냐로 구분됩니다. 따라서 기존에 block, inline 요소들 모두 Flow Content에 속합니다. 당연하게도 head 태그와 body의 상위 태그인 html 태그 등은 속할 수 없겠죠? 전체적인 태그는 아래와 같습니다.

a; abbr; address; 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; hgroup; hr; i; iframe; img; input; ins; kbd; label; map; mark; MathML math; menu; meter; nav; noscript; object; ol; output; p; picture; pre; progress; q; ruby; s; samp; script; section; select; slot; small; span; strong; sub; sup; SVG svg; table; template; textarea; time; u; ul; var; video; wbr; autonomous custom elements; Text

Phrasing content

용어가 바뀌어 생소하게 느껴지실 수 있지만, 기존에 inline 요소에 해당하는 태그들이 여기 속합니다. Phrasing이란 단어의 뜻을 찾아보니, 무언가를 표현하기 위해 사용하는 단어들을 말하는데요. 해당 요소들이 자신이 속한 문서의 단락을 설명해준다는 점에서 단어의 뜻과도 직접적인 연관이 있습니다.

a; abbr; audio; b; bdi; bdo; br; button; canvas; cite; code; data; datalist; del; dfn; em; embed; i; iframe; img; input; ins; kbd; label; map; mark; MathML math; meter; noscript; object; output; picture; progress; q; ruby; s; samp; script; select; slot; small; span; strong; sub; sup; SVG svg; template; textarea; time; u; var; video; wbr; autonomous custom elements; Text

Metadata Content

다음은 Metadata Content 입니다. 이름에서 알 수 있듯, meta 태그가 이 분류에 속할 거라고 예측할 수 잇는데요. 이 컨텐츠 분류에는 다른 콘텐츠의 표시, 동작, 관계 등을 설정하는 태그들이 속합니다. 예를 들면, js/css 파일을 불러오기 위한 script/link 태그, 흔히 웹 접근성을 위해 추가하는 meta 태그, 문서의 제목을 나타내는 title 태그 등이 해당 분류에 속합니다.

base; link; meta; noscript; script; style; template; title

Sectioning Content

문서의 구획을 나누고 개요를 형성할 때 사용합니다. 이 요소들을 사용하면, 문서의 명시적인 개요가 형성되게 됩니다. Heading Content로, 아래 개요의 제목 부분을 작성해주는 것이 좋습니다. <Heading>, <header>, <footer> 태그의 범위를 나타내는 요소로도 쓰일 수 있습니다.

article; aside; nav; section

Heading Content

섹셔닝 콘텐츠의 제목 영역을 마크업할 때 사용합니다. Sectioning Content에 해당하는 태그를 사용하지 않더라도 암시적인 개요가 생성되게 됩니다.

h1; h2; h3; h4; h5; h6; hgroup;

Interactive Content

사용자와 상호 작용할 수 있는 콘텐츠들을 마크업할 때 사용합니다. 대표적으로 페이지 이동을 위한 a 태그와 폼 입력을 위한 input 태그가 여기에 속합니다. 다만 태그만 사용한다고해서 되는 건 아닙니다. 예를 들어, a 태그에는 href 속성이 들어가야하고, input 태그의 상태는 hidden이면 안되겠죠? 인터랙션을 위한 필수적인 속성을 기술하는 작업이 필요합니다.

a, audio, button, details, embed, iframe, img, input, label, select, textarea, video

Sectiong roots

섹션을 나누는 요소의 조상격인 태그들이 여기에 속합니다. 한가지 특이한 점은 bloockquote와 td 요소의 자식으로 오는 내용들은 자신의 상위 요소의 개요에 영향을 주지 않고 독립적인 개요를 문서에서 형성합니다. 단, HTML의 개요 알고리즘은 브라우저에 구현되지 않은 경우가 많기 때문에, 아직 실제로는 사용할 수 없다고 합니다.

blockquote, body, details, dialog, fieldset, figure, td
<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

HTML 개요 알고리즘이 렌더링하는 개요

[body]

  • h1 : foo
    • h2 : Bar
    • h2 : Quux
      • h3 : Thud

브라우저에서 실제 렌더링 되는 개요

[body]

  • h1 : foo
    • h2 : Bar
      • h3 : Bla
    • h2 : Quux
      • h3 : Thud

차이점을 아시겠나요? blockquote로 묶인 태그는 독립적인 개요를 형성하므로 body 개요에서 빠지게 됩니다. 단, 브라우저에서는 포함되어 보이죠.

Form-associated elements

폼과 관련된 태그들이 여기 속합니다. 대표적으로 폼의 입력 필드를 구성하는 input 태그와 전송 이벤트를 담당하는 button 태그가 존재합니다. (form-associated custom elements란 사용자가 Form API 활용하여, 직접 태그를 생성한 요소를 말합니다.)

button; fieldset; input; label; object; output; select; textarea; img; form-associated custom elements

Listed elements

사용자 입력 폼을 구성하는 요소와 필드셋을 구성하는 요소들이 해당 분류에 속합니다.

button; fieldset; input; object; output; select; textarea; form-associated custom elements

Submittable elements

해당 태그에 입력된 값이 폼 요소로 등록되어 전송될 수 있는 요소를 말합니다.

button; input; select; textarea; form-associated custom elements

Resettable elements

값이 초기화될 수 있는 요소들을 의미합니다. 위 태그 종류와 일치합니다.

input; output; select; textarea; form-associated custom elements

Palpable content

대부분의 태그 요소는 콘텐츠를 포함해야 하는데요, Palpable content는 콘텐츠를 포함할 수 있는 태그들을 말합니다. 따라서 flow 콘텐츠, phrasing 콘텐츠 모두 속할 수 있습니다. 단, input 태그의 hidden 속성이 지정된 경우엔 속할 수 없습니다.

content a; abbr; address; article; aside; b; bdi; bdo; blockquote; button; canvas; cite; code; data; details; dfn; div; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; hgroup; i; iframe; img; ins; kbd; label; main; map; mark; MathML math; meter; nav; object; output; p; pre; progress; q; ruby; s; samp; section; select; small; span; strong; sub; sup; SVG svg; table; textarea; time; u; var; video; autonomous custom elements

Labelable elements

태그에 라벨을 설정할 수 있는 요소들 의미합니다.

button; input; meter; output; progress; select; textarea; form-associated custom elements

Script-supproting elements

화면에 렌더링하지 않지만 사용자에게 기능을 제공하는 요소들을 말합니다. 스크립트 태그의 경우, 다양한 파일들을 로드할 때 사용됩니다. 그리고 template 태그의 경우에는 태그를 템플릿화해서 작성할 때 사용할 수 있습니다.

script; template

마무리

이상으로 HTML5의 컨텐츠 분류 체계에 대해서 알아보았습니다. 방문해주시고, 읽어주셔서 감사합니다 :D

참고한 사이트

HTML5 콘텐츠 분류

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[HTML] Input readonly와 disabled의 차이점은 무엇인가?  (0) 2022.04.13
프론트엔드 면접 질문 정리 ① HTML 질문  (0) 2021.05.10
[기타] script, script async, script defer의 차이점  (0) 2020.11.20
[HTML] HTML 요소들 정리하기 : 구획, 메타데이터, 멀티미디어 등  (0) 2020.11.11
[WEB] Adobe Flash Player와 HTML5 & WebGL  (0) 2020.11.10

댓글

티스토리툴바