HTML은 구조적인 문서를 만든다.

HTML과 콘텐트

웹이 정보의 공유를 원활하게 하기 위해 만들어졌다는 점 때문에, HTML을 비롯하여 웹 브라우저에서 구동되는 마크업 언어들은 기본적으로 텍스트 포맷으로 작성된다. 이는 MS Word나 한글 파일과 같은 바이너리 형식과는 달리 대단히 개방적이기 때문에 어떤 플랫폼이나 프로그램에서도 읽어들이기 쉽다는 장점을 갖고 있다. 물론, 브라우저라는 해석기가 이 HTML 파일을 좀 더 보기 좋게 담아주기는 하지만, HTML 파일은 기본적으로 간단한 텍스트 편집기 만으로도 그 내용을 읽어낼 수 있다는 뜻이다.

웹 사이트에서 콘텐트란 말 그대로 페이지에 담아야할 내용이다. 이는 문서 형태를 정하는 서식이나 문서에 관한 정보를 말하는 것이 아니라, 사용자에게 전달되어야할 내용 그 자체를 말하는 것이다. 이러한 콘텐트의 형식에는 텍스트나 이미지 등이 있으며 이를 좀 더 세분화하면 일반 텍스트와 표, 이미지, 멀티미디어 등이 있겠다.

HTML 문서는 이런 콘텐트를 좀 더 구조적으로 작성할 수 있도록 만들어진 언어인 것이다. 따라서 콘텐트를 직접 담는 부분(Body)이 아닌 곳에서는 문서 자체에 대한 정보나, 콘텐트의 서식에 관한 것들을 지정할 수 있도록 만들어져있다. 똑같은 문서를 작성하는 도구지만 HTML이 MS Word와 다른 이유는 파일 포맷만이 아니라, 그것이 포함하는 정보의 내용이 다르기 때문이다.

Word와 같은 워드프로세서 프로그램들은 일반적으로 콘텐트만이 아니라 콘텐트의 형태를 정의하는 서식 정보를 함께 포함하여 파일로 저장하게 된다. 그러나 HTML은 기본적으로 콘텐트의 내용만을 저장하며, 서식 정보 등은 외부 파일을 참조하도록 만들어져 있는 것이다. 만약 HTML을 Word와 같은 도구로 사용해 본다면 그 기능에 얼마나 제약이 있는지 쉽게 알 수 있을 것이다.

물론, 낮은 버전의 HTML에서는 서식을 지정하는 속성을 태그에 사용할 수 있도록 하기도 했다. 하지만 그것은 W3C에서 표준안을 제작할 때 의도했던 바라고 하기 보다는, 좀 더 새로운 방향으로 확장을 꾀했던 브라우저 제조사들의 무분별한 확대 해석 때문이라고 할 수 있다. 실제로 서식을 직접적으로 지정하는 몇몇 태그들은 W3C의 아이디어가 아니라 브라우저 제조사에서 만들어졌으며, 이를 사용자들이 더 많이 사용하게 되면서 표준안에 포함되게 되었던 경우라 할 수 있다.

이렇게 탄생한 태그나 속성들 때문에, 문서를 제작한 사람들은 처음의 의도와는 다르게 브라우저마다 문서가 다르게 보이는 결과에 부딪힐 수밖에 없었다. 새로운 기술과 시장 지배에 대한 욕심이 오히려 사용자의 선택권을 제한하거나 사용성을 떨어뜨려 버린 것이다. 실제로 현존하는 여러 브라우저들은 똑같은 HTML 문서를 처리하는데 서로 다른 방법을 사용하고 있다.

문서가 구조적이어야 하는 이유

문서 제목은 그 문서가 담고 있는 정보가 어떤 내용인지를 독자가 손쉽게 파악할 수 있도록 도와준다. 일반적으로 대제목이 소제목보다 크게 표시되는 이유는 강조의 정도에 따라 어떤 것이 더 많은 부분을 포함하고 있는지를 관습적으로 설명할 수 있기 때문이다. 이런 이유에서 소제목이 대제목을 포함하는 것은 말이 안되는 일이 된다.

이렇듯 상위 요소와 하위 요소의 등급을 확실히 하고, 해당 요소에 포함되는 내용을 명확하게 구분해서 정리하는 것이 바로 구조화라 할 수 있다. 문서 구조화를 통해서 얻을 수 있는 이점은 무엇이 있을까?

인식의 용이

앞서 설명한 바와 같이 내용의 상하 등급이 분명하면, 이를 읽는 사람들도 좀 더 손쉽게 내용을 파악할 수 있게된다. 내용과 내용 사이의 구별이 쉬워지는 것은 말할 것도 없고, 어떤 것이 중요한지 아닌지를 더 알기 쉬워지는 것이다.

재활용 가능한 데이터로써 콘텐트

웹 사이트의 콘텐트란 파일 형식의 데이터로 볼 수도 있다. 이는 HTML 파일이 단순히 문서 형태로 사람의 눈에 인지되기 위한 존재만이 아니라, 가공을 통하여 프로그램 간에 주고 받을 수 있는 데이터로 사용될 수도 있는 것이다. 이 때 파일 내의 정보가 잘 짜여진 구조를 가지고 있다면, 단순히 파일 단위의 데이터가 아니라 태그를 통해 구별할 수 있는 작은 단위의 정보를 활용할 수도 있게 될 것이다.

검색의 효율성 제고

우리가 검색 엔진을 이용할 때에는 특정 키워드나 몇 개의 키워드를 조합하여 결과를 얻곤 한다. 많은 검색엔진이 그렇지만 이 때 나오는 검색 결과를 보다보면 그 키워드가 페이지의 제목인 경우보다 내용 중의 일부분, 그것도 문장 중에 연속된 형태로 나오는 경우보다 떨어져있는 단어를 각각 찾아주는 경우를 더 많이 볼 수 있다. 이는 검색 엔진이 문서 전체를 검색해서 해당하는 키워드가 있는 경우를 모두 찾아내기 때문이다.

만약 검색엔진이 페이지를 처음부터 끝까지 찾는 것이 아니라 제목 중심으로 검색을 해준다면 어떨까? 앞서 이야기한 바와 같이, 문서의 제목이란 문서가 담고 있는 내용을 압축적으로 전달해준다. 문서의 시작점부터 끝점까지를 다 읽는 것과, 제목만 먼저 읽는 것 중에 무엇이 더 빠를지는 명확하다. 어쩌면, 해당 키워드와 비슷한 의미의 단어가 사용된 제목을 찾아줄 여유도 생기지 않을까?

구조를 만드는 방법

꼭 HTML 형식이 아니라고 하더라도 여러분은 많은 문서를 작성하고 있을 것이다. 아마 Word 프로그램으로 문서를 만든다고 생각하면 이해가 쉬울 것이다. 처음부터 끝까지 똑같은 글자 크기로 줄한번 바꾸지 않고 쓰는 문서란 이미 다른 사람에게 회람할 수 있는 형태가 아닐 것이다. 마찬가지로, 문단의 내용이 변경될 때는 단락을 바꾸고, 내용이 다른 것을 다루기 시작할 때는 다음 내용의 제목을 먼저 써주고 다음 단락을 쓰면 된다.

이렇게 문서를 작성하다보면 우리가 일반적으로 트리 구조라고 부르는 형태가 전체적으로 만들어진다. 문서 전체를 대표하는 모든 내용은 상위 요소를 가지게 되는 하위 요소의 형태가 되는 것이다. 이렇게 문서를 구조화 하는 형태를 DOM(Document Object Model)이라고도 하며 이를 잘 지키는 것은 스타일시트나 스크립트를 활용할 때에도 매우 중요한 역할을 한다.

이를 그림으로 표현하면 위와 같은 형태가 되며, 이를 태그를 이용하면 아래 그림처럼 만들 수 있다. 내용 칸에는 필요에 따라 다양한 태그를 이용하여 여러 내용을 넣을 수도 있고, 내용간의 구별을 위해 구분자를 사용할 수도 있다.

구체적인 내용을 다루는 태그 안에는 강조나 첨삭, 설명을 위한 태그들이 사용될 수 있으며 이는 사용자가 내용을 이해하는데 도움을 줄 수 있다. 필요한 속성을 적절히 사용하는 것 역시 마찬가지로 내용의 이해에 도움이 된다.

태그의 종류

HTML 태그는 그 출력 형태나 사용 방법 등에 따라서 몇가지 종류가 있다. 우선 h,p,div,address, ul, ol, li, table 등의 태그는 block element로 구분된다. Block element란 스스로가 하나의 블록을 구성해서 그 태그가 끝나는 지점에서 줄이 바뀌게 되는 것을 뜻한다.

반대로 img, a, strong, em, span, ins, del 등의 태그는 inline element로 구분할 수 있다. 이는 다른 블록 속에서 존재하며 문장 속에서 그 일부를 구성하게 된다. 이 태그들은 사용했을 경우 그 끝점에서 줄이 바뀌지 않으며 일반적으로 다른 내용과 연속성을 갖는다.

이 때 br(break)이라는 태그는 block이나 inline element 모두에 속하지 않는데, 이 태그는 예외적으로 스스로 블록이 되지도 않으면서 줄을 바꿔주는 역할을 하기 때문이다.

또 태그가 독립적으로 사용되는지 아닌지에 따라 구별하는 방법도 있다. div, p, h, table 등의 태그처럼 여는 태그와 닫는 태그 사이에 콘텐트가 들어가게 되는 형태를 non-empty 태그라고 하며, img나 input 등의 태그처럼 여는 태그와 닫는 태그 사이에 콘텐트가 들어가지 않고 스스로가 콘텐트 중 하나가 되는 형태를 empty 태그라고 한다.

태그 바로 쓰기

HTML은 문서 내용에 의미를 부여하는 태그를 포함하고 있다. 태그는 콘텐트의 성질을 정의하는 용도로 만들어진 것이다. 태그는 그 스스로가 감싸고 있는 콘텐트가 어떤 역할을 하는지, 그리고 다른 태그로 싸여있는 콘텐트와 어떤 관계가 있는지를 나타낸다. 그동안 그 목적에 어긋나게 사용해왔던 table 역시 행과 열을 가진 데이터의 집합을 나타낼 수 있도록 만들어진 태그인 것이다. 그러면 콘텐트에 비교적 많이 사용되는 태그와 그 용도를 알아보자.

h(heading)

제목을 표시한다. h1부터 h6까지 사용할 수 있으며 숫자가 낮을 수록 더 큰 제목임을 뜻한다.

p(paragraph)

콘텐트 중에서 문단으로 묶인 내용을 나타낸다.

ol(ordered list), ul(unordered list)

순서가 있거나 없는 목록을 나타낸다. 목록은 여러 아이템의 집합이며 각 아이템들은 li(list item)라는 태그를 이용해 나타낼 수 있다.

dl(definition list)

정의 목록이란 사전에서 흔히 볼 수 있는 것처럼, 용어와 그 정의를 나란히 표시하기 위해 사용한다. 용어는 dt(definition term) 태그로, 이 용어의 설명은 dd(definition data)로 나타낼 수 있다.

table

행(tr:table row)과 열이 있는 표를 나타내며, 각 행과 열의 제목(th:table header)값에 해당하는 데이터를 나열할 때 사용한다. 표를 올바르게 사용하는 것은 매우 중요한데, 그것은 테이블이 데이터를 순차적으로 나열하기도 하지만 셀(td:table data)의 병합 등으로 인해 데이터가 순서와는 다르게 출력되기도 하기 때문이다.

object

텍스트가 아닌 객체를 문서에 삽입하기 위해 사용한다. 음악, 동영상, 플래시 등 멀티미디어 요소를 문서에 삽입하기 위한 용도로 주로 사용되며, param(parameter) 태그를 이용하여 삽입된 멀티미디어 요소에 변수를 제공하거나 상태를 제어할 수 있다.

img(image)

문서 내에 그림을 넣는 용도로 사용한다.

a(anchor)

HTML의 핵심적인 요소 중 하나인 하이퍼링크를 만들어주는 태그이다. 이 태그를 통해서 문서는 다른 문서와의 연결점을 가질 수 있다.

blockquote, q(quote)

이 두 개의 태그는 인용문을 표시하기 위해 사용한다. blockquote는 장문을 인용하여 인용문 자체가 하나의 문단을 구성할 때 사용할 수 있고, q 태그는 문단 내에서 짧은 인용문을 삽입하기 위해 사용할 수 있다.

em, strong

내용을 강조하기 위해 사용한다. 드러나는 형태적으로 보면 i, b 태그와 비슷하지만 그 의미에서는 차이가 있다. i나 b 태그가 글자를 이탤릭으로 만들거나 굵게 만들기 위해 사용하는 것이라면 em과 strong은 내용을 강조하거나 매우 강조하는 용도로 사용하는 것이다. 이는 이 태그들이 형태적 제어를 위한 태그가 아니라 의미적 강조를 하기 위한 태그임을 뜻하는 것이다.

acronym, abbr(abbreviation)

이 두개의 태그는 각각 이니셜과 줄임말을 표현하기 위해 사용한다. 예를 들어 UK라는 이니셜은 UK으로 표시하면, 그 이니셜이 어떤 뜻인지를 표현할 수 있고, en 처럼 관습적으로 줄여쓰는 말을 표시하기 위해서는 abbr 태그를 사용할 수 있다. 이를 통해 해당 단어를 처음 보는 사람도 그것이 무슨 뜻인지를 이해할 수 있도록 내용을 작성할 수 있는 것이다.

이 외에도 주소를 나타내는 address 태그나, 문장의 일부가 삭제되었음을 뜻하는 del, 삽입되었음을 뜻하는 ins 태그 등이 사용될 수 있다.

div와 span

사람들이 웹 표준 마크업에 대해서 오해를 하는 것 중 하나가 table 태그를 쓰지 않고 div(division) 태그를 사용하면 모두 웹 표준을 지킨 사이트라고 여긴다는 점이다. 예전에는 div라는 태그는 마치 포토샵의 레이어처럼 문서의 내용과는 관계없이 특정한 위치에 일부 콘텐트를 넣기 위해 사용하는 태그라는 오해를 많이 받았다. 이는 Netscape에서 지원하던 layer라는 태그나 일부 에디터에서 손쉽게 사용할 수 있었던 CSS의 absolute position 속성에 영향을 받은 듯한데, 실제로 div라는 태그의 용법은 그렇지 않다.

division이라는 이름에서도 알 수 있듯이, div 태그는 영역을 분할하기 위한 용도로 사용된다. 앞서 설명했던 많은 태그와는 달리 div는 콘텐트의 역할이나 내용을 설명하는 것이 아니라, 여러 콘텐트를 묶거나 서로 분리해주는 역할을 한다. 이는 콘텐트를 그룹으로 묶어서 좀 더 체계적으로 관리할 수 있도록 해줄 뿐만 아니라, CSS 등에서 디자인을 손쉽게 적용할 수 있도록 도와주기도 한다.

span 태그 역시 마찬가지로, 콘텐트를 설명하기 보다는 일반적으로 사용하게 되는 태그로 적용하기 어려운 디자인 등을 좀 더 확장성 있게 사용할 수 있도록 도와주는 역할을 한다. 예를 들어 어떤 문장 속에 있는 특정 단어가 강조될 필요는 없지만 미적인 이유로 다른 형태를 띠어야 할 경우, span 태그를 사용할 수 있다. span은 이름 그대로 문서 구조상에서 특정한 의미를 부여받지 않지만 별도의 처리가 필요한 경우를 위한 확장용 태그라 할 수 있다.

테이블 알고 쓰기

앞서 태그 설명에서도 언급했지만, 표를 만드는 일은 꽤 중요하다. 왜냐하면 데이터를 인식하는 차원에서도 그렇지만 접근성의 측면에서도 어떤 정보가 있느냐 없느냐에 따라 내용을 파악할 수 있는 형태가 크게 달라질 수 있기 때문이다. 그렇다면 표에서 제공해야할 정보와 이를 올바르게 표시하는 방법을 알아보자.

<table summary="테이블 내용요약">
    <caption>테이블 제목</caption>
    <thead>
        <tr>
            <th scope="col">헤딩1</th>
            <th scope="col">헤딩2</th>
            <th scope="col">헤딩3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">헤딩4</th>
            <td>데이터 1</td>
            <td>데이터 2</td>
        </tr>
        <tr>
            <th scope="row">헤딩5</th>
            <td>데이터 3</td>
            <td>데이터 4</td>
        </tr>
    </tbody>
</table>

이 코드는 3열 3행을 나타내는 일반적인 형태의 표를 표시한다. 흔히 쓰는 방식과 다른 것이라면 summary와 caption이 제공되고 thead, tbody, th 등 표 안에서 어떤 역할을 하는 셀과 그 그룹을 분리하고 있다는 점이다. summary는 데이터테이블 전체 내용을 간략하게 요약하는 용도로 사용하고 caption은 테이블의 제목을 넣어줄 수 있는 태그이다. 이 예제처럼 셀의 모든 값이 동등한 데이터가 아니라 어떤 것은 그 열을, 혹은 그 행을 대표하고 있는 값이라는 것을 분명히 하면 해당하는 데이터가 어떤 값에 해당하는 것인지를 쉽게 파악할 수 있게된다. 또한 thead와 tbody처럼 헤딩 그룹과 데이터 그룹을 묶어주면 1페이지를 넘어가는 표의 인쇄시에도 각 헤더를 찾아볼 수 있게 출력된다. 조금만 더 신경써서 적절한 태그와 적절한 속성을 사용한다면 보다 많은 사람들이 보다 많은 상황에서 쉽게 콘텐트를 파악할 수 있게 되는 것이다.

웹에 집 짓기

4월호에서 언급한 적이 있지만, CSS나 Javascript를 지원하지 않는 브라우저는 있어도 HTML을 지원하지 않는 브라우저는 없다. HTML만 잘 작성해도 사용자가 콘텐트를 인식하고 이해하는데 무리가 적다는 뜻이다. 잘 만든 HTML 문서가 가독성 높은 디자인만큼 중요해지는 것은 바로 이런 이유 때문이고, 하나의 웹 페이지가 더 많은 방향으로 확장해나갈 수 있는 가능성 역시 여기에 있다 하겠다.
위에서 부터 계속 강조하고 있는 것이지만, HTML은 문서의 구조와 내용을 담는 도구이다. 이는 문서가 시각적으로 어떤 형태를 띠게될지를 HTML 문서에서 굳이 다룰 필요가 없다는 점이다. 흔히 범하게 되는 오류가 형태 제어를 위한 태그나 속성을 습관적으로 사용하는 것이다.

font라는 태그는 글자의 모양을 제어하기 위한 수단으로만 쓰이는 태그이다. 글자의 모양은 CSS로도 제어할 수 있으며, 이 태그와 해당 속성을 사용하는 것보다 훨씬 더 세밀하게 조정이 가능하다. 마찬가지로 앞에서 말한 i나 b, 혹은 u나 s 같은 태그들 역시 형태만을 제어하는 태그이므로 사용하지 않는 것이 좋다. XHTML 1.0이 나온 이후에 이런 태그들은 많은 부분 배제되고 있으며, 차기 버전의 마크업 언어에서는 완전히 축출당할 가능성이 높다.

웹 사이트를 만드는 것은 집을 짓는 것과도 같다. 구조를 잘 잡고 뼈대를 잘 세워야 튼튼하고 오래가는 집이 될 수 있다. 외장이나 인테리어는 시간이 지나면 유행도 지날테고 낡아서 벗겨지거나 상하기도 할 것이라, 새로 꾸미고 싶어지는 것이 사람 마음이다. 하지만 페인트칠이 조금 벗겨진다고 해도, 그 기둥이나 지붕 같은 기본 구조에 문제가 없다면 안식처로써의 역할을 하는데는 무리가 없을 것이다. 조금 편하고 예쁘더라도 낡은 재료보다는 불편해보이고 뼈대만 있는 것 같아도 공인받는 튼튼한 재료로 집을 짓는 것이 부실공사를 피하면서도 멋진 집을 지을 수 있는 바른 방법이 아닐까.

이 글은 월간 w.e.b. 6월호에 연재된 글입니다.