2011. 4. 18. 02:21ㆍIT/Tistory Tips
지금처럼 웹 표준이라는 개념이 널리 퍼지기 전 많은 사용자에게 HTML 태그는 원하는 페이지를 화면에 표시하기 위한 도구였다. 태그의 의미보다는 내가 원하는 화면을 표현하는 것이 더 중요한 목표였다. 웹 표준을 준수하기 위한 움직임이 활발한 지금 많은 사용자는 태그를 원래의 의미에 맞게 사용하는 것에 신경을 쓰기 시작했다.
HTML 문서에 사용하는 태그는 그 종류가 상당히 많다. HTML, XHTML 버전에 따라서 새로 생기는 태그도 있고 없어지는 태그도 있다. 예를 들어 예전엔 요소를 가운데 정렬하기 위해 center란 태그를 사용했지만, 지금은 deprecated로 선언되었다. 물론 이는 center란 태그가 제 기능을 하지 못한다는 의미는 아니다. 단지 해당 요소를 가운데 정렬할 때 center 태그가 아니라 align="center" 속성을 사용하거나 CSS에 margin, text-align:center 등의 스타일을 지정하는 것이 더 바르다는 의미다. 왜 꼭 웹 표준이니 하는 W3C의 규칙을 따라야 하느냐고 이야기할지도 모른다. 그렇지만, 이 글에서 이야기하는 것은 태그 본래의 의미를 지키는 것이기에 의미가 있다. 웹 페이지를 구성할 때 표준이 되는 HTML 태그의 의미를 따르는 것 자체가 웹 표준을 향한 첫걸음이다.
HTML 태그의 이름은 보통 그 태그의 의미와 같다. 예를 들어 앞서 이야기한 center란 태그는 이름 그대로 요소를 가운데 놓는다는 의미다. 그림을 삽입할 때 사용하는 img 태그는 image란 단어에서 왔다. label, caption, big, small, blockquote 등 많은 태그가 이름에서 그 기능을 유추할 수 있게 직관적이다. 그런데 상당히 많은 태그가 시각적으로 표현되지 않는다. 단지 특정 부분에 스타일을 지정하기 위해, 시각 장애인에게 더 정확한 정보를 제공하기 위해 존재하는 태그도 있다. 특히, 시각 장애인은 청각적으로 웹 페이지를 접하는데 태그를 의미에 맞게 사용하지 않으면 사용자가 제작자의 의도를 정확히 파악하기 어렵다.
태그를 그 의미에 맞게 사용한다는 것은 원래 용도로만 사용하는 것이라고 말할 수 있다. 예를 들어 티스토리 [환경설정] - [기타설정]에선 WYSIWYG 편집기로 글을 작성할 때 엔터키를 누르면 br 태그를 사용할지 p 태그를 사용할지 선택할 수 있다. 만약 이 설정을 바꾸지 않고 br 태그를 사용한다고 생각해보자. 작성한 문서는 다음과 같은 구조를 가진다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum nulla ac purus congue interdum. Fusce tincidunt facilisis justo, ut varius eros dictum eu. In molestie convallis egestas. Aenean sed tincidunt nisi. Sed nec orci vel nibh feugiat vulputate. Integer euismod purus eu lorem bibendum tincidunt. Integer scelerisque semper scelerisque. Pellentesque ut vestibulum ipsum. <br />
<br />
Nullam in ipsum eu augue vehicula sagittis. Nullam iaculis convallis tortor ut tristique. Etiam eros orci, faucibus quis commodo sit amet, posuere quis neque. Suspendisse erat erat, ullamcorper malesuada sagittis accumsan, eleifend et ligula. Etiam pretium odio at dolor luctus consequat. Maecenas feugiat felis non diam facilisis sagittis. Mauris laoreet eleifend posuere. Phasellus mattis malesuada justo, id fermentum ipsum tempor bibendum. Integer ut nunc nec quam tristique commodo ac viverra orci.
</div>
위와 같이 작성된 글은 시각적으론 어색함이 없다. 문단 구분도 되어 있고 글 내용도 본문을 표시하는 div 태그에 둘러싸여 있다. 그러나 div, p, br 태그의 원래 의미를 생각했을 땐 바르지만은 않다. div 태그는 구분을 위한 것이다. division이라는 div 태그의 원래 의미는 분할, 분류 정도로 해석할 수 있다. p는 문단을 의미하는 paragraph다. br은 줄을 나눈다는 line break의 의미다. 태그의 의미에 따라 윗글을 다시 살펴보면 본문 분류를 위한 div 태그에 문단 1과 문단 2가 입력되어 있는데 이는 두 개의 문단이라기보단 줄이 구분된 하나의 문단이라고 생각하는 것이 맞다. 같은 내용을 p 태그로 작성해보자.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum nulla ac purus congue interdum. Fusce tincidunt facilisis justo, ut varius eros dictum eu. In molestie convallis egestas. Aenean sed tincidunt nisi. Sed nec orci vel nibh feugiat vulputate. Integer euismod purus eu lorem bibendum tincidunt. Integer scelerisque semper scelerisque. Pellentesque ut vestibulum ipsum. </p>
<p>Nullam in ipsum eu augue vehicula sagittis. Nullam iaculis convallis tortor ut tristique. Etiam eros orci, faucibus quis commodo sit amet, posuere quis neque. Suspendisse erat erat, ullamcorper malesuada sagittis accumsan, eleifend et ligula. Etiam pretium odio at dolor luctus consequat. Maecenas feugiat felis non diam facilisis sagittis. Mauris laoreet eleifend posuere. Phasellus mattis malesuada justo, id fermentum ipsum tempor bibendum. Integer ut nunc nec quam tristique commodo ac viverra orci.</p>
</div>p 태그로 작성된 글에 {text-indent:.5em;margin-bottom:1em}이라는 CSS를 적용하면 br 태그를 적용한 글과 시각적으로 완벽히 같은 결과를 나타낼 수 있다. 그러나 태그의 의미를 살펴봤을 땐 차이가 있다. br 태그를 사용하면 시각적으로 여러 문단이지만, 실제 의미로는 하나의 문단이다. 반면, p 태그는 시각적으로도 여러 문단이고 태그의 의미 자체로도 여러 문단이다. 즉, 첫 번째 예보다 두 번째 예가 태그 본래의 의미에 맞게 사용한 글이다.
다른 예로 fieldset 태그를 살펴보자. 예전에 fieldset의 제목 구성 방식을 보고 '아, 나중에 사용해보면 좋겠다!'라고 생각했던 적이 있다. fieldset은 여러 개의 입력 폼을 하나로 묶는 기능을 한다. fieldset의 제목을 표시하는 legend 요소를 사용하면 표 제목이 표 테두리 사이에 삽입된다. 말로 설명하기 어려우니 아래 예를 보자.
표 제목이 표 테두리 가운데 위치한다. div나 table 태그를 사용했을 때와 시각적인 차이가 있으므로 눈에 띄지만, 태그의 의미를 봤을 땐 제대로 사용한 것은 아니다. 차라리 눈에 띄진 않지만, 아래처럼 div 태그를 사용한 것이 바르다.
표 제목
적용 태그
<h3>표 제목</h3>
<div>
표 내용
</div>
fieldset을 사용하지 않으면서 꼭 fieldset의 legend 요소와 같은 방식으로 표 제목을 표시하고 싶다면 아래의 예처럼 table 태그를 사용해서 구성할 수도 있다. 그러나 태그 구성 자체가 복잡하고 불필요한 요소가 많이 쓰이므로 결코 좋은 방식은 아니다.
| 표 제목 | ||
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum nulla ac purus congue interdum. Fusce tincidunt facilisis justo, ut varius eros dictum eu. In molestie convallis egestas. Aenean sed tincidunt nisi. Sed nec orci vel nibh feugiat vulputate. Integer euismod purus eu lorem bibendum tincidunt. Integer scelerisque semper scelerisque. Pellentesque ut vestibulum ipsum. Nullam in ipsum eu augue vehicula sagittis. Nullam iaculis convallis tortor ut tristique. Etiam eros orci, faucibus quis commodo sit amet, posuere quis neque. Suspendisse erat erat, ullamcorper malesuada sagittis accumsan, eleifend et ligula. Etiam pretium odio at dolor luctus consequat. Maecenas feugiat felis non diam facilisis sagittis. Mauris laoreet eleifend posuere. Phasellus mattis malesuada justo, id fermentum ipsum tempor bibendum. Integer ut nunc nec quam tristique commodo ac viverra orci. 적용 태그 <table style="margin:0 auto"> <tr><td style="border-bottom:1px solid #ccc;width:10px"> </td> <th rowspan="2" style="width:6em;text-align:center;color:teal;font-weight:700;font-size:1.3em">표 제목</th> <td style="border-bottom:1px solid #ccc"> </td></tr> <tr><td style="border-left:1px solid #ccc"> </td><td style="border-right:1px solid #ccc"> </td></tr> <tr><td colspan="3" style="border:solid #ccc;border-width:0 1px 1px;padding:0 15px 15px"> 표 내용 </td></tr> </table> | ||
반면, 태그의 의미에 맞게 사용하기 어려운 요소도 있다. abbr과 acronym이 그것이다. 원래 abbreviation은 축약어란 의미고 acronym은 머리 문자를 따서 만든 축약어(두문자어)다. 단어의 의미에서 acronym은 abbreviation에 포함된다. 그러나 태그에서 이 둘을 구분하고 WYSIWYG, NATO, NASA처럼 축약어를 한 단어로 읽는 것에 acronym을, WHO, WWW처럼 각 문자를 따로 읽는 것에 abbr을 사용하도록 했다. 그러나 이 둘은 원래가 포함관계이며 축약어를 한 단어처럼 읽지만 머리글자를 딴 것이 아니라든지 머릿글자를 따서 만들었지만 각 문자를 따로 읽는다든지 하는 예외가 있어서 구분이 모호하다. 이런 여러 가지 이유로 HTML 5에선 acronym을 없애서 축약어 사용을 abbr로 통일했다. 앞으로 어떻게 바뀔지 모르지만, 현재로선 축약어를 사용할 땐 두문자어를 구분하지 않고 abbr 태그를 사용하는 것이 유리하다.
그 외에도 짧은 인용구를 삽입할 때 단순히 인용 부호(")를 쓰지 않고 <q> 태그를 사용한다든지 숫자를 사용한 목록을 작성할 때 숫자와 br 대신 ol 태그를 사용하면 시각적인 결과물이 아니라 HTML 문서 자체에서 '아, 인용구구나.' 또는 '아, 숫자를 사용한 목록이구나.'를 알 수 있다.
q 요소 사용: <q>
네 자신을 알라.</q>라고 소크라테스가 말했다.
숫자와 br 태그로 목록 작성:
1. 아침 일찍 일어나기.
2. 밥 잘 먹기.
3. 밤에 일찍 자기.
ol, li 요소로 목록 작성: <ol>
- <li>아침 일찍 일어나기.</li>
- <li>밥 잘 먹기.</li>
- <li>밤에 일찍 자기.</li> </ol>
내 블로그에도 의미에 맞지 않게 사용한 태그가 더러 있다. 그래서 시간 날 때 예전 게시물을 찬찬히 살펴보며 수정해 나가려 한다. 티스토리 편집기 같은 WYSIWYG 방식은 편리하지만, 잘 짜인 문서를 작성하기엔 부족한 점이 많다. WYSIWYG가 아닌 WYSIWYM을 사용해야 한다고 이야기하는 것도 이런 이유다. 왜 웹 표준을 사용해야 하는가? 왜 의미에 맞게 태그를 사용해야 하는가? 라고 묻는다면 딱히 대답할 말이 생각나지 않지만, 의미에 맞는 태그를 사용하고 웹 표준을 지키면 누구나 제작자의 말을 의도대로 보고 들을 수 있다. 제작자로서도 수정, 보수가 편하다. 이 정도일 것이다. 특히 블로그가 아닌 거대 사이트라면 유지 및 보수에 드는 경제적인 측면을 살펴봐도 쉽게 답이 나올 것이다. 지금 생각나는 건 이게 전부다.