HTML의 의미와 좋은 마크업

Java나 C와 같은 개발 언어와는 다르게 HTML은 비교적 많은 이들이 쉽게 접근할 수 있는 언어입니다.(그래서 생기는 부작용들도 많지만...)

그런데 이렇게 쉽게 접근할 수 있는 언어를 사용하는 사용자들을 보면 코딩의 품질이 많이 떨어지는데, 그 이유는 무엇일까요?! 왜 쉬운 언어임에도 불구하고 코딩의 품질은 전체적으로 낮을까요?!

오늘은 HTML의 의미와 좋은 마크업에 대해서 알아보도록 하겠습니다.

(여기서는 시각적으로 우수한 마크업이 아닌 HTML 부분만을 언급합니다.)

HTML은 Hyper Text Markup Language의 약자로 Hyper Text와 Markup Language의 결합어입니다.

여기서 Hyper Text란 인터넷의 아버지라 불리우는 [테드 넬슨]이 처음으로 고안해낸 개념으로, 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로, 혹은 동일한 문서 내에서 이동할 수 있도록 만든 텍스트를 말합니다.

두번째로, Markup Language란 원래의 내용에 그것을 식별하거나 부가적인 정보를 표시하는 언어를 의미합니다. 쉽게 설명하자면 공부를 하며 교과서 안 텍스트나 그림 등에 표시를 하거나 추가로 설명을 다는 모든 행위에 사용된 글로 생각하시면 될 것 같습니다.

위의 두가지의 의미가 합쳐져서 만들어진 것이 바로 HTML입니다. 아마 이 글을 읽고 계신 분들 중에는 '아~ 그렇구나~'라고 생각하고 계시는 분들이 많을 것 같습니다.

이렇게 아주 기초적인 HTML의 어원과 기본 개념에 대해서 상세히 밝히는 이유는 이를 알아야만 좋은 품질의 마크업이 무엇인지를 조금 더 명확하게 깨달을 수 있기 때문입니다.

그러면 좋은 품질의 마크업이란 무엇일까요?!

제작하시는 분들마다 조금씩 우위를 두고 생각하시는 기준이 다르겠지만 거의 대부분의 프론트엔드 개발자 분들은 시맨틱 마크업이라 말씀하실 것 같습니다.

그렇다면 다시 시맨틱 마크업은 무엇을 의미할까 궁금해지실 겁니다.

Semantic은 '의미론적인'이라는 뜻을 가지고 있는 단어입니다. 해석하자면 '의미가 분명한 마크업'을 바로 시맨틱 마크업, 혹은 의미론적인 마크업이라고 할 수 있겠습니다. 마크업이라는 행위 자체가 바로 추가적인 정보를 다는 행위인데 그것의 정보가 올바르지 않다면 아무리 시각적으로 훌륭하고 UI가 뛰어난 웹 사이트라 하더라도 좋은 품질의 마크업으로 이뤄진 것이라 할 수 없습니다.

'의미가 분명한 마크업', 즉 시맨틱 웹은, 모두가 알고 계시는 '월드 와이드 웹'의 창시자인 [팀 버너스 리]가 1998년 제안하였습니다. 시맨틱 웹을 제안하기 전 HTML의 주된 기능은, 단순히 정보를 보여주기 위한 수단이였습니다. 그러다 인터넷 사용자들이 폭발적으로 늘어나고 사용자들에 의하여 그 이상의 정보가 생성되는 것이 반복되자 이러한 정보들을 연결하기 위한 도구가 필요해졌습니다. 이 과정에서 탄생한 것이 바로 검색엔진입니다.

하지만, 검색엔진이 정보를 찾는데 단순히 보여주기만을 위한 마크업이 문제가 되었습니다. 레이아웃을 이유로 <table>로 태깅한 웹 사이트가 특정한 정보를 담고 있는 표를 찾는 사용자들에게 나타나고 사물의 정의를 알고 싶어서 단어를 찾으면 <dt>를 사용하여 다른 정보를 집어넣은 정보가 검색되었던 것입니다.

그렇다면 단순히 고품질의 마크업은 검색엔진을 위한것일까요?!

우리의 삶 주위엔 어디에든 정보가 있습니다. 일할 때에도, 놀 때에도 정보가 있습니다. 정보가 발생하는 출처의 양이 많고 적고가 중요한게 아닙니다. 중요한 건 정보가 연결된다는 것이지요. (팀 버너스 리 2009년 TED).

위 이야기는 [팀 버너스 리]가 TED 강연에서 언급한 내용입니다. 그가 말한것과 같이 [팀 버너스 리]가 가장 중요하다 여기는 것은 정보의 연결입니다. 정보와 정보를 연결하기 위해서 우리는 검색엔진이라는 '다리'를 사용합니다. 즉, 우리가 검색엔진을 위하여 바른 마크업을 해야하는 것이 아니라, 최종적으로는 그 정보를 사용할 사용자에게 그 정보를 전달하기 위하여 사용하는 것입니다.(그러니 프로그램 따위를 위해 노가다를 한다는 부정적인 생각은 버리시길...)

여러분이 생각하시는 좋은 마크업과 일치할 수도 그렇지 않을 수도 있지만 제가 생각하는 가장 좋은 마크업은 사용자가 쉽게 접근할 수 있는 마크업, 올바른 정보를 갖춘 마크업이라 생각합니다. 물론 검색엔진에서 쉽게 찾는다고 다 좋은 품질의 사이트는 아니지만 적어도 원하는 정보를 제대로 전달할 수 있는, 준비 된 HTML이야말로 좋은 품질의 마크업일 것입니다.