[웹 퍼블리싱 01] HTML - HTML은 문서의 뼈대다, 태그의 의미부터

웹 퍼블리싱을 처음 배우던 시절, 저는 HTML을 그저 화면에 글자를 띄우는 도구쯤으로 여겼습니다. 태그가 무슨 의미를 가지든 눈에 보이는 결과만 같으면 된다고 생각했죠. 그런데 제가 만든 첫 사이트를 몇 달 뒤에 다시 열어보니, 스스로 짜놓은 구조인데도 어디가 제목이고 어디가 본문인지 한눈에 들어오지 않았습니다. 온통 똑같이 생긴 상자들만 쌓여 있었기 때문입니다. 그때 깨달았습니다. HTML은 겉모습이 아니라 문서의 뼈대를 짜는 언어라는 사실을요.

이 시리즈의 첫 편에서는 그 뼈대라는 개념부터 짚고 넘어가려 합니다. 태그 하나하나가 왜 의미를 가지는지, 그 의미가 브라우저와 검색엔진과 보조기기에 어떻게 전달되는지 이해하면, 앞으로 배울 모든 문법이 훨씬 자연스럽게 연결됩니다. 문법을 외우기 전에 태그가 존재하는 이유부터 몸에 익히는 것이 제가 겪은 시행착오를 줄이는 지름길이었습니다.

1. 태그가 의미를 가진다는 말의 뜻

HTML에서 태그는 단순히 글자를 감싸는 껍데기가 아닙니다. 각 태그는 그 안에 담긴 내용이 무엇인지를 브라우저에게 알려주는 꼬리표입니다. 제목을 뜻하는 태그로 감싼 문장은 브라우저에게 이것이 제목이라고 선언하는 것이고, 문단을 뜻하는 태그로 감싼 문장은 이것이 하나의 문단이라고 알리는 것입니다. 겉으로 보이는 크기나 굵기는 그다음 문제입니다.

이렇게 내용의 성격을 밝히는 태그를 우리는 의미론적 태그, 다른 말로 시맨틱 태그라고 부릅니다. 의미가 있다는 것은 곧 기계가 그 뜻을 해석할 수 있다는 말입니다. 사람이 눈으로 보고 저건 제목이겠거니 짐작하는 대신, 브라우저와 검색엔진이 태그만 보고도 이것이 제목이라고 확정할 수 있게 되는 것이죠.

제가 초보 시절 저지른 가장 큰 실수는 모든 것을 의미 없는 상자 태그로만 채운 것이었습니다. 화면에는 멀쩡하게 보였지만, 그 문서는 기계 입장에서 아무 의미도 없는 글자 덩어리였습니다. 제목도 목록도 강조도 전부 똑같은 상자였으니까요. 겉모습은 스타일로 얼마든지 흉내 낼 수 있었지만, 잃어버린 의미는 스타일로 되살릴 수 없었습니다.

의미가 담긴 태그를 쓰면 문서 자체가 하나의 설명서가 됩니다. 코드를 처음 보는 사람도 태그 이름만 훑으면 여기가 머리글이고 여기가 본문이며 여기가 바닥글이라는 것을 알 수 있습니다. 저는 이 점을 체득하고 나서부터 남이 짠 코드를 읽는 속도가 눈에 띄게 빨라졌습니다.

물론 눈에 보이는 화면을 정확히 그려내는 것도 중요합니다. 하지만 그 화면은 CSS라는 다른 언어가 맡는 영역입니다. HTML의 임무는 오직 내용에 올바른 의미를 부여하는 것, 그러니까 뼈대를 정확히 세우는 것입니다. 이 역할 분담을 처음부터 분명히 해두면 나중에 스타일을 바꿔도 구조가 흔들리지 않습니다.

정리하면, 태그를 고를 때 스스로에게 던져야 할 질문은 이것이 어떻게 보일까가 아니라 이것이 무엇인가입니다. 제목인가 문단인가 목록인가 링크인가. 이 질문에 먼저 답하고 나면 어떤 태그를 써야 할지 대부분 저절로 정해집니다.

2. 브라우저는 태그를 어떻게 읽는가

우리가 작성한 HTML 문서를 브라우저는 위에서부터 한 글자씩 읽어 내려갑니다. 이 과정에서 브라우저는 태그를 만날 때마다 문서의 구조를 나무처럼 쌓아 올립니다. 바깥 태그가 안쪽 태그를 품는 부모 자식 관계로 엮이면서, 전체 문서가 하나의 커다란 나무 구조로 정리되는 것이죠. 이 나무를 우리는 문서 객체 모델, 즉 돔이라고 부릅니다.

이 나무가 잘 세워지려면 태그를 여닫는 규칙이 정확해야 합니다. 열었으면 반드시 닫아야 하고, 안쪽에서 연 태그는 바깥 태그보다 먼저 닫아야 합니다. 제가 예전에 겪은 골치 아픈 레이아웃 붕괴는 대부분 태그 하나를 닫지 않아 나무가 엉뚱하게 자란 탓이었습니다. 브라우저는 최대한 실수를 눈감아 주지만, 그렇게 추측으로 세워진 구조는 예측하기 어렵습니다.

브라우저가 이 나무를 완성하고 나면 그 위에 CSS를 입혀 화면에 그리고, 자바스크립트가 그 나무를 붙잡아 내용을 바꾸거나 반응을 붙입니다. 다시 말해 우리가 앞으로 배울 스타일과 동작은 전부 이 나무 구조 위에서 벌어지는 일입니다. 뼈대가 튼튼해야 그 위에 무엇을 올려도 안정적인 이유가 여기에 있습니다.

그래서 저는 태그를 쓸 때 항상 이 태그가 어떤 부모 밑에 들어가고 어떤 자식을 품는지를 머릿속에 그립니다. 목록 항목은 목록 안에만 들어가야 하고, 문단 안에는 다른 문단을 넣을 수 없습니다. 이런 포함 관계의 규칙을 지키면 나무가 곧게 자라고, 어기면 브라우저가 제멋대로 가지를 쳐냅니다.

흥미로운 점은 이 나무 구조가 눈에 보이지 않는데도 웹의 거의 모든 기능을 떠받친다는 사실입니다. 화면 낭독 프로그램은 이 나무를 따라 내용을 읽어주고, 검색엔진은 이 나무를 훑어 어디가 중요한지 판단하며, 개발자 도구는 이 나무를 그대로 펼쳐 보여줍니다. 하나의 구조가 이렇게 여러 곳에서 재사용되는 것입니다.

결국 좋은 HTML이란 브라우저가 헤매지 않고 곧바로 올바른 나무를 세울 수 있는 문서입니다. 우리가 태그를 정확히 여닫고 의미에 맞게 배치하는 순간, 브라우저는 우리의 의도를 정확히 이해하고 나머지 일을 알아서 해줍니다. 그 신뢰 관계를 만드는 것이 퍼블리셔의 첫 번째 일입니다.

3. 뼈대와 살, 구조와 표현의 분리

제가 웹을 배우며 가장 늦게 이해한 원칙이 바로 구조와 표현의 분리였습니다. 초보 때는 글자를 크게 보이고 싶으면 큰 제목 태그를 쓰고, 작게 보이고 싶으면 작은 제목 태그를 썼습니다. 태그를 크기 조절 손잡이처럼 다룬 것이죠. 그 결과 제 문서의 제목 계층은 화면 크기에 따라 뒤죽박죽이 되어 있었습니다.

올바른 방식은 정반대입니다. 제목의 순서는 오직 내용의 논리에 따라 정하고, 크기는 CSS로 따로 조절합니다. 가장 큰 주제가 첫째 제목, 그 아래 소주제가 둘째 제목, 다시 그 아래가 셋째 제목입니다. 이 순서를 지키면 화면에 어떻게 보이든 문서의 목차는 언제나 반듯하게 유지됩니다.

이렇게 뼈대와 살을 나눠 두면 얻는 이점이 큽니다. 사이트 전체의 색이나 글꼴을 바꿔야 할 때 HTML은 손대지 않고 CSS만 고치면 됩니다. 반대로 문서에 새 내용을 추가할 때는 스타일 걱정 없이 구조만 신경 쓰면 됩니다. 제가 운영하던 사이트를 대대적으로 새 단장할 때, 이 분리 덕분에 뼈대는 거의 그대로 두고 껍데기만 갈아입힐 수 있었습니다.

여기서 자주 오해하는 부분이 있습니다. 굵게 보이는 글씨가 전부 중요한 내용은 아니라는 점입니다. 시각적으로 굵게만 만들고 싶다면 순수한 표현용 태그가 따로 있고, 정말로 의미상 중요한 내용이라면 중요함을 뜻하는 태그를 써야 합니다. 겉모습이 같아 보여도 담긴 의미는 전혀 다릅니다.

강조도 마찬가지입니다. 어조를 실어 말하는 강조에는 강조를 뜻하는 태그가 있고, 그저 기울여 보이고 싶을 뿐이라면 표현용 태그가 있습니다. 저는 이 둘을 구분하기 시작하면서 화면 낭독 프로그램이 제 글을 훨씬 자연스럽게 읽어준다는 것을 알게 되었습니다. 의미를 실은 강조는 소리로도 강조되기 때문입니다.

이 원칙을 한 문장으로 요약하면, HTML로는 무엇인지를 말하고 CSS로는 어떻게 보일지를 말한다는 것입니다. 이 경계선을 흐리지 않는 것만으로도 코드는 훨씬 깨끗해지고 오래갑니다. 앞으로 이어질 편들에서 다룰 개별 태그들도 전부 이 큰 원칙 아래 놓여 있습니다.

4. 의미 있는 태그가 만드는 세 가지 이득

의미를 담은 태그가 주는 첫 번째 이득은 접근성입니다. 눈으로 화면을 볼 수 없는 사용자는 화면 낭독 프로그램에 의지해 웹을 이용합니다. 이 프로그램은 우리가 세운 태그의 나무를 따라 이동하며 내용을 소리로 바꿔줍니다. 제목 태그로 표시된 곳은 제목이라고 알려주고, 목록으로 표시된 곳은 몇 개짜리 목록인지 미리 안내해 줍니다.

두 번째 이득은 검색엔진 최적화입니다. 검색엔진의 수집 로봇도 결국 우리의 태그를 읽어 문서의 주제와 구조를 파악합니다. 어디가 대표 제목이고 어떤 내용이 강조되는지를 태그로 명확히 밝혀두면, 로봇은 그 문서가 무엇을 다루는지 더 정확히 이해합니다. 제가 시맨틱 태그를 제대로 쓰기 시작한 뒤로 검색 노출이 조금씩 나아진 것도 이 때문이었다고 봅니다.

세 번째 이득은 유지보수의 편안함입니다. 몇 달 뒤에 다시 열어본 코드가 스스로 설명되는 문서라면, 어디를 고쳐야 할지 금방 찾을 수 있습니다. 반대로 의미 없는 상자만 가득한 코드는 매번 처음부터 해독해야 합니다. 저는 이 차이를 몸으로 겪은 뒤로 의미 있는 태그 쓰기를 습관으로 만들었습니다.

이 세 가지 이득은 서로 떨어져 있지 않고 하나로 이어져 있습니다. 접근성을 위해 잘 짠 구조는 대체로 검색엔진에도 유리하고, 검색엔진에 친절한 구조는 사람이 읽기에도 편합니다. 하나를 잘하면 나머지도 따라오는 선순환이 생기는 것이죠. 그래서 저는 이 셋을 따로 챙기지 않고 그냥 정직하게 의미대로 태그를 씁니다.

반대로 이 원칙을 어겼을 때의 손해도 하나로 이어집니다. 의미 없는 구조는 접근성도 떨어뜨리고 검색에도 불리하며 유지보수도 어렵게 만듭니다. 한 번의 편법이 여러 곳에서 대가를 치르게 하는 셈입니다. 눈앞의 화면만 맞추려는 유혹이 결국 더 큰 비용으로 돌아온다는 것을 저는 여러 번 경험했습니다.

그러니 태그를 선택할 때 조금 귀찮더라도 의미를 먼저 따지는 습관을 들이길 권합니다. 처음에는 어떤 태그가 어떤 의미인지 헷갈리겠지만, 이 시리즈를 따라오다 보면 자연스럽게 손에 익습니다. 뒤이어 나올 편들에서 개별 태그의 정확한 쓰임을 하나씩 풀어가겠습니다.

5. 첫 문서를 직접 짜보며

이론만 늘어놓기보다 아주 짧은 문서 하나를 직접 세워보겠습니다. 아래 예시는 특정 사이트를 흉내 낸 것이 아니라 어디에나 통하는 기본 골격입니다. 머리글과 본문과 바닥글이 어떻게 나뉘는지, 제목과 문단이 어떤 태그로 표시되는지에 주목하면서 읽어보세요.

<body>
  <header>
    <h1>나의 첫 문서</h1>
  </header>
  <main>
    <p>여기가 본문 문단입니다.</p>
  </main>
  <footer>
    <p>바닥글입니다.</p>
  </footer>
</body>

이 짧은 코드 안에 오늘 이야기한 원칙이 전부 담겨 있습니다. 머리글을 뜻하는 태그가 맨 위에서 제목을 감싸고, 본문을 뜻하는 태그가 가운데에서 문단을 품으며, 바닥글을 뜻하는 태그가 마무리를 맡습니다. 각 태그의 이름만 봐도 그 자리에 무엇이 오는지 짐작할 수 있습니다. 이것이 바로 스스로 설명되는 문서입니다.

여기서 제목을 뜻하는 태그는 문서 전체를 대표하는 가장 큰 제목이라, 한 문서에 하나만 두는 것이 원칙입니다. 그 아래로 소제목이 필요해지면 한 단계 낮은 제목 태그를 순서대로 이어 붙입니다. 이 순서를 지키는 것만으로도 문서에는 눈에 보이지 않는 목차가 생깁니다.

제가 이 골격을 처음 손으로 쳐보았을 때, 겉모습은 아무 꾸밈 없는 검은 글씨뿐이었습니다. 하지만 그 밋밋한 화면 뒤에는 이미 완결된 구조가 서 있었습니다. 스타일은 나중에 얼마든지 입힐 수 있지만, 이 구조가 없으면 무엇을 입혀도 허물어지기 쉽습니다. 뼈대가 먼저라는 말의 의미를 그때 온몸으로 이해했습니다.

많은 분들이 처음에 던지는 질문이 있습니다. 어차피 화면만 똑같으면 되는데 왜 굳이 태그의 의미까지 신경 써야 하느냐는 것이죠. 저도 똑같이 생각했습니다. 그 답을 저는 시간이 한참 지나서야 몸으로 체감했습니다. 화면은 지금 이 순간의 사용자만을 위한 것이지만, 의미가 담긴 구조는 화면을 볼 수 없는 사용자와 검색엔진, 그리고 몇 달 뒤의 나 자신까지 폭넓게 돕습니다. 눈앞의 결과 너머를 내다보는 태도가 결국 좋은 뼈대를 만듭니다.

그래서 저는 뼈대를 세울 때 지금 이게 어떻게 보이나보다 이게 나중에 어떻게 읽힐까를 더 자주 떠올립니다. 오늘의 화면은 스타일로 언제든 바꿀 수 있지만, 한 번 무너진 의미는 되살리기가 무척 어렵기 때문입니다. 뼈대를 정직하게 세워 두면 그 위에 무엇을 올리고 어떻게 꾸미든 문서는 좀처럼 흔들리지 않습니다. 이 믿음이 제가 매번 의미부터 챙기는 이유입니다.

이번 편에서는 HTML이 왜 문서의 뼈대인지, 태그가 왜 의미를 가지는지를 큰 그림으로 살펴봤습니다. 다음 편에서는 이 이야기를 더 좁혀서, 왜 모든 것을 의미 없는 상자 태그로만 채우면 안 되는지, 시맨틱 태그를 골라 쓰면 무엇이 달라지는지를 구체적인 예로 파고들겠습니다. 뼈대의 개념을 잡았으니, 이제 그 뼈대를 이루는 재료를 하나씩 만나볼 차례입니다.