골격을 세웠으니 이제 그 안을 글로 채울 차례입니다. 웹에서 가장 많이 다루는 것은 결국 텍스트입니다. 그런데 초보 시절 저는 텍스트를 담을 때 거의 문단 태그 하나와 줄바꿈만 썼습니다. 제목도 문단으로, 목록도 문단으로, 인용도 문단으로 처리했죠. 화면에는 그럴듯했지만 의미상으로는 전부 똑같은 문단이라, 문서가 밋밋한 글자 덩어리가 되어 있었습니다.
이번 편에서는 텍스트를 의미에 맞게 담는 태그들을 살펴봅니다. 제목의 계층, 문단, 강조, 인용, 코드, 그리고 목록까지. 각각을 제 뜻에 맞는 태그로 표시하면 문서에 논리적인 결이 생기고, 그 결을 기계와 사람이 함께 읽을 수 있게 됩니다.
1. 제목의 계층은 논리로 정한다
제목 태그는 여섯 단계로 나뉩니다. 가장 큰 첫째 단계부터 가장 작은 여섯째 단계까지, 숫자가 커질수록 하위 제목을 뜻합니다. 여기서 핵심은 이 숫자가 크기가 아니라 계층을 나타낸다는 점입니다. 첫째 단계는 문서 전체의 대표 제목, 둘째 단계는 그 아래 큰 절, 셋째 단계는 다시 그 아래 소절입니다.
제가 가장 자주 저지른 실수는 크게 보이고 싶어서 계층을 건너뛴 것이었습니다. 첫째 단계 다음에 곧바로 셋째 단계를 쓰는 식이었죠. 화면에서는 원하는 크기가 나왔지만, 문서의 목차에는 둘째 단계가 통째로 빠진 구멍이 생겼습니다. 계층을 건너뛰지 않는 것, 이것이 제목을 다룰 때의 첫째 규칙입니다.
크기가 마음에 들지 않으면 어떻게 할까요. 크기는 스타일로 조절합니다. 셋째 단계 제목이 너무 작아 보이면 CSS로 키우면 됩니다. 계층은 논리대로 두고 크기만 따로 바꾸는 것이죠. 이 원칙을 지키면 화면이 어떻게 보이든 문서의 목차는 언제나 반듯합니다.
대표 제목인 첫째 단계는 한 문서에 하나만 두는 것이 원칙입니다. 이 페이지가 무엇에 관한 것인지를 한마디로 밝히는 자리이기 때문입니다. 여러 개의 첫째 단계 제목이 있으면 이 페이지의 주제가 여럿이라는 혼란스러운 신호가 됩니다. 대표는 하나, 그 아래로 계층을 이어 가는 것이 깔끔합니다.
이 계층 규칙이 주는 선물은 목차입니다. 화면 낭독 프로그램 사용자는 제목만 따라 껑충껑충 이동하며 문서의 뼈대를 훑을 수 있습니다. 검색엔진도 이 계층을 읽어 어떤 주제 아래 어떤 소주제가 있는지 파악합니다. 제목을 논리대로 쌓는 것만으로 이 모든 이득이 따라옵니다.
저는 긴 글을 쓸 때 제목 계층을 먼저 목차처럼 잡고 시작합니다. 첫째 단계 아래 둘째 단계들을 죽 늘어놓고, 필요한 곳에만 셋째 단계를 답니다. 이렇게 계층을 먼저 세우면 글의 논리 구조가 눈에 보여서, 내용을 채우기도 훨씬 수월합니다.
2. 문단과 줄바꿈
본문의 기본 단위는 문단입니다. 하나의 생각 덩어리를 문단 태그로 감싸는 것이 원칙입니다. 초보 때 저는 문단을 나누는 대신 줄바꿈만 여러 번 넣어 간격을 벌렸는데, 이는 의미상 하나의 긴 문단을 억지로 벌려 놓은 것과 같았습니다. 생각이 바뀌면 문단을 나누는 것이 옳습니다.
줄바꿈 태그는 문단을 나누는 도구가 아니라 한 문단 안에서 줄만 바꾸는 도구입니다. 주소나 시처럼 줄 자체가 의미를 갖는 경우에만 씁니다. 간격을 벌리려는 목적으로 줄바꿈을 남발하면 문서 구조가 흐트러집니다. 간격은 스타일로 조절하고, 줄바꿈은 꼭 필요한 곳에만 씁니다.
문단을 적절히 나누면 읽는 사람도 편하고 기계도 편합니다. 화면 낭독 프로그램은 문단 단위로 이동할 수 있어서, 사용자가 원하는 문단으로 건너뛰기 쉬워집니다. 하나의 거대한 문단은 그런 이동을 불가능하게 만들어 처음부터 끝까지 듣게 강요합니다.
문단 안에는 문장 속 조각들을 담는 인라인 태그들이 함께 들어갑니다. 강조, 링크, 코드 같은 것들입니다. 이들은 문단의 흐름을 끊지 않고 문장 사이에 자연스럽게 녹아듭니다. 큰 덩어리인 문단 안에 작은 조각이 담기는 위계를 떠올리면 이해가 쉽습니다.
제가 문단을 나누는 기준으로 삼는 것은 하나의 문단에 하나의 중심 생각입니다. 새로운 논점으로 넘어가면 문단을 바꿉니다. 이렇게 하면 각 문단이 또렷한 초점을 가지게 되어, 읽는 사람이 흐름을 따라오기 쉬워집니다. 문단은 생각의 그릇이라는 감각을 가지면 나눔이 자연스러워집니다.
결국 문단과 줄바꿈의 구분은 의미와 표현의 구분과 맞닿아 있습니다. 문단은 의미의 단위이고, 간격은 표현의 문제입니다. 이 둘을 섞지 않는 것이 깔끔한 텍스트의 기초입니다.
3. 강조와 인용, 의미를 실은 표시
문장 속에서 특정 부분을 두드러지게 하고 싶을 때가 있습니다. 여기서 의미를 실은 태그와 순수한 표현용 태그를 구분해야 합니다. 정말로 중요한 경고나 핵심에는 중요함을 뜻하는 태그를 씁니다. 이 태그로 감싼 부분은 화면에서 굵게 보일 뿐 아니라, 화면 낭독 프로그램에서 어조가 실려 읽힙니다.
어조를 실어 강조하는 경우에는 강조를 뜻하는 태그를 씁니다. 문맥상 힘을 주어 읽어야 하는 단어에 적합합니다. 반면 그저 굵게 또는 기울여 보이고 싶을 뿐 특별한 의미가 없다면 순수 표현용 태그가 따로 있습니다. 겉모습이 비슷해도 담긴 뜻이 다르니, 의미가 있으면 의미 태그를 고르는 것이 정석입니다.
남의 말을 인용할 때도 전용 태그가 있습니다. 여러 줄에 걸친 인용 블록에는 인용 블록 태그를 쓰고, 문장 속에 짧게 끼워 넣는 인용에는 인라인 인용 태그를 씁니다. 인용 블록에는 출처를 밝히는 속성이나 출처 태그를 함께 두어 어디서 온 말인지 명시할 수 있습니다.
제가 인용 태그를 제대로 쓰기 시작한 뒤로 좋았던 점은 내 말과 남의 말이 구조적으로 구분된다는 것이었습니다. 그냥 따옴표만 쓰면 사람 눈에만 인용으로 보이지만, 인용 태그를 쓰면 기계도 이 부분이 인용임을 압니다. 표절과 인용의 경계가 코드 수준에서 분명해지는 것이죠.
코드 조각을 본문에 넣을 때는 코드 전용 태그를 씁니다. 문장 속 짧은 코드에는 인라인 코드 태그를, 여러 줄에 걸친 코드에는 공백과 줄바꿈을 그대로 보존하는 태그로 감쌉니다. 이렇게 하면 코드가 일반 문장과 구분되어 표시되고, 공백이 뭉개지지 않아 그대로 읽힙니다.
아래 예시는 강조와 인용과 코드가 한 문단 안에서 어떻게 어울리는지 보여 줍니다. 각 부분이 제 뜻에 맞는 태그로 표시된 것에 주목해 보세요.
<p>본문에서 <strong>가장 중요한 경고</strong>와 <em>미묘한 강조</em>를 구분합니다.</p>
<blockquote><p>인용된 문장입니다.</p></blockquote>
<p>인라인 코드는 <code>const x = 1;</code> 처럼 씁니다.</p>
4. 목록, 순서가 있고 없고
여러 항목을 나열할 때는 목록 태그를 씁니다. 목록은 크게 두 종류입니다. 순서가 중요하지 않은 나열에는 순서 없는 목록을, 단계나 순위처럼 순서가 의미를 갖는 나열에는 순서 있는 목록을 씁니다. 각 항목은 항목 태그로 감쌉니다. 이때 목록의 직계 자식으로는 항목 태그만 와야 합니다.
초보 때 저는 목록을 그냥 문단에 가운뎃점을 찍어 흉내 냈습니다. 화면에는 목록처럼 보였지만 기계에게는 그냥 문단이었습니다. 진짜 목록 태그를 쓰면 화면 낭독 프로그램이 몇 개짜리 목록인지 미리 알려주고, 항목 사이를 건너뛰며 이동하게 해줍니다. 이 안내는 흉내 낸 목록에서는 결코 나오지 않습니다.
목록 안에 목록을 넣어 계층을 만들 수도 있습니다. 큰 항목 아래 작은 항목들을 중첩하면 자연스러운 트리 구조가 됩니다. 이때 안쪽 목록은 바깥 항목 태그 안에 넣어야 구조가 올바릅니다. 항목 바깥에 덜렁 목록을 두면 구조가 어긋납니다.
용어와 그 설명을 짝지어 나열할 때는 또 다른 종류의 목록이 있습니다. 용어 태그와 설명 태그를 번갈아 두어 사전처럼 구성하는 방식입니다. 자주 묻는 질문과 답, 용어집, 항목별 상세 정보를 담을 때 잘 어울립니다. 저는 상품의 사양표를 이 목록으로 표현해 좋은 효과를 봤습니다.
목록을 쓸 때 흔한 실수 하나는 항목 사이 간격을 벌리려고 빈 항목을 끼워 넣는 것입니다. 간격은 스타일로 조절해야지 빈 항목으로 벌리면 화면 낭독 프로그램이 내용 없는 항목을 읽어 혼란을 줍니다. 목록의 항목 수는 실제 내용의 수와 일치해야 합니다.
결국 목록은 나열이라는 의미를 코드로 명시하는 장치입니다. 무언가를 나열하고 있다면 눈속임 대신 진짜 목록 태그를 쓰는 것이 옳습니다. 그래야 그 나열의 구조가 사람과 기계 모두에게 전달됩니다.
5. 텍스트를 다룰 때의 나의 기준
실전에서 텍스트를 담을 때 제가 스스로에게 던지는 질문은 늘 같습니다. 이것은 제목인가 문단인가 목록인가 인용인가. 이 질문에 답하고 나면 태그는 저절로 정해집니다. 겉으로 어떻게 보일지는 그다음에 스타일로 해결합니다. 의미를 먼저, 표현을 나중에라는 순서가 여기서도 그대로 적용됩니다.
두 번째 기준은 계층을 건너뛰지 않는 것입니다. 제목 단계도, 목록 중첩도 논리적 순서를 지킵니다. 크게 보이려고 단계를 건너뛰는 유혹을 스타일로 대신 해결하면, 문서의 숨은 목차가 온전하게 남습니다.
세 번째 기준은 눈속임을 피하는 것입니다. 가운뎃점으로 흉내 낸 목록, 따옴표로만 표시한 인용, 줄바꿈으로 벌린 가짜 문단은 모두 사람 눈만 속이고 기계는 속이지 못합니다. 진짜 의미 태그를 쓰면 사람과 기계가 같은 구조를 읽습니다.
이 기준들을 지키면 텍스트가 단순한 글자 나열을 넘어 논리적인 문서가 됩니다. 저는 이 습관을 들이고 나서 제 글이 검색에서 더 잘 잡히고, 화면 낭독 프로그램에서 더 매끄럽게 읽힌다는 것을 여러 번 확인했습니다. 텍스트를 의미로 담는 작은 정성이 큰 차이를 만든 것입니다.
물론 모든 문장을 완벽한 태그로 감쌀 필요는 없습니다. 대부분의 본문은 문단 태그로 충분합니다. 다만 제목, 목록, 인용, 코드처럼 뚜렷한 성격을 가진 부분만큼은 제 태그를 찾아 주는 것, 그 정도의 정성이면 충분히 좋은 문서가 됩니다.
텍스트를 다루다 보면 특수한 성격의 글자를 만날 때가 있습니다. 예를 들어 삭제된 내용이나 새로 추가된 내용을 표시하고 싶을 때, 줄을 그어 지운 표현과 밑줄로 더한 표현을 뜻하는 전용 태그가 따로 있습니다. 이런 태그를 쓰면 단순히 줄이 그어져 보이는 것을 넘어, 이 부분이 삭제되었다는 의미가 기계에도 전달됩니다. 개정 이력을 보여주는 문서에서 특히 유용합니다.
날짜와 시간을 표시할 때도 전용 태그가 있습니다. 사람이 읽는 표현과 별도로 기계가 읽을 표준 형식을 함께 담을 수 있어서, 검색엔진이 이 글이 언제 작성되었는지를 정확히 파악합니다. 저는 글의 작성일을 이 태그로 표시하고 나서, 검색 결과에 날짜가 더 정확히 나오는 것을 확인했습니다. 사람과 기계가 같은 정보를 각자의 방식으로 읽는 것이죠.
약어에는 그 뜻을 풀어 주는 태그가 있고, 짧은 인용에는 자동으로 따옴표가 붙는 태그가 있습니다. 이런 세밀한 태그들을 모두 외울 필요는 없지만, 이런 것이 존재한다는 사실만 알아 두면 필요할 때 찾아 쓸 수 있습니다. 텍스트를 다루는 태그의 세계는 생각보다 넓고, 대부분의 표현에는 이미 어울리는 태그가 준비되어 있습니다.
다만 여기서 균형이 필요합니다. 모든 글자를 세밀한 태그로 감싸려 들면 오히려 코드가 복잡해지고 읽기 어려워집니다. 대부분의 본문은 문단 태그로 충분하고, 제목과 목록과 인용처럼 뚜렷한 구조만 제 태그로 표시하면 됩니다. 세밀한 태그는 정말로 그 의미가 필요한 곳에만 아껴 쓰는 것이 좋습니다. 과유불급은 여기에도 통합니다.
제가 텍스트 태그를 익히며 얻은 가장 큰 깨달음은, 좋은 마크업이란 화려한 태그를 많이 쓰는 것이 아니라 각 내용에 딱 맞는 태그를 고르는 것이라는 점입니다. 제목은 제목답게, 목록은 목록답게, 인용은 인용답게 표시하면 그것으로 충분합니다. 정직하게 의미대로 담는 것, 그 단순한 원칙이 결국 가장 튼튼한 텍스트를 만듭니다.
이번 편에서는 텍스트를 의미에 맞게 담는 태그들을 두루 살펴봤습니다. 다음 편에서는 웹을 웹답게 만드는 핵심, 바로 링크와 앵커로 들어가겠습니다. 문서 안의 텍스트가 다른 문서로 이어지는 순간 비로소 웹이 되는데, 그 실을 잇는 태그가 링크입니다. 텍스트를 담았으니 이제 텍스트를 이을 차례입니다.