⭐ HTML5의 특징, 콘텐츠 모델
지금의 웹 표준 기술로서 HTML5가 채택되었기 때문에 우리는 HTML5의 특징을 자세히 알고 넘어갈 필요가 있다. HTML5의 가장 큰 특징이라 함은 아무래도 콘텐츠 모델 개념의 등장일 것이다.
이번 글에서는 콘텐츠 모델을 구체적으로 살펴보고, 그 중에서도 HTML5에서 새로 추가된 태그들이 다수 포함된 섹셔닝 콘텐츠를 비중 있게 다루고자 한다.
🤔 콘텐츠 모델이 그렇게 중요해?
먼저 콘텐츠 모델을 간략하게 설명하면 콘텐츠 모델은 기존에 block 요소와 inline 요소로 태그를 구분하던 방식에서 벗어나서 태그를 특성에 따라 7가지로 카테고리화한 것이다.
그렇다면 콘텐츠 모델이 중요한 이유는 무엇일까? 그 이유는 바로 HTML 마크업을 할 때 좀 더 의미론적으로 접근할 수 있다는 점이다. HTML5 이전의 태그 분류 방식은 단순히 스타일링을 위한 것이라고 봐도 무방하다. block 요소와 inline 요소의 차이는 줄바꿈의 유무인데, 이는 결코 의미론적인 차이라고 볼 수 없다. 또한 다양한 태그를 단순히 줄바꿈이 되는지 안 되는지에 따라 분류하는 것은 분류 기준의 관점에서 너무 포괄적이라고 느껴진다.
하지만 HTML5에 도입된 콘텐츠 모델은 태그의 특성을 새로운 분류 기준으로 정립함으로써 태그들을 좀 더 의미론적으로 접근할 수 있게끔 했다는 의의가 있다.
계속해서 '의미론'이라는 단어를 사용하고 있는데, 태그를 의미론적으로 바라보면 어떤 장점이 있을까? 바로 웹 접근성과 SEO 측면에서 강점을 가질 수 있게 된다.
HTML5 이전 방식을 따라 단순히 div를 통해서 영역을 구분한다면 div 영역 안에 포함된 요소가 어떤 의미를 가지는지 검색 엔진의 입장에서는 알 수가 없을 것이다. 하지만 콘텐츠 모델에 근거하여 HTML 문서를 구조화한다면 div 대신에 유의미한 main, section, nav 등의 태그를 사용할 수 있다. 이는 사용자와 검색 엔진 입장에서 태그로 구분된 영역이 어떤 정보를 가지고 있는지 이해하기 쉽다는 점에서 웹 접근성이 향상되는 결과를 초래한다.
🔍 콘텐츠 모델을 파헤쳐보자!
콘텐츠 모델이 중요한 이유를 짚어보았으니, 이번에는 구체적으로 콘텐츠 모델이 어떻게 분류되어 있는지 살펴보고자 한다.
🔸 메타 데이터 콘텐츠
link,meta,title,script,style...
메타 데이터 콘텐츠(Metadata Content)는 문서의 표현과 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정하거나, 문서의 정보를 나타내는 역할을 한다. 대부분 head 영역에 들어가는 태그이기 때문에, 실제로 브라우저에 시각적으로 보이지 않는다는 특징이 있다.
🔸 플로우 콘텐츠
a,abbr,h1,h2,section,button,span,footer,form...
플로우 콘텐츠(Flow Content)는 문서나 애플리케이션의 본문, 즉 body 영역 안에서 사용될 수 있는 모든 태그의 집합이기 때문에 콘텐츠 모델의 카테고리 중 제일 포괄적인 개념이다.
🔸 제목 콘텐츠
h1,h2,h3,h4...
제목 콘텐츠(Heading Content)는 말 그대로 구획의 제목을 정의하는 태그들이 속해 있다. 다음에 살펴볼 구획 콘텐츠 태그의 내부에서 구획을 명시적으로 구분하는 역할을 한다는 점을 눈여겨 볼 필요가 있다.
🔸 구획 콘텐츠
header,footer,article,section,aside,nav...
콘텐츠 모델이 중요한 이유는 바로 이 구획 콘텐츠(Sectioning Content) 때문이라고 해도 과언이 아니다. 구획 콘텐츠에 있는 태그들은 대부분 HTML5에 새로 추가된 것들이며, 문서의 큰 구조를 이루는 각각의 제목이 지칭하는 범위를 지정해주는 역할을 한다. 이를 위해 section, article 과 같은 태그 내부에는 반드시 제목 콘텐츠인 h1, h2 등이 포함되어야 한다.
구획 콘텐츠의 태그들은 각각 중요한 의미를 가지고 있기 때문에 좀 더 세부적으로 살펴보고자 한다.
💡 header
: 소개 및 탐색에 도움을 주는 콘텐츠를 담은 영역
: 제목, 로고, 검색 폼 등 요소 포함
💡 footer
: 본문과 관련성은 있지만 본문에는 담기 어려운 콘텐츠를 담은 영역
: 저작권, 연락처 등 요소 포함
💡 aside
: 페이지 전체 내용과는 어느 정도 관련성이 있지만 주요 내용과 직접적인 연관성이 없는 분리된 콘텐츠를 담은 영역
: 배너, 용어 설명 등의 요소가 포함되어 흔히 사이드바라고 부르는 영역, 하지만 사이드바 자체는 아님
💡 nav
: 목적지로 이동할 수 있도록 링크를 모아둔 영역
:ul,li,a요소 함께 사용
💡 section
: 관련 있는 내용을 묶어 표시함으로써 내용적 흐름과 구조를 만들고 구획을 나누는 역할
: 독립적인 영역이므로section안에header,footer삽입 가능
: 제목 콘텐츠와 함께 사용
💡 article
: 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할
: 본문과 별개로 구성되어 다른 영역에 영향을 주지 않고 독립적으로 배포되거나 재사용할 수 있음
: 게시물, 포스트 등이 해당
❓ section과 article, 뭐가 다른 거지?
앞서 살펴본 구획 콘텐츠들의 대부분은 각각의 특징이 뚜렷하지만, section과 article은 그 차이가 좀 모호하게 느껴진다. 명확한 구분을 위해 그 차이점에 대해 상세하게 알아보고자 한다.
일단 둘은 관련 있는 내용을 묶어서 구획을 나누는 역할을 한다는 점에서 공통점이 있다. 하지만 둘의 차이점이 분명하게 존재하는데, 이는 다음과 같다.
💡 section과 article의 차이와 특징
: 독립적인 배포가 가능하면
article
:section의 하위 요소로article을 쓸 수 있지만,article의 하위 요소로section을 쓸 수 없음
즉 section과 article을 구분하는 가장 큰 요인은 독립적인 배포의 가능 여부이다. 그러므로 article은 블로그의 게시물이나 뉴스 기사 등 완결형 콘텐츠를 포함한다.
또한 section의 하위 요소로 article을 쓸 수 있다는 점에서 결국 section이 article보다 좀 더 포괄적인 영역을 구분하는 데 쓰인다고 볼 수 있다.
❓ main은 구획 콘텐츠일까?
💡 main
: 해당 문서의 핵심 주제, 기능과 직접적인 관련이 있는 콘텐츠 영역을 표현하는 역할
:body와div요소를 제외한 다른 요소의 자식이 될 수 없음
: 한 문서에 여러 개의main을 마크업하는 것은 가능하지만, 렌더링시 반드시 하나의main만 화면에 표시되어야 함
main의 역할을 토대로 얼핏 생각하면 main도 구획 콘텐츠에 해당할 것 같은데, 의외로 main은 구획 콘텐츠에 해당하지 않는다. 그러므로 main 안에 반드시 제목 콘텐츠를 사용할 필요는 없다.
또한 main 안에 section과 article 등 구획 콘텐츠가 포함될 수 있기 때문에, main 안에서도 의미론적으로 영역을 구분하여 구획 콘텐츠를 사용하는 것이 바람직한 마크업 방식이라고 볼 수 있겠다.
❓ 암시적 아웃라인과 명시적 아웃라인
앞에서 살펴봤듯 구획 콘텐츠는 의미론적인 영역을 구분하는 역할을 한다. 영역을 나누는 과정에서 자연스럽게 눈에 보이지 않는 아웃라인이 생기고, 이를 바탕으로 검색 엔진이나 스크린 리더는 영역을 구분할 수 있게 된다.
그렇다면 여기서 궁금증이 하나 생긴다. 콘텐츠 모델이 존재하지 않던 HTML5 이전에는 영역을 어떻게 구분했을까? 바로 암시적 아웃라인을 통해서 영역 구분이 가능했다. 설명에 앞서 암시적 아웃라인과 명시적 아웃라인의 정의를 짚고 넘어가자면 다음과 같다.
💡 암시적 아웃라인
:
h1,h2등의 헤딩 태그를 사용하여 암시적으로 생성된 개요의 아웃라인
💡 명시적 아웃라인
:
section,article등의 구획 콘텐츠를 사용하여 명시적으로 생성된 개요의 아웃라인
즉 콘텐츠 모델 개념의 등장 이전에는 제목 콘텐츠가 암묵적으로 영역을 나누는 역할을 담당했다. 그러나 암묵적으로 영역을 구분하면 의미 전달의 관점에서 다소 부족한 면이 존재할 수밖에 없다. HTML5의 콘텐츠 모델은 이를 개선하기 위해 구획 콘텐츠로써 영역을 명시적으로 구분하고자 한 것이다.
🔸 구문 콘텐츠
abbr,audio,b,br,button...
구문 콘텐츠(Phrasing Content)는 텍스트와 텍스트가 포함하는 마크업을 정의하는 역할을 한다. 구문 콘텐츠가 모이면 하나의 문단을 형성할 수 있다.
🔸 내장 콘텐츠
audio,img,picture,video,svg...
내장 콘텐츠(Embedded Content)는 다른 리소스를 가져오거나, 콘텐츠를 문서에 삽입하는 역할을 한다.
🔸 인터랙티브 콘텐츠
a,button,iframe,textarea,label...
인터랙티브 콘텐츠(Interactive Content)는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함한다.
😮 하나의 태그, 여러 소속!
지금까지 살펴본 콘텐츠 모델의 7개 카테고리를 보면 알 수 있듯이 한 태그가 반드시 하나의 카테고리에만 속하는 것은 아니다. a 태그만 봐도 플로우 콘텐츠이면서 동시에 인터랙티브 콘텐츠이다. 그러므로 콘텐츠 모델 관점에서 a 태그는 body 영역에 속할 수 있고, 사용자와 상호작용을 하기 위해 설계된 태그라는 의미를 파악할 수 있다.
🚩 시맨틱 마크업을 위한 가이드, 콘텐츠 모델!
콘텐츠 모델의 궁극적인 의의는 각각의 태그가 내포하는 의미를 파악할 수 있다는 것이다. 그러므로 HTML 구조를 설계할 때 먼저 콘텐츠 모델에 근거하여 각 태그가 어떤 의미를 가지는지 파악한다면 웹 접근성이 높은 페이지를 만드는 데 큰 도움이 될 것이다.
🙏 출처
https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories
https://webdir.tistory.com/310
