시맨틱 마크업

시맨틱 마크업은 글 앞뒤에 붙이는 표시인 태그로 웹 페이지의 각 부분이 무엇인지를 알려 줍니다. 굵게 보일 글에 굵은 글씨 태그를 다는 대신 「제목」이나 「강조」 같은 뜻을 가진 태그를 고릅니다. 그러면 화면을 못 보는 사용자에게 글을 소리로 읽어 주는 프로그램과 검색 엔진도 페이지의 짜임을 알아봅니다.

상세

이삿짐을 쌀 때 상자 겉에 「부엌」「책」「겨울옷」이라고 적어 둡니다. 옮기는 사람은 상자를 열어 보지 않고도 어느 방에 둘지 압니다. 상자 색깔로만 구분해 두면 그 색이 무슨 뜻인지 아는 사람만 옮길 수 있습니다. 웹 페이지에도 이런 이름표를 다는 방법이 있습니다.

HTML(HyperText Markup Language)은 웹 페이지를 쓰는 언어입니다. 글 앞뒤에 <p> 와 </p> 같은 표시를 붙여 「여기부터 여기까지가 문단」이라고 알립니다. 이 표시를 태그라 합니다.

글에 태그를 다는 일은 마크업이라 합니다. 시맨틱은 「뜻의」라는 말입니다. 시맨틱 마크업은 글이 어떻게 보일지가 아니라 무엇인지에 맞춰 태그를 고르는 일입니다.

페이지 제목에는 제목 태그 <h1> 을 씁니다. 누르는 단추에는 <button> 을 씁니다. 앞의 이삿짐에 비기면 이런 태그가 상자 겉의 「부엌」 같은 이름표입니다. 글자 크기나 색으로만 제목을 알아보게 하는 것은 상자 색깔로 구분하는 일과 같습니다.

뜻이 있는 태그와 뜻이 없는 태그

HTML 태그 가운데 <div> 와 <span> 은 뜻이 없습니다. 글을 한 덩어리로 묶기만 하고 그 덩어리가 무엇인지는 말하지 않습니다. 묶은 덩어리에 모양을 입히려고 씁니다.

모양은 CSS(Cascading Style Sheets)가 맡습니다. CSS 는 글자 크기와 색, 배치를 적는 언어입니다. CSS 로 꾸미면 <div> 하나로 제목도, 메뉴도, 단추도 똑같이 그려 낼 수 있습니다.

그래서 페이지 전체를 <div> 로만 짜는 일이 흔합니다. 이런 마크업을 div 수프라고 부릅니다. 눈으로 보면 멀쩡하지만, 태그만 읽는 프로그램에게는 이름 없는 상자 더미입니다.

같은 페이지 윗부분을 두 가지로 짜 보겠습니다. 먼저 <div> 로만 짠 판입니다.

<div class="top">
  <div class="menu">…</div>
</div>
<div class="body">
  <div class="title">공지</div>
  <div class="text">…</div>
</div>

class 는 CSS 가 모양을 입힐 대상을 고르려고 붙이는 이름입니다. menu 나 title 은 사람이 읽으라고 지은 이름입니다. 브라우저는 이 이름에서 뜻을 읽지 않습니다.

다음은 뜻에 맞는 태그로 짠 판입니다.

<header>
  <nav>…</nav>
</header>
<main>
  <h1>공지</h1>
  <p>…</p>
</main>

이 판에서는 태그 이름이 곧 뜻입니다. <nav> 는 사이트 안을 옮겨 다니는 메뉴입니다. <main> 은 이 페이지의 본문입니다. <h1> 은 가장 큰 제목입니다. 화면에는 두 판이 똑같이 보이도록 꾸밀 수 있습니다.

글자 하나하나를 꾸밀 때도 같은 구별이 있습니다. <b> 와 <strong> 은 둘 다 기본으로 굵게 보입니다. 그중 「중요하다」는 뜻을 싣는 것은 <strong> 뿐입니다.

브라우저가 태그를 읽는 법

브라우저는 페이지를 읽어 들이면서 태그마다 역할을 하나씩 매깁니다. <button> 은 「버튼」, <nav> 는 「탐색」, <h1> 은 「1단계 제목」입니다. <div> 에는 매길 역할이 없습니다.

화면을 못 보거나 마우스를 못 쓰는 사람도 페이지를 쓸 수 있게 만드는 일을 접근성이라 합니다. 브라우저가 매긴 역할은 이 일에 쓰입니다.

브라우저는 매긴 역할만 모아 나무 꼴 구조를 따로 만듭니다. 이것이 접근성 트리입니다. 화면을 그리는 데는 쓰지 않습니다. 다른 프로그램이 페이지를 읽어 가라고 내주는 구조입니다.

이 구조를 읽는 대표 프로그램이 스크린 리더입니다. 스크린 리더는 화면의 글을 소리로 읽어 주는 프로그램입니다. 앞을 못 보는 사용자가 씁니다. 역할을 보고 「버튼」「제목」 같은 말을 붙여 읽습니다.

같은 「저장」 글자를 두 태그로 적으면 차이가 보입니다. 오른쪽 주석은 브라우저가 매기는 역할입니다.

<div>저장</div>       <!-- 역할 없음 -->
<button>저장</button> <!-- 역할: 버튼 -->

스크린 리더는 윗줄을 그냥 「저장」이라는 글로 읽습니다. 사용자는 그것을 누를 수 있는지 알 길이 없습니다.

맞는 태그가 덤으로 주는 동작

접근성은 화면을 못 보거나 마우스를 못 쓰는 사람도 페이지를 쓸 수 있게 하는 일입니다. 시맨틱 마크업은 역할만 알려서 접근성을 돕는 것이 아닙니다. 그 역할에 맞는 동작도 같이 따라옵니다.

키보드 입력을 받을 차례가 된 부품을 포커스를 받았다고 합니다. <button> 은 Tab 키로 포커스를 받습니다. 포커스를 받은 뒤에는 Enter 키나 스페이스바로 눌립니다. 브라우저가 코드 한 줄 없이 해 줍니다.

<div> 로 만든 단추는 이것을 하나도 안 합니다. 마우스로만 눌립니다. 키보드만 쓰는 사용자는 닿지도 못합니다. 같은 동작을 내려면 자바스크립트 코드를 손으로 붙여야 합니다.

페이지의 큰 구획을 알리는 태그

페이지는 대개 몇 구획으로 나뉩니다. 맨 위의 머리, 메뉴, 본문, 곁에 붙는 덧붙임, 맨 아래 꼬리입니다. HTML 에는 이 구획마다 태그가 있습니다.

스크린 리더는 이런 구획을 랜드마크로 다룹니다. 구획 사이를 건너뛰는 단축키가 있어서, 사용자는 메뉴를 다 듣지 않고 본문으로 바로 갑니다.

구획은 서로를 품습니다. 아래 그림은 흔한 블로그 글 페이지 하나입니다. 머리 안에는 메뉴가 듭니다. 본문 안에는 글 한 편이 듭니다. 그 글 안에 다시 묶음이 듭니다.

flowchart TD
    subgraph P["페이지"]
        subgraph H["header · 머리"]
            N["nav · 메뉴"]
        end
        subgraph M["main · 본문"]
            subgraph A["article · 글 한 편"]
                T["h1 · 글 제목"]
                S1["section · 묶음 1"]
                S2["section · 묶음 2"]
            end
        end
        AS["aside · 관련 글"]
        F["footer · 꼬리"]
    end
    H ~~~ M ~~~ AS ~~~ F

제목 단계는 글자 크기가 아니라 짜임

제목 태그는 <h1> 부터 <h6> 까지 여섯 단계입니다. 숫자는 글의 짜임에서 몇 번째 단계인지를 말합니다. 큰 제목 아래 작은 제목이 듭니다. 그 아래에는 더 작은 제목이 듭니다.

스크린 리더 사용자는 제목만 골라 듣고 원하는 곳으로 건너뜁니다. 책의 목차를 훑는 것과 같습니다. 글씨를 작게 보이려고 <h4> 를 고르면 이 목차가 뒤틀립니다. 크기는 CSS 로 맞춥니다. 숫자는 짜임대로 매깁니다.

태그를 단서로 쓰는 다른 프로그램

검색 엔진은 페이지를 긁어 가서 무엇을 다루는 페이지인지 가려 둡니다. 이때 태그를 단서로 씁니다. 제목 태그에 든 글은 페이지의 주제를 알려 주는 단서가 됩니다. 얼마나 무게를 두는지는 검색 엔진마다 다릅니다. 그 무게는 밖에 드러나지 않습니다.

브라우저의 읽기 모드처럼 광고와 메뉴를 걷고 본문만 보여 주는 기능도 있습니다. 이런 기능은 <main> 이나 <article> 이 있으면 본문을 찾기 쉽습니다.

사람에게도 덕이 있습니다. 코드를 처음 여는 개발자는 <nav> 를 보면 바로 메뉴인 줄 압니다. <div class="menu"> 는 클래스 이름을 잘 지었을 때만 그렇습니다.

맞는 태그가 없을 때

모든 부품에 맞는 태그가 있지는 않습니다. 탭 메뉴처럼 HTML 에 태그가 없는 부품도 많습니다.

이럴 때 ARIA(Accessible Rich Internet Applications)를 씁니다. 태그에 role="tab" 같은 속성을 달아 역할을 직접 적는 방식입니다. ARIA 는 역할을 알리기만 합니다. 키보드 동작은 따로 만들어야 합니다.

그래서 고르는 순서가 있습니다. 뜻이 맞는 태그가 있으면 그 태그를 씁니다. 없을 때만 ARIA 로 역할을 적습니다.

모양만 내려고 묶을 때는 <div> 와 <span> 이 맞는 태그입니다. 뜻 없는 덩어리에 뜻 있는 태그를 달면 오히려 프로그램을 속입니다. 들여쓰기를 내려고 인용문 태그 <blockquote> 를 쓰면, 스크린 리더는 거기를 인용문이라고 읽습니다.

쓰는 쪽이 치르는 비용

태그마다 뜻을 알아야 합니다. <section> 과 <article> 처럼 경계가 흐린 짝도 있습니다. 같은 화면을 두고 사람마다 고르는 태그가 갈리기도 합니다.

뜻이 있는 태그에는 기본 모양이 붙어 옵니다. <h1> 은 크고 굵은 글씨로, <button> 은 테두리 있는 단추로 그려집니다. 디자인이 따로 정해져 있으면 이 기본 모양을 CSS 로 지우는 일부터 합니다.

지우는 일은 스타일 규칙 한 벌로 끝납니다. 반대로 <div> 단추에 키보드 동작을 붙이는 코드는 단추마다 따라다닙니다.

HTML 밖의 마크업

뜻과 모양을 가르는 생각은 HTML 에만 있지 않습니다. 마크다운에서 줄 앞의 # 은 글자 크기가 아니라 「제목」이라는 뜻을 적습니다. 그 제목을 어떤 크기로 그릴지는 마크다운을 화면에 옮기는 프로그램이 정합니다.

관련 항목

시맨틱 마크업이 쓰는 언어와 표준

HTML · HTML Living Standard · CSS · 마크업 · 마크업 언어 · 태그 · 마크다운 · XML

뜻을 싣는 HTML 태그

제목 태그 · nav 요소 · main 요소 · article 요소 · section 요소 · button 요소 · label 요소

시맨틱 마크업을 읽어 가는 프로그램

스크린 리더 · 접근성 트리 · 검색 엔진 · 웹 크롤러 · 읽기 모드

시맨틱 마크업이 지키려는 성질

접근성 · WCAG · 키보드 접근성 · 검색 엔진 최적화 · 관심사 분리

맞는 태그가 없을 때 대신 쓰는 수단

ARIA · role · aria-label · tabindex · 랜드마크

시맨틱 마크업과 맞서는 마크업 방식

div 수프 · 프레젠테이셔널 마크업 · 테이블 레이아웃 · font 태그

시맨틱 마크업 위에 뜻을 더 얹는 방식

구조화된 데이터 · Schema.org · 마이크로데이터 · JSON-LD · RDFa

시맨틱이라는 이름이 겹치는 다른 용어

시맨틱 웹 · 시맨틱 검색 · 시맨틱 버저닝 · 온톨로지