mizzu-creations
html 요소들의 분류법과 사용규칙

html 요소들의 분류법과 사용규칙

뭐? 이제 ‘인라인 요소/블록 요소’라는 개념이 사용되지 않는다고?

MIZZU's photo
MIZZU
·

4 min read

Table of contents

The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명 강의 中 “Part 1.HTML“ 내용을 기반으로 작성한 포스팅입니다.


1. 글의 목적

이미지 출처 : data-flair.training/blogs/html-block-and-in..

이론적 기반을 탄탄히 다지고 싶은 마음에 오랜만에 강의를 하나 구입했다. 그러던 와중에 도입부부터 아주 강렬했던 내용이 하나 있었는데, HTML5 부터 ‘인라인 요소/블록 요소’ 라는 용어가 사실상 사라졌다는 것이다. 지금까지 우리는 무엇을 기반으로 HTML을 공부해 왔을까?

2. 유효한 HTML이란 뭘까?

<!-- ⭕ -->
<a>유효한 코드일까요?</a>

<!-- ⭕ -->
<a>
  <div>유효한 코드일까요?</div>
</a>

<!-- ❌ -->
<p>
  <a>
    <div>유효한 코드일까요?</div>
  </a>
</p>

  • <a>요소에 href 속성이 없어도 유효함 (필수 속성은 아님)

  • HTML5 부터 <a>라는 인라인 요소에 블록 요소가 자식 레벨로 포함 가능함

  • 단순히 ‘블록-인라인-블록 구조’라 불가능 한 것이 아니라, 명세를 기반하여 볼 때 규칙에 어긋난다. (’5. HTML 태그들의 포함관계에 대한 이해’에서 풀이)

위 내용들은 그동안 우리가 알고 있던 HTML 학습 방식과는 완전히 다른 접근법을 보여준다.

3. W3C에서 WHATWG로의 전환

W3C ㅠㅠ
Living Standard

HTML 표준은 과거 W3C(World Wide Web Consortium)가 관리했으나, 이제는 WHATWG(Web Hypertext Application Technology Working Group)의 Living Standard가 중심이 되었다.

브라우저 제조사들이 WHATWG에서 제안을 W3C로 올리고 검토·수락을 받는 방식이 비효율적이었기에, 주요 브라우저 벤더들은 WHATWG에서 표준을 직접 관리하는 체계를 도입했다. 이로 인해 W3C의 HTML5 명세는 현재 폐기되었으며, 대부분의 브라우저 벤더와 개발자들은 WHATWG의 Living Standard를 기준으로 참조하고 있다.

Living Standard는 지속적으로 업데이트되는 "살아있는 표준"으로, 정적인 표준과는 달리 웹 기술의 변화에 따라 끊임없이 진화하고 있다.

4. HTML5 태그 분류법 : content models

출처 : html.spec.whatwg.org/multipage/dom.html#con..

HTML5 이전에 대부분 블록 요소라고 부르던 것들은 ‘Flow Content’ 개념에 해당하며, 인라인 요소라고 부르던 것들은 ‘Phrasing content’에 대부분 포함된다. 위와 같이 크게 7개의 분류가 있으며, 특정 요소를 하나의 개념으로 묶는 것이 아니라 의미론적으로 통하기 때문에 여러 개념을 동시에 포함하고 있음을 알 수 있다.

콘텐츠 모델을 더 알아보기 전에 미리 <a>요소의 명세를 예로 보면, <a>요소는 Flow content, Phrasing content, Palpable content에 해당하며, href 속성이 있다면 Interactive content에도 해당한다. 명세 어디를 봐도 ‘a 요소는 인라인이다’ 라는 내용은 존재하지 않는다.

4-1. Flow content

Flow content는 body에 포함할 수 있는 모든 요소를 의미한다. 거의 대부분의 요소들이 Flow content에 해당하며, 이전의 블록/인라인 요소들이 모두 포함된다.

4-2. Metadata content

Metadata content는 주로 문서의 헤드 안에 작성되는 요소들이다. 화면에 출력되지 않는 특징을 가지고 있다. <script>나 <template>등의 일부 요소는 body 내에서도 사용할 수 있는데, 이런 경우에는 Flow content가 되기도 한다.

4-3. Heading content

Heading content는 <h1>부터 <h6>까지 문서의 흐름에서 제목을 담당하는 요소들이 해당된다.

4-4. Sectioning content

Sectioning content는 문서의 개요를 형성하는 요소들로, 자주 사용하는 <article>, <aside>, <nav>, <section> 태그가 해당된다. 각 Sectioning content는 암시적인 개요를 형성하며, Heading content를 함께 사용하면 명시적인 개요를 형성하게 된다.

<!-- 암시적 개요 -->
<section>내용</section>

<!-- 명시적 개요 -->
<section>
  <h2 class="blind">문서 주요 내용 설명 또는 타이틀</h2>
  내용
</section>

위 섹셔닝 요소들은 화면에서 ‘display: block’으로 렌더링이 된다.

4-5. Phrasing content

Phrasing content는 구문 콘텐츠, 단락을 형성하는 콘텐츠로, 예전에 인라인으로 분류되던 요소들이 대부분 해당된다.

4-6. Embedded content

Embedded content는 외부 자원을 참조하는 콘텐츠로, 멀티미디어 등의 요소를 HTML에 삽입하고 싶을 때 필요한 요소들이 포함되어 있다. <audio>, <video>, <picture> 등이 있으며 모든 Embedded content는 Phrasing content에 속한다.

4-7. Interactive content

Interactive content는 사용자와 상호 작용할 수 있는 콘텐츠로, 키보드, 마우스 등의 입력 장치로 조작할 수 있다는 특징이 있다. (<input>, <button>, <select> 등)

4-8. 이 외의 content들

4-8-1. Palpable content

Palpable content는 비어 있지 않은, 볼 수 있는 콘텐츠로 hidden 속성이 없다. 때문에 화면에서 숨겨져 있지 않고 볼 수 있거나, 상호작용 할 수 있는 대부분의 요소들이 포함된다.

4-8-2. Script-supporting element

스크립트 지원 요소로 <script>, <template>이 해당되며, 화면에 렌더링되지 않지만 사용자에게 기능을 제공한다.

4-8-3. Transparent content models

투명 콘텐츠 모델로, 부모의 콘텐츠 모델을 따른다. <a>, <video>, <audio>등이 해당되며, 투명한 요소는 제거해도 부모-자식 관계가 문법적으로 유효해야 된다.

<a>
  <div>유효한 코드일까요?</div>
</a>

위와 같이 <a>요소 안에 <div>요소가 포함되어 있는 형태일 때, <a>요소를 제거한다고 해도 해당 문서는 유효하므로 <a>요소는 투명 콘텐츠 모델이다.

5. HTML 태그들의 포함관계에 대한 이해

‘위 내용들을 몰라도 그동안 작업 잘만 해왔는데 꼭 알아야 하나요?’ 라고 물어본다면 지금 알아볼 파트를 위해서라도 ‘그렇다’라고 말 할 수 있다. HTML 태그들의 조합과 포함관계에 대한 이해를 하는데 명세에 명확히 기술하고 있기 때문이다.

<!-- ❌ -->
<p>
  <a>
    <div>유효한 코드일까요?</div>
  </a>
</p>

다시 이어서 글의 도입부에서 설명했던 위의 예시가 규칙에 어긋나는 이유는, <a>가 투명 콘텐츠 모델에 속하기 때문이다. 투명 콘텐츠 모델은 부모의 콘텐츠 모델을 따르는 것이 규칙인데, 위의 코드에서는 <a>요소가 부모 요소인 <p>의 콘텐츠 모델을 따르므로 Pharsing content가 된다.

  • <p>요소의 안에 <a>요소가 오는 것은 허용이 된다. <a>요소가 Phrasing content 카테고리에도 속해있기 때문이다.

  • <a>요소 내에 <div>요소가 오는 것도 허용이 된다.<a>요소가 투명 콘텐츠 모델이기 때문에 자식 요소로 무엇이 오든 상관이 없어지기 때문이다.

하지만 예시 코드가 규칙에 어긋나는 이유는 <div>요소의 카테고리가 Flow, Palpable이기 때문에 유효하지 않은 맥락이 형성되었다. 그래서 위와 같은 예시는 기존에 기대고 있던 단순 블록-인라인-블록 구조의 접근으로는 해결할 수 없는 것이다.

6. 마무리하며

웹 기술의 세계에서 기초를 재점검하는 것은 매우 중요하다. 우리는 종종 이전에 배웠던 내용이나 기초적인 지식에 대해 무감각해지곤 하는데, 기술의 진화는 생각보다 빠르고 근본적이다. HTML Living Standard가 보여주듯, 우리가 "당연하다"고 여겼던 개념들은 언제든 변화할 수 있으며, 블록/인라인 요소에 대한 고정관념을 깨고 의미론적 접근방식을 이해하는 것이 중요하다. 따라서 때때로 기초로 돌아가 다시 점검하고 학습하는 "기초보수공사"는 전문성 향상을 위해 필수적이며, 새로운 것을 배우려는 끝없는 열정이 진정한 성장의 원동력임을 명심해야 한다.

참고자료

https://fastcampus.co.kr/dev_red_jcm

https://html.spec.whatwg.org/multipage/dom.html#content-models

HTML5AccessibilityUI developer