HTML 기초 (1) - 간략한 역사 / 태그란?
1. 간략한 역사
HTML은 프로그래밍 언어가 아닌 마크업 언어로서 Hypertext Markup Language의 약자입니다. HTML의 최초 등장 시기는 WWW (World Wide Web) 서비스와 맞물려 1991년으로 거슬러 올라갑니다. 최초의 규격은 1993년에 공식적으로 발표되었으며, 현재 HTML 규격 표준안 제정은 W3C (World Wide Web Consotium)에서 담당하고 있으며, HTML은 W3C의 각 버전 별 표준에 따라 마크업하게 되어 있습니다. (물론 강제는 아닙니다.)
HTML의 간략한 버전 별 역사는 아래와 같습니다.
- HTML 1.0 - 1991년 10월
- HTML 2.0 - 1995년 11월
- HTML 3.2 - 1997년 1월
- HTML 4.0 - 1997년 12월
- HTML 4.01 - 1999년 12월
- HTML5 - 2008년 1월, 2014년 10월 현재 권고안 (Recommendation) 확정
저는 HTML 3.2로 HTML을 시작했습니다 (마크업은 메모장으로 했었죠). 제가 HTML을 시작하던 때에는 우후죽순격으로 웹 사이트들이 생겨났고 수많은 웹 에디터들과 관련 서적들이 봇물처럼 쏟아져 나오기 시작하던 시절입니다. 당시 주종을 이루었던 브라우저는 Netscape 4.x와 Internet Explorer 2.0 또는 3.x였습니다. 국내 사이트들은 초기에는 Netscape에 맞추어 제작이 되다가, Internet Explorer가 등장하기 시작한 이후로는 "이 사이트는 Internet Explorer에 최적화 되어 있습니다." 라는 명문(?)을 달면서 IE 위주의 사이트들로 변모해 가게 됩니다. 그리고 그 다음은 Active X...
HTML 3.2 시절에는 대문자로 태그를 표기하는 것이 일반적이었고, 특정 브라우저에서만 동작하는 태그 (예를 들어 blank 라던가)들의 사용도 매우 잦았었습니다. 또한 마크업 언어와 스타일링 언어의 구분이 없었기 때문에 HTML의 속성 (Attribute)에 직접 스타일을 할당하는 구조였습니다. 일단 3.2 스타일의 코드를 살펴보도록 하겠습니다. (참고로 하위호환 덕택에 현대의 브라우저에서도 여전히 잘 실행됩니다.)
지금 보면 참 난잡한 코드임에는 틀림 없습니다. 이러한 문제로 인해 HTML 본래의 목적인 마크업 언어로서의 정체성을 살리기 위한 HTML 4.0과 4.01의 등장 이후에는 별도의 스타일링 언어인 CSS (Cascading Style Sheet)의 사용이 늘어남에 따라 위와 같은 번잡한 코드들은 많이 사라졌습니다. 그리고 현재는 많은 사이트들이 차기 표준안인 HTML5에 따라 만들어지고 있으며, 저 또한 모든 HTML 예제를 HTML5에 맞게 올리고 있습니다. 물론 스타일링은 별도의 CSS 또는 style 태그 내에 CSS를 넣어 올리고 있습니다.
현재의 화두인 HTML5는 2014년 10월 말에 권고안이 확정되었습니다. 하지만 아직 IE의 경우에는 HTML5의 일부 속성 (예를 들어 input 태그의 데이터 형식 속성들 중 일부를 지원하지 않음)을 여전히 지원하지 않고 있어서 이후에도 약간의 진통이 예상되기는 합니다.
이상으로 간략하게 HTML 역사와 특징을 살펴 보았고, 이제 본론으로 들어가도록 하겠습니다.
2. 태그란?
HTML의 기본 구조의 핵심은 바로 '태그'입니다. 소스 보기를 해 보시면 아시겠지만, 본 블로그 또한 HTML 문서이기 때문에 수 십개의 HTML 태그들로 이루어져 있습니다.
태그는 해당 영역이 어떤 역할을 해야 하는지 웹 브라우저의 렌더링 엔진에 알려주는 역할을 하게 됩니다. 예를 들어 p 태그로 감싸진 문장이 있다면, 웹 브라우저에서는 해당 문장 영역을 문단 (Paragraph)로 인식하게 되는 거죠. 태그가 없으면 브라우저는 해당 영역이 어떤 역할을 해야할 지 몰라서 그냥 텍스트로 표현해 주게 됩니다.
태그는 해당 태그가 어떤 역할을 하는 지 알려주는 태그명이 '<'와 '>' 사이에 들어가게 됩니다. 이와 같은 구분자를 통해 웹 브라우저는 컨텐츠와 태그를 분리하여 인식하게 됩니다. 태그명은 모두 영어 단어로 되어 있으며, 직관적인 단어 또는 축약어로 되어 있습니다.
태그는 보통 아래와 같이 분류됩니다.
- 단독 사용형 : img, hr, br 등
- 시작 - 끝 태그 영역 지정형 : html, body, head, title, div, p, h1~h5 등 대부분의 태그가 이에 해당
단독 사용형 태그들은 시작과 끝 태그가 없이 단일한 태그 표현 하나로 끝이 납니다. HTML의 경우에는 '/' 을 이용해서 끝을 맺어 줄 필요가 없지만, XHTML의 경우에는 XML 문법에 따라 단독 사용형 태그 또한 '/' 을 이용해서 끝을 맺어 줘야 합니다.
HTML 태그의 대부분을 차지하고 있는 시작 - 끝 태그 영역 지정형은 반드시 시작과 끝이 명시되어 있어야 합니다. 시작은 <태그명>으로 시작하고, 끝을 맺을 때는 태그명 앞에 '/'을 붙여 "이 태그는 여기까지!" 라는 것을 표현해 주어야 합니다. 요새는 끝을 제대로 맺어 놓지 않을 경우에도 웹 브라우저가 일부 태그는 자동으로 교정하여 해결해 주긴 합니다만, 자동 교정이 되지 않을 경우에는 페이지 모양이 깨지는 불상사가 일어나게 되므로 반드시 빼먹지 말고 넣어야 합니다.
다음에는 간단한 HTML 문서를 예제로 기본 구조에 대해 알아보도록 하겠습니다.
업데이트
* 2014년 10월 28일 HTML5 권고안 발표